Columns
コンテンツをレスポンシブ機能を持つ複数の列に分割し、情報の表示方法を改善します。
使用方法
このパターンをWeb画面に配置し、各プレースホルダにコンテンツを追加します。
- Columnsパターンをプレビューにドラッグします。
-
プレースホルダに必要なコンテンツを設定します。
-
入力パラメータをデフォルト値に設定します。
入力パラメータ
入力名 | 説明 | 型 | 必須 | デフォルト値 |
---|---|---|---|---|
GutterSize | 余白サイズを設定します。 | GutterSize Identifier | False | Entities.GutterSize.Gutter_L |
TabletBehavior | タブレット用のレスポンシブ動作。 | BreakColumns Identifier | False | Entities.BreakColumns.None |
PhoneBehavior | スマホ用のレスポンシブ動作。 | BreakColumns Identifier | False | Entities.BreakColumns.All |
ExtendedClass | このブロックにカスタムスタイルクラスを追加します。 | Text | False | なし |
レイアウトおよびクラス
CSSセレクタ
要素 | CSSクラス | 説明 |
---|---|---|
.columns | .columns2 | Columns2パターンの場合 |
.columns | .columns3 | Columns3パターンの場合 |
.columns | .columns4 | Columns4パターンの場合 |
.columns | .columns5 | Columns5パターンの場合 |
.columns | .columns6 | Columns6パターンの場合 |
.columns | .columns-medium-left | ColumnsMediumLeftパターンの場合 |
.columns | .columns-medium-right | ColumnsMediumRightパターンの場合 |
.columns | .columns-small-left | ColumnsSmallLeftパターンの場合 |
.columns | .columns-small-right | ColumnsSmallRightパターンの場合 |
.columns | .gutter-none | 列のアイテム間の余白がない場合 |
.columns | .gutter-xs | 列のアイテム間の余白が4pxの場合 |
.columns | .gutter-s | 列のアイテム間の余白が8pxの場合 |
.columns | .gutter-base | 列のアイテム間の余白が16pxの場合 |
.columns | .gutter-m | 列のアイテム間の余白が24pxの場合 |
.columns | .gutter-l | 列のアイテム間の余白が32pxの場合 |
.columns | .gutter-xl | 列のアイテム間の余白が40pxの場合 |
.columns | .gutter-xxl | 列のアイテム間の余白が48pxの場合 |
.columns | .tablet-break-all | タブレットで列のすべてのアイテムを改行する場合 |
.columns | .tablet-break-first | タブレットで列の最初のアイテムを改行する場合 |
.columns | .tablet-break-last | タブレットで列の最後のアイテムを改行する場合 |
.columns | .tablet-break-middle | タブレットで列の中間のアイテムを改行する場合 |
.columns | .tablet-break-none | タブレットで列を改行しない場合 |
.columns | .phone-break-all | スマホで列のすべてのアイテムを改行する場合 |
.columns | .phone-break-first | スマホで列の最初のアイテムを改行する場合 |
.columns | .phone-break-last | スマホで列の最後のアイテムを改行する場合 |
.columns | .phone-break-middle | スマホで列の中間のアイテムを改行する場合 |
.columns | .phone-break-none | スマホで列を改行しない場合 |