コンテナとグリッドでレイアウトを作る
ブロックをコンテナにまとめたりグリッドのセルに置いたりして、カードや段組みなどのレイアウトを作り、ひとまとまりとしてスタイルを整えたり移動したりできます。
コンテナとグリッドは、ほかのブロックを入れておけるブロックです。コンテナはブロックをひとつの箱にまとめるので、背景を付けたり、ひとまとまりとして移動したりできます。グリッドは、行と列の表のようにブロックを並べます。どちらもブロックパネルのレイアウトグループにあります。
どちらを使うか
- カード、背景色付きのパネル、まとめておきたいブロックのグループにはコンテナを使います。
- 短い特長を3つ横に並べるなど、同じ幅の列に項目をそろえたいときはグリッドを使います。
どちらも、中に入れたブロックに専用のスペースを用意します。ブロックをページ全体に配置するだけなら、どちらも必要ありません。セクションを操作するに直接置いてください。
コンテナを作る
- ブロックパネルのレイアウトの下にあるコンテナを見つけます。
- セクションにドラッグして、置きたい場所でドロップします。空のコンテナには「ここにブロックをドロップ」と表示されます。
- ブロックパネルからブロックをコンテナの上にドラッグします。ブロックがコンテナの中に入ることを示すため、コンテナに青い枠線が表示されます。
- マウスのボタンを離します。ブロックがコンテナの中に表示され、コンテナの幅いっぱいに広がります。
- 同じ方法でブロックをさらに追加します。
すでにページにあるブロックをコンテナの中にドラッグしたり、コンテナの外へ戻したりすることもできます。コンテナの中に別のコンテナを入れることも可能です。コンテナの中でも、ページ上と同じようにブロックを移動したりサイズを変更したりできます。詳しくはブロックの追加、移動、サイズ変更をご覧ください。
重要:コンテナを削除すると、中のブロックもすべて削除されます。誤って削除した場合は、上部バーの元に戻すをクリックしてください。
コンテナの見た目を変える
- コンテナ自体をクリックします（中のブロックではありません）。2つのブロックの間の空いたスペースをクリックすると選択しやすくなります。
- 設定パネルで全般と外観を開きます。
全般の項目は次のとおりです。
- 内側のレイアウトは、ブロックの並べ方を決めます。自由なグリッド（12列）では、セクションと同じようにブロックを好きな位置に置けます。縦に並べるでは、ブロックが上から下へ順に並びます。横に並べるでは、ブロックが横一列に並び、入りきらないときは次の行に折り返されます。
- グリッドの間隔は、ブロックどうしの間の余白です。
- 項目の揃え方は、コンテナがブロックより高いときにブロックを置く位置です。引き伸ばす、上、中央、下から選びます。
外観では、背景色、枠線の色、角の丸み、左右の余白、上下の余白（端とブロックの間の余白）、最小の高さを設定できます。
メモ:新しいブロックをドロップして入れられるのは、内側のレイアウトが自由なグリッド（12列）のコンテナだけです。縦に並べるまたは横に並べるのコンテナにブロックを入れるには、いったん自由なグリッドに切り替え、ブロックをドロップしてから、元の設定に戻してください。
グリッドを作る
- レイアウトグループからグリッドをセクションにドラッグします。新しいグリッドは3列2行で、点線のセルで表示されます。
- グリッドを選択した状態で、設定パネルの全般を開きます。列の数と行の数で形を決めます。どちらも1〜8の範囲で設定できます。
- ブロックを置きたいセルにドラッグします。青い枠で、ブロックが入るセルがわかります。
- マウスのボタンを離します。
- ブロックが複数のセルにまたがって広がった場合は、1セル分の幅にします。ブロックを選択してサイズと位置を開き、列の数を1にするか、右端のハンドルをセルの端までドラッグして戻します。
新しいブロックは、グリッドの列数を上限として通常の幅のまま入ります。そのため、最初は1行をまるごと埋めることがよくあります。ブロックは、表の結合セルのように、意図して複数のセルにまたがらせることもできます。ブロックの幅や高さを広げて、グリッドのより広い範囲を覆ってください。
グリッドの設定
- グリッドの間隔と項目の揃え方は、コンテナと同じように使えます。
- 外観では、グリッド全体の背景色、枠線の色、角の丸み、余白を設定できます。セルの枠線が変えるのは、エディタに表示される点線のセルガイドの色だけです。
スマートフォンでは、グリッドは1列にまとまり、ブロックは順番に縦に並びます。3列の行は、3つのブロックが縦に積み重なる形になります。