Flexbox
一次元のレイアウトに最適なFlexboxの使用方法を解説します。.container {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.item {
flex: 1;
min-width: 0; /* オーバーフロー防止 */
}
/* フレックスアイテムの順序変更 */
.item:first-child {
order: 2;
}
Flexboxのベストプラクティス
/* 折り返し可能なグリッドレイアウト */
.grid {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.grid-item {
flex: 1 1 300px; /* 成長、縮小、基本サイズ */
}
CSS Grid
二次元のレイアウトに最適なGrid Layoutの使用方法を解説します。.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
}
/* 領域の名前付け */
.layout {
display: grid;
grid-template-areas:
"header header"
"nav main"
"footer footer";
grid-template-columns: 200px 1fr;
}
.header { grid-area: header; }
.nav { grid-area: nav; }
.main { grid-area: main; }
.footer { grid-area: footer; }
サブグリッド
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.item {
display: grid;
grid-template-columns: subgrid;
}
コンテナクエリ
要素のコンテナサイズに基づいてスタイルを変更します。.card-container {
container-type: inline-size;
}
.card {
display: grid;
grid-template-columns: 1fr;
}
@container (min-width: 400px) {
.card {
grid-template-columns: 200px 1fr;
}
}
アスペクト比の制御
.image-container {
aspect-ratio: 16 / 9;
overflow: hidden;
}
/* カード要素のアスペクト比 */
.card {
aspect-ratio: 3 / 4;
display: grid;
grid-template-rows: auto 1fr auto;
}
レスポンシブレイアウト
メディアクエリとビューポート
/* モバイルファースト */
.container {
padding: 1rem;
}
@media (min-width: 768px) {
.container {
padding: 2rem;
max-width: 1200px;
margin: 0 auto;
}
}
/* ビューポートユニット */
.hero {
height: 100vh;
padding: clamp(1rem, 5vw, 3rem);
}
モダンなセンタリング技術
/* Flexboxを使用したセンタリング */
.center-flex {
display: flex;
justify-content: center;
align-items: center;
}
/* Gridを使用したセンタリング */
.center-grid {
display: grid;
place-items: center;
}
/* 絶対配置を使用したセンタリング */
.center-absolute {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
マルチカラムレイアウト
.content {
columns: 3 300px;
gap: 2rem;
}
/* カラム内での改ページ防止 */
.card {
break-inside: avoid;
page-break-inside: avoid;
}
スティッキーポジショニング
.sticky-header {
position: sticky;
top: 0;
background: white;
z-index: 100;
}
/* スティッキーサイドバー */
.sidebar {
position: sticky;
top: 2rem;
height: calc(100vh - 4rem);
overflow-y: auto;
}
最新のレイアウトテクニック
グリッドマスク
.masked-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
mask-image: linear-gradient(to bottom,
black calc(100% - 100px),
transparent);
}
スクロールスナップ
.scroll-container {
scroll-snap-type: x mandatory;
overflow-x: scroll;
display: flex;
}
.scroll-item {
scroll-snap-align: start;
flex: 0 0 100%;
}
これらのモダンなレイアウト技術は、ブラウザのサポート状況が異なる場合があります。
必要に応じてフォールバックを実装することを検討してください。
複雑なレイアウトを実装する際は、まずシンプルなベースレイアウトを作成し、
段階的に機能を追加していくアプローチを推奨します。