29個のプロパティ
要素の表示方法を指定するプロパティです。ブロック要素、インライン要素、フレックスコンテナ、グリッド、noneなど、様々な表示形式を設定できます。インライン・インラインブロックの違いも重要です。
display: flex;要素をフレックスコンテナに変換し、子要素（フレックスアイテム）を柔軟にレイアウトできるプロパティです。1次元レイアウト（行または列）の配置に最適で、モダンWebデザインの基礎となります。
.container {
display: flex;
justify-content: center;
align-items: center;
}要素をグリッドコンテナに変換し、子要素（グリッドアイテム）を2次元レイアウト（行と列）で配置できるプロパティです。複雑なレイアウトを直感的に実現でき、レスポンシブデザインにも最適です。
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1rem;
}フレックスアイテムの表示順序を変更するプロパティです。HTMLの記述順序を変えずに、視覚的な並び順だけを調整できます。アクセシビリティを保ちながらレスポンシブデザインに対応できます。
.first {
order: 1;
}
.second {
order: 3;
}
.third {
order: 2;
}要素をコンテナクエリのコンテナとして定義し、どの軸のサイズ変化を監視するかを指定するプロパティです。子要素がコンテナのサイズに応じてスタイルを変更できるようになります。
container-type: inline-size;親グリッドのトラック（行や列）を子グリッドで継承できる機能です。複雑なレイアウトの整列が簡単になります。
.parent {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
.child {
display: grid;
grid-template-columns: subgrid;
grid-column: 1 / -1;
}要素のアスペクト比（縦横比）を指定するプロパティです。16/9や1/1のように指定し、レスポンシブな画像や動画の表示で縦横比を維持します。padding-topハックの代替として、より直感的な実装が可能です。
aspect-ratio: 16 / 9;align-itemsとjustify-itemsを一括で設定するショートハンドプロパティです。Grid/Flexboxで中央配置が簡単になります。
.grid-container {
display: grid;
place-items: center;
}align-contentとjustify-contentを一括で設定するショートハンドプロパティです。
.flex-container {
display: flex;
flex-wrap: wrap;
place-content: center;
}フレックスコンテナ内のアイテムの配置方向を指定するプロパティです。row（横並び）、column（縦並び）、row-reverse、column-reverseの値があり、レスポンシブデザインでの方向切り替えに便利です。
flex-direction: row;フレックスコンテナ内のアイテムの主軸方向の配置を指定するプロパティです。flex-start、flex-end、center、space-between、space-aroundなどがあり、アイテム間の余白配分を制御します。
justify-content: center;グリッドコンテナ内のアイテムの水平方向（インライン軸）の配置を制御するプロパティです。全てのグリッドアイテムに対して一括で配置を指定できます。
.grid-container {
display: grid;
grid-template-columns: repeat(3, 200px);
justify-items: center;
}フレックスコンテナ内のアイテムの交差軸方向の配置を指定するプロパティです。flex-start、flex-end、center、baseline、stretchなどの値があり、高さが異なるアイテムの縦方向の配置を制御します。
align-items: center;FlexboxやGridで複数行がある場合、行全体の交差軸方向の配置を制御するプロパティです。flex-wrapで複数行になった場合や、グリッドで複数行・列がある場合に効果を発揮します。
.flex-container {
display: flex;
flex-wrap: wrap;
height: 300px;
align-content: center;
}フレックスアイテムが一行に収まらない場合の折り返し動作を制御します。nowrap（折り返しなし）、wrap（折り返す）、wrap-reverse（逆順で折り返す）があり、レスポンシブなカードレイアウトなどに使用されます。
.flex-container {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.item {
flex: 1 1 200px;
min-width: 120px;
background: #3b82f6;
color: #fff;
margin-bottom: 8px;
}フレックスアイテムの伸縮性と基本サイズを制御するプロパティです。flex-grow（余白の配分比率）、flex-shrink（縮小比率）、flex-basis（基本サイズ）を組み合わせて、柔軟で予測可能なレイアウトを実現します。
.sidebar {
flex: 0 0 250px;
}
.main {
flex: 1;
}グリッドコンテナの列のサイズと数を定義するプロパティです。px、%、fr（fractional unit）、auto、repeat()関数などで柔軟に指定できます。複雑な2次元レイアウトの基礎となります。
grid-template-columns: 1fr 1fr 1fr;グリッドエリアに名前を付けて、視覚的にレイアウトを定義できるプロパティです。文字列でエリア名を並べることで、直感的で保守性の高いグリッドレイアウトを実現できます。
.layout {
display: grid;
grid-template-areas:
"header header header"
"sidebar main aside"
"footer footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }グリッドで自動的に列数を調整する関数です。repeat(auto-fit, minmax(最小幅, 1fr))の形式で、コンテナ幅に応じて自動的にカラム数が変わるレスポンシブグリッドの実装に必須です。
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));要素の配置方法を指定するプロパティです。通常の文書フローからの配置制御が可能です。top、right、bottom、leftプロパティと組み合わせて使用します。
.relative-box {
position: relative;
top: 10px;
left: 20px;
}要素の重ね順（奥行き順）を指定するプロパティです。値が大きいほど手前に表示されます。position: static以外の要素に適用され、モーダルやドロップダウンメニューなどの実装に不可欠です。
z-index: 1;要素からはみ出したコンテンツの表示方法を指定するプロパティです。visible、hidden、scroll、autoなどがあり、スクロール領域の制御やレイアウトの調整に使用します。overflow-xとoverflow-yで軸ごとに指定も可能です。
.box {
width: 200px;
height: 80px;
overflow: visible;
}top、right、bottom、leftを一括で指定できる短縮プロパティです。position: absoluteやfixedと組み合わせて使用します。
inset: 20px;FlexboxやGridの子要素が個別に縦方向（交差軸）の配置を上書きするプロパティです。親のalign-itemsを上書きし、特定のアイテムだけ異なる配置を実現できます。
align-self: flex-start;Grid子要素が個別に横方向（インライン軸）の配置を指定するプロパティです。Flexboxでは効果がない点に注意。
justify-self: start;グリッドアイテムが占める列の範囲を指定する短縮プロパティです。grid-column-startとgrid-column-endを一括指定。
grid-column: span 2;グリッドアイテムが占める行の範囲を指定する短縮プロパティです。grid-row-startとgrid-row-endを一括指定。
grid-row: span 2;スクロール位置に応じて、通常のフローとfixedの間で切り替わる配置方法です。指定した位置に到達するまで通常配置、到達後は固定されます。
position: sticky; top: 0;書字方向（横書き・縦書き）に依存しない論理的なプロパティです。margin-inline-start、padding-block-endなど、方向に中立的な指定が可能です。
margin-inline-start: 20px;