■ CSS その5
- {display:コンテナの形式;}、フレキシブルボックスのレイアウトを指定する。→ 使用例を表示
コンテナの形式:
- flex:ブロックレベル(大体の要素が配置できる)
- inline-flex:インラインレベル(インラインの要素が配置できる)
※HTML4当たりまでは、table系タグで左右の配置を調整していましたが、その後、左右で画面を分割して配置する場合に使っています。
- {flex-direction:方向;}、フレックスアイテムの配置方向を指定する。→ 使用例を表示
方向
- row = 横方向
- row-reverse = 横方向逆
- column = 縦方向
- column = 縦方向逆
※HTML4当たりまでは、table系タグで左右の配置を調整していましたが、その後、左右で画面を分割して配置する場合に使っています。
- {flex-wrap:繰り返し;}、フレックスアイテムの折り返しを指定する
。
- {flex-flow:-direction -wrap;}、フレックスアイテムの配置方向と折り返しを指定する。
- {order:順序;}、フレックスアイテムを配置する順序を指定する。
- {flex-grow:伸び率;}、フレックスアイテムの幅の伸び率を指定する。
- {flex-shrink:縮み率;}、フレックスアイテムの幅の縮み率を指定する。
- {flex-basis:幅;}、フレックスアイテムの基本と幅を指定する。
- {flex:-grow -shrink -basis;}、フレックスアイテムの幅をまとめて指定する。
- {justufy-content:位置;}、ボックス全体の横方向の揃え位置を指定する。
- {aling-content:位置;}、ボックス全体の縦方向の揃え位置を指定する。
- {place-content:align-content justify-content;}、ボックス全体の揃え位置をまとめて指定する。
- {justify-self:位置;}、個別のボックスの横方向の揃え位置を指定する。
- {aling-self:位置;}、個別のボックスの縦方向の揃え位置を指定する。
- {place-self:align-self justify-self;}、個別のボックスの揃え位置をまとめて指定する。
- justify-items:位置、すべてのボックスの横方向の揃え位置をしていする。
- {align-items:位置;}、すべてのボックスの縦方向の揃え位置を指定する。
- {place-items:akign-items justify-items;}、すべてのボックスの揃え位置をまとめて指定する。
グリッドレイアウト
フレキシブルボックスレイアウトでは、列分割が一定です。よって、何段(何行)重ねても同じ列幅になります。
グリッドレイアウトでは、いわば基本ボックス(セル)サイズを設定し、ボックスを結合する感じの指定が出来ます。
列が何倍かのボックス、行が何倍かのボックスが指定できます
- {display:コンテナの形式;}、グリッドレイアウトを指定する。
コンテナの形式
- grid:ブロックレベルのグリッドコンテナ(普通はこっちでいいです。)
- inline-grid:インラインレベルのグリッドコンテナ
- {grid-template-rows:ライン名 高さ;}、
縦方向(行)の高さを指定します。上から順のライン名 高さをそれぞれ半角スペースで区切って記述します。
ライン名は、[ライン名]で」記述します。
キーワードとして、none , subgridがあります。
高さの指定
- 任意の数値+単位:例= 100px
- 任意の数値の%
- 任意の数値fr: コンテ内の空間を分割する。
1fr 1frだと1:1に、2fr 1frだと2:1に分割します。
- mini-contenet:グリッドアイテムが取り得る最小値を高さにする。
- auto:グリッドアイテムの最大値からグリッドコンテナの最小値の間。
aling-contentやjusstif-contentのプロパティによる拡大を許可する。
- その他関数(省略)
→グリッドレイアウトの例を参照。
- {grid-template-columns:ライン名 幅;}、
縦方向(列)の横幅を指定します。左から順のライン名 幅をそれぞれ半角スペースで区切って記述します。
ライン名は、[ライン名]で」記述します。他はgrid-template-rowsに同じです。
→グリッドレイアウトの例を参照。
- {grid-row:-start -end;}アイテム(ボックス/セル)の配置と大きさを行方向を基準に指定する。
数値、spanで指定します。数値 / 数値 = 開始行番号 /終了行番号で高さをして出来ます。
→グリッドレイアウトの例を参照。
- {grid-column:ライン名 幅;}、アイテム(ボックス/セル)の配置と大きさを列方向を基準に指定する。
数値、spanで指定します。数値 / 数値 = 開始行番号 /終了行番号で横方向を出来ます。
→グリッドレイアウトの例を参照。
- {grid-template-areas:名前;}、グリッドエリアの名前を指定する。
ダブルクロテーションで囲み、半角スペースで区切って記述します。
- {grid-template:-rows - columns -areas;}、グリッドトラックをまとめて指定する。
- {grid-auto-rows:高さ;}、暗黙的(デフォルト)グリッドトラックの行の高さを指定する。
- {grid-auto-columns:幅;}、暗黙的グリッドトラックの列の幅を指定する。
- {grid-auto-flow:配置方法;}、グリッドアイテムの自動配置方法を指定する。
- {grid:-template-rows -template-columns -template-aread -auto-rows -auto-colums -auto-flow;}、グリッドトラックとアイテムの配置方法をまとめて指定する。
- {grid-row-start:グリッドライン;}、{grid-row-end:グリッドライン;}、
アイテムの配置と大きさを行の始点・終点を起点に指定する。
- {grid-row:-start -end;}、アイテムの配置と大きさを行方向を喜寿にまとめて指定する。
- {grid-column-start:グリッドライン;}、{grid-column-end:グリッドライン;}、{grid-column:-start -end;}、
アイテムの配置と大きさを列方向を基準に指定する。
- {grid-area:grid-row-start grid-column-stat grid-row-end grid-column-end;}、アイテムの配置と大きさをまとめて指定する。
- 不明:-ms-grid-column/-ms-grid-row/
-ms-grid-area
※「HTML & CSS ポケット「リファレンス 改訂第4版」2026/1/23第1刷(技術評論社)などに記載
- {row-gap:間隔;}、行の間隔と指定する。
- {column-gap:間隔;}、列の間隔を指定する。
- {gap:row- column;}、行と列の間隔をまとめて指定する。
