22個のプロパティ
要素の表示方法を指定するプロパティです。ブロック要素、インライン要素、フレックスコンテナ、グリッド、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;
}要素をコンテナクエリのコンテナとして定義し、どの軸のサイズ変化を監視するかを指定するプロパティです。子要素がコンテナのサイズに応じてスタイルを変更できるようになります。
.card {
container-type: inline-size;
}
@container (min-width: 300px) {
.card-title {
font-size: 1.5rem;
}
}親グリッドのトラック（行や列）を子グリッドで継承できる機能です。複雑なレイアウトの整列が簡単になります。
.parent {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
.child {
display: grid;
grid-template-columns: subgrid;
grid-column: 1 / -1;
}要素のアスペクト比（縦横比）を指定するプロパティです。レスポンシブな画像や動画の表示に便利です。
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;
}フレックスコンテナ内のアイテムの配置方向を指定するプロパティです。
flex-direction: row;フレックスコンテナ内のアイテムの主軸方向の配置を指定するプロパティです。
justify-content: center;グリッドコンテナ内のアイテムの水平方向（インライン軸）の配置を制御するプロパティです。全てのグリッドアイテムに対して一括で配置を指定できます。
.grid-container {
display: grid;
grid-template-columns: repeat(3, 200px);
justify-items: center;
}フレックスコンテナ内のアイテムの交差軸方向の配置を指定するプロパティです。
align-items: center;FlexboxやGridで複数行がある場合、行全体の交差軸方向の配置を制御するプロパティです。flex-wrapで複数行になった場合や、グリッドで複数行・列がある場合に効果を発揮します。
.flex-container {
display: flex;
flex-wrap: wrap;
height: 300px;
align-content: center;
}フレックスアイテムが一行に収まらない場合の折り返し動作を制御します。
.flex-container {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.item {
flex: 1 1 200px;
min-width: 120px;
background: #3b82f6;
color: #fff;
margin-bottom: 8px;
}フレックスアイテムの伸縮性と基本サイズを制御するプロパティです。
.sidebar {
flex: 0 0 250px;
}
.main {
flex: 1;
}グリッドコンテナの列のサイズと数を定義するプロパティです。
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; }グリッドで自動的に列数を調整する関数です。レスポンシブグリッドの実装に必須です。
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));要素の配置方法を指定するプロパティです。通常の文書フローからの配置制御が可能です。top、right、bottom、leftプロパティと組み合わせて使用します。
.relative-box {
position: relative;
top: 10px;
left: 20px;
}要素の重ね順（奥行き順）を指定するプロパティです。値が大きいほど手前に表示されます。
.box1 {
position: absolute;
z-index: 10;
}
.box2 {
position: absolute;
z-index: 5;
}
.box3 {
position: absolute;
z-index: 0;
}要素からはみ出したコンテンツの表示方法を指定するプロパティです。
.box {
width: 200px;
height: 80px;
overflow: visible;
}