ローを追加する.
ローはセクションをカラムに分割し、コンテンツを横に並べます。3つの サービス、テキスト横の写真、記事横のサイドバーなどです。12のプリセットから 分割を選び、携帯電話には独自レイアウトを与えられます。ロー追加はこの ページを、カラムの中のローは ネストを ご覧ください。
ローを追加する
例ではチームの各サービス用に3カラムのローをセクションに追加します。
- セクションの+をクリックしてエレメントピッカーを開きます。
- 選ぶのはRowで、Layoutタブからです。2つの均等カラム付きで 入ります。
- ローのコントロールバーのグリッドアイコン (Column layout) を クリックし、3つの均等カラムなどのカラムプリセットを選んで Saveをクリックします。
- カラムの+をクリックしてコンテンツを追加します。
- ツールバーのSaveをクリックしてページを保存します。
グリッドアイコンはローのドラッグハンドルのすぐ横です。プリセットは クリックですぐカラムを変えます。Cancelで元のレイアウトに 戻ります。
表示結果
3つのサービスが横に並び、各カラムはセクション幅の3分の1です。768ピクセル 未満の画面ではカラムが積み重なります。各カラムが全幅になり、ページ上の順序 通りです。
カラムの高さは中身の分だけなので、短いカラムは隣より先に終わります。カラムに 背景色が付くと気づきます。Equal-height columnsで揃えます。
ローの設定
カラムレイアウト
グリッドアイコンは、独自レイアウトを持つ画面サイズごとにパネルを開きます。 各パネルにはこの12プリセットがタイルで並びます。
| プリセット | レイアウト |
|---|---|
| 1/1 | 全幅1カラム |
| 1/2 + 1/2 | 2つの均等カラム |
| 1/3 + 1/3 + 1/3 | 3つの均等カラム |
| 1/4 + 1/4 + 1/4 + 1/4 | 4つの均等カラム |
| 1/6 + 1/6 + 1/6 + 1/6 + 1/6 + 1/6 | 6つの均等カラム |
| 1/4 + 1/2 + 1/4 | 狭、広、狭 |
| 1/6 + 4/6 + 1/6 | 狭、とても広、狭 |
| 1/4 + 3/4 | 左4分の1、右4分の3 |
| 3/4 + 1/4 | 左4分の3、右4分の1 |
| 2/3 + 1/3 | 左広、右狭 |
| 1/3 + 2/3 | 左狭、右広 |
| 5/12 + 7/12 | 左やや狭、右やや広 |
その他の分割にはCustom Layoutをクリックし、幅を分数で入力します
(例: 1/6 + 5/6)。合計が1を超える幅は新しい行に折り返します。
ダイアログを再び開くとCustom Layoutに印が付き、レイアウトを
表示します (例: Custom Layout (1/6 + 5/6))。
画面サイズごとのレイアウト
最初のパネルMedium devices (≥ 768px)はタブレット以上を 設定します。携帯電話も変えるにはダイアログ上部のAdd screen sizeを クリックします。Extra small (< 576px)のパネルが開くので、必要なら 一覧から他のサイズを選んでプリセットを選びます。Remove screen sizeは パネルを削除します。
ローとカラムの設定
ローのコントロールバーでMore > Settingsを開きます。 カラム設定はカラムのバーで開きます。
| 設定 | エレメント | 内容 | 既定値 |
|---|---|---|---|
| Equal-height columns | Row | 全カラムを最も高いカラムの高さに伸ばします | Off |
| Mirror row | Row | 768ピクセル以上でカラムを逆順に表示します。積み重なったカラムはページ順序を保ちます | Off |
| Vertical centering | Column | 中身より高いカラムの中でコンテンツを中央に寄せます | Off |
Mirror rowは交互のローのページに向きます。左に写真、次は右に 写真、携帯電話では常に写真が先に来ます。
カラムの移動と削除
カラムはハンドルでドラッグするか、バーでMore > Move LeftまたはMove Rightを使います。カラムにDeleteはありません。代わりに カラムの少ないプリセットを選びます。コンテンツは失われません。残った最後の カラムに移動します。
表示されない場合
- カラムのVertical centeringが効きません。 カラムの高さは 中身の分だけなので、中央寄せする余地がありません。ローの設定で Equal-height columnsをオンにします。
- 携帯電話でカラムが縦に積まれます。 768ピクセル未満では既定です。 グリッドアイコンをクリックしてAdd screen sizeを選び、 Extra small (< 576px)にプリセットを選びます。
- テキストが別のカラムに移っています。 カラムの少ないプリセットを選んだため、 削除されたカラムのコンテンツが最後のカラムに移動しました。 Ctrl+Z (MacではCmd+Z) で変更を元に戻します。
- カラムのMoreメニューにDeleteがありません。 カラムはレイアウト経由で 削除します。ローのグリッドアイコンをクリックしてカラムの少ないプリセットを 選びます。
次はこちら
- ネスト: 細かいグリッドのためにカラムの中にローを入れます。
- セクション: カラム周りの帯に独自の背景を付けます。
- レスポンシブデザイン: レイアウトが画面サイズごとに適応する仕組み。