CSSで子要素のレイアウト調整方法ガイド
CSS Child Element Layout Guide
目次 / Table of Contents
Flexboxレイアウト
Flexbox Layout
最適な使用ケース: 1次元レイアウト(横並び or 縦並び)
Best Use Case: One-dimensional layouts (horizontal or vertical)
基本設定 / Basic Setup
.parent {
display: flex; /* または inline-flex */
}
主要なプロパティ / Key Properties
親要素(Flexコンテナ)のプロパティ
Parent Element (Flex Container) Properties
.flex-container {
/* 方向設定 / Direction */
flex-direction: row; /* 横並び(デフォルト) / Horizontal (default) */
flex-direction: column; /* 縦並び / Vertical */
flex-direction: row-reverse; /* 横並び逆順 / Horizontal reversed */
flex-direction: column-reverse;/* 縦並び逆順 / Vertical reversed */
/* 折り返し設定 / Wrapping */
flex-wrap: nowrap; /* 折り返さない(デフォルト) / No wrap (default) */
flex-wrap: wrap; /* 折り返す / Wrap */
flex-wrap: wrap-reverse; /* 逆順で折り返す / Wrap reversed */
/* ショートハンド / Shorthand */
flex-flow: row wrap; /* flex-direction と flex-wrap の組み合わせ */
/* 主軸の配置 / Main axis alignment */
justify-content: flex-start; /* 開始位置(デフォルト) / Start (default) */
justify-content: flex-end; /* 終了位置 / End */
justify-content: center; /* 中央 / Center */
justify-content: space-between; /* 均等配置(両端詰め) / Space between */
justify-content: space-around; /* 均等配置(余白あり) / Space around */
justify-content: space-evenly; /* 完全均等配置 / Space evenly */
/* 交差軸の配置 / Cross axis alignment */
align-items: stretch; /* 引き伸ばし(デフォルト) / Stretch (default) */
align-items: flex-start; /* 開始位置 / Start */
align-items: flex-end; /* 終了位置 / End */
align-items: center; /* 中央 / Center */
align-items: baseline; /* ベースライン / Baseline */
/* 複数行の配置 / Multi-line alignment */
align-content: stretch; /* 引き伸ばし / Stretch */
align-content: flex-start; /* 開始位置 / Start */
align-content: center; /* 中央 / Center */
align-content: space-between; /* 均等配置 / Space between */
/* 間隔設定(モダンブラウザ) / Gap (modern browsers) */
gap: 20px; /* 行と列の間隔 / Row and column gap */
row-gap: 10px; /* 行の間隔 / Row gap */
column-gap: 15px; /* 列の間隔 / Column gap */
}
子要素(Flexアイテム)のプロパティ
Child Element (Flex Item) Properties
.flex-item {
/* 伸縮設定 / Flexibility */
flex-grow: 0; /* 拡大率(デフォルト: 0) / Grow factor (default: 0) */
flex-shrink: 1; /* 縮小率(デフォルト: 1) / Shrink factor (default: 1) */
flex-basis: auto; /* 基本サイズ / Base size */
/* ショートハンド / Shorthand */
flex: 0 1 auto; /* flex-grow flex-shrink flex-basis */
flex: 1; /* よく使われる設定(均等に伸縮) / Common: equal flexibility */
flex: 0 0 200px; /* 固定幅 / Fixed width */
/* 個別の交差軸配置 / Individual cross-axis alignment */
align-self: auto; /* 親の設定に従う / Follow parent */
align-self: flex-start; /* 開始位置 / Start */
align-self: center; /* 中央 / Center */
align-self: flex-end; /* 終了位置 / End */
/* 順序 / Order */
order: 0; /* 表示順序(デフォルト: 0) / Display order (default: 0) */
}
実践例 / Practical Examples
例1: 水平中央揃えレイアウト
Example 1: Horizontal Center Layout
.horizontal-center {
display: flex;
justify-content: center; /* 水平方向中央 / Horizontal center */
align-items: center; /* 垂直方向中央 / Vertical center */
height: 100vh; /* 全画面高さ / Full viewport height */
}
例2: 3カラムレイアウト(均等)
Example 2: 3-Column Layout (Equal)
.three-column {
display: flex;
gap: 20px;
}
.three-column > div {
flex: 1; /* 均等に分割 / Equal division */
}
例3: サイドバー付きレイアウト
Example 3: Layout with Sidebar
.layout-with-sidebar {
display: flex;
}
.sidebar {
flex: 0 0 250px; /* 固定幅250px / Fixed 250px width */
}
.main-content {
flex: 1; /* 残りのスペースを使用 / Use remaining space */
}
CSS Gridレイアウト
CSS Grid Layout
最適な使用ケース: 2次元レイアウト(行と列の両方)
Best Use Case: Two-dimensional layouts (both rows and columns)
基本設定 / Basic Setup
.parent {
display: grid; /* または inline-grid */
}
主要なプロパティ / Key Properties
親要素(Gridコンテナ)のプロパティ
Parent Element (Grid Container) Properties
.grid-container {
/* グリッドの定義 / Grid definition */
grid-template-columns: 200px 1fr 2fr; /* 列の定義 / Column definition */
grid-template-rows: 100px auto 200px; /* 行の定義 / Row definition */
/* 繰り返しパターン / Repeat patterns */
grid-template-columns: repeat(3, 1fr); /* 3列均等 / 3 equal columns */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* レスポンシブ / Responsive */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 自動調整 / Auto-adjust */
/* 名前付きエリア / Named areas */
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
/* 間隔設定 / Gap */
gap: 20px; /* 行と列の間隔 / Row and column gap */
row-gap: 10px; /* 行の間隔 / Row gap */
column-gap: 15px; /* 列の間隔 / Column gap */
/* 配置設定 / Alignment */
justify-items: start; /* 水平方向(セル内) / Horizontal (within cell) */
align-items: start; /* 垂直方向(セル内) / Vertical (within cell) */
justify-content: center; /* 水平方向(グリッド全体) / Horizontal (entire grid) */
align-content: center; /* 垂直方向(グリッド全体) / Vertical (entire grid) */
/* 自動配置 / Auto-placement */
grid-auto-flow: row; /* 行優先(デフォルト) / Row-first (default) */
grid-auto-flow: column; /* 列優先 / Column-first */
grid-auto-flow: dense; /* 密集配置 / Dense packing */
/* 暗黙的なグリッド / Implicit grid */
grid-auto-columns: 100px; /* 自動生成される列のサイズ / Auto-generated column size */
grid-auto-rows: 100px; /* 自動生成される行のサイズ / Auto-generated row size */
}
子要素(Gridアイテム)のプロパティ
Child Element (Grid Item) Properties
.grid-item {
/* 位置指定(ライン番号) / Position (line numbers) */
grid-column-start: 1;
grid-column-end: 3; /* または span 2 / or span 2 */
grid-row-start: 1;
grid-row-end: 2;
/* ショートハンド / Shorthand */
grid-column: 1 / 3; /* start / end */
grid-row: 1 / 2;
grid-area: 1 / 1 / 2 / 3; /* row-start / col-start / row-end / col-end */
/* 名前付きエリア使用 / Using named areas */
grid-area: header;
/* スパン指定 / Span specification */
grid-column: span 2; /* 2列分 / Span 2 columns */
grid-row: span 3; /* 3行分 / Span 3 rows */
/* 個別の配置 / Individual alignment */
justify-self: center; /* 水平方向 / Horizontal */
align-self: center; /* 垂直方向 / Vertical */
}
実践例 / Practical Examples
例1: 基本的なダッシュボードレイアウト
Example 1: Basic Dashboard Layout
.dashboard {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: 60px 1fr 50px;
grid-template-areas:
"sidebar header"
"sidebar main"
"sidebar footer";
gap: 20px;
height: 100vh;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
例2: レスポンシブカードグリッド
Example 2: Responsive Card Grid
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
}
例3: 複雑なマガジンレイアウト
Example 3: Complex Magazine Layout
.magazine-layout {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(4, 200px);
gap: 10px;
}
.featured-article {
grid-column: 1 / 4; /* 1列目から4列目まで / Columns 1-4 */
grid-row: 1 / 3; /* 1行目から3行目まで / Rows 1-3 */
}
.sidebar-article {
grid-column: 4 / 7; /* 4列目から7列目まで / Columns 4-7 */
grid-row: 1 / 2;
}
Positionプロパティ
Position Property
値の種類 / Position Values
.element {
/* static(デフォルト) / static (default) */
position: static;
/* 通常のドキュメントフロー / Normal document flow */
/* relative(相対配置) / relative positioning */
position: relative;
top: 10px; /* 元の位置から移動 / Move from original position */
left: 20px;
/* 元の場所は保持される / Original space preserved */
/* absolute(絶対配置) / absolute positioning */
position: absolute;
top: 0;
right: 0;
/* position指定のある親要素が基準 / Relative to positioned ancestor */
/* 通常フローから除外 / Removed from normal flow */
/* fixed(固定配置) / fixed positioning */
position: fixed;
bottom: 20px;
right: 20px;
/* ビューポートが基準 / Relative to viewport */
/* スクロールしても固定 / Fixed during scroll */
/* sticky(粘着配置) / sticky positioning */
position: sticky;
top: 0;
/* スクロール時に指定位置で固定 / Sticks at specified position when scrolling */
}
z-index(重なり順)
z-index (Stacking Order)
.layer {
position: relative; /* position指定が必要 / position required */
z-index: 10; /* 大きいほど前面 / Higher = front */
}
実践例 / Practical Examples
例1: モーダルウィンドウ
Example 1: Modal Window
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
}
.modal-content {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
z-index: 1001;
}
例2: スティッキーヘッダー
Example 2: Sticky Header
.sticky-header {
position: sticky;
top: 0;
background: white;
z-index: 100;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
例3: バッジ通知
Example 3: Badge Notification
.notification-container {
position: relative;
display: inline-block;
}
.badge {
position: absolute;
top: -8px;
right: -8px;
background: red;
color: white;
border-radius: 50%;
width: 20px;
height: 20px;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
}
Display & Alignment
Display & Alignment Properties
Displayの主要な値
Main Display Values
.element {
/* ブロック要素 / Block element */
display: block;
/* 幅100%、改行あり / Width 100%, line break */
/* インライン要素 / Inline element */
display: inline;
/* 幅・高さ指定不可、改行なし / No width/height, no line break */
/* インラインブロック / Inline-block */
display: inline-block;
/* 幅・高さ指定可、改行なし / Width/height ok, no line break */
/* 非表示 / Hidden */
display: none;
/* DOMに存在するが表示されない / Exists in DOM but invisible */
visibility: hidden;
/* 透明だが領域は保持 / Invisible but space preserved */
}
テキスト配置 / Text Alignment
.text-container {
/* 水平方向 / Horizontal */
text-align: left;
text-align: center;
text-align: right;
text-align: justify;
/* 垂直方向(table-cell使用時) / Vertical (with table-cell) */
vertical-align: top;
vertical-align: middle;
vertical-align: bottom;
}
マージンによる中央揃え
Centering with Margins
.center-block {
width: 600px;
margin: 0 auto; /* 水平方向中央 / Horizontal center */
}
.center-absolute {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 完全中央 / Perfect center */
}
実践的な例
Practical Examples
例1: レスポンシブナビゲーションバー
Example 1: Responsive Navigation Bar
<nav class="navbar">
<div class="logo">Logo</div>
<ul class="nav-links">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background: #333;
color: white;
}
.nav-links {
display: flex;
gap: 2rem;
list-style: none;
margin: 0;
padding: 0;
}
.nav-links a {
color: white;
text-decoration: none;
}
/* レスポンシブ対応 / Responsive */
@media (max-width: 768px) {
.navbar {
flex-direction: column;
gap: 1rem;
}
.nav-links {
flex-direction: column;
text-align: center;
}
}
例2: カードレイアウト
Example 2: Card Layout
<div class="card-container">
<div class="card">
<img src="image.jpg" alt="Image">
<div class="card-content">
<h3>Card Title</h3>
<p>Card description goes here.</p>
<button>Read More</button>
</div>
</div>
</div>
.card-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
padding: 2rem;
}
.card {
display: flex;
flex-direction: column;
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
transition: transform 0.3s;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.card img {
width: 100%;
height: 200px;
object-fit: cover;
}
.card-content {
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
flex: 1;
}
.card button {
margin-top: auto;
align-self: flex-start;
}
例3: ホーリーグレイルレイアウト
Example 3: Holy Grail Layout
<div class="holy-grail">
<header class="header">Header</header>
<div class="content-wrapper">
<aside class="left-sidebar">Left Sidebar</aside>
<main class="main-content">Main Content</main>
<aside class="right-sidebar">Right Sidebar</aside>
</div>
<footer class="footer">Footer</footer>
</div>
.holy-grail {
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
.content-wrapper {
display: grid;
grid-template-columns: 200px 1fr 200px;
gap: 20px;
}
/* モバイル対応 / Mobile responsive */
@media (max-width: 768px) {
.content-wrapper {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
.left-sidebar,
.right-sidebar {
order: 1;
}
.main-content {
order: 0;
}
}
例4: フォームレイアウト
Example 4: Form Layout
<form class="form-grid">
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email">
</div>
<div class="form-group full-width">
<label for="message">Message</label>
<textarea id="message"></textarea>
</div>
<button type="submit" class="full-width">Submit</button>
</form>
.form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
max-width: 800px;
margin: 0 auto;
}
.form-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.full-width {
grid-column: 1 / -1; /* 全幅 / Full width */
}
input,
textarea {
padding: 0.75rem;
border: 1px solid #ddd;
border-radius: 4px;
}
textarea {
min-height: 120px;
resize: vertical;
}
パフォーマンスとベストプラクティス
Performance and Best Practices
1. レイアウト手法の選択
1. Choosing Layout Methods
/* ✅ Good: Flexboxは1次元に使用 / Use Flexbox for 1D */
.horizontal-list {
display: flex;
gap: 1rem;
}
/* ✅ Good: Gridは2次元に使用 / Use Grid for 2D */
.page-layout {
display: grid;
grid-template-columns: 250px 1fr;
}
/* ❌ Bad: Gridを1次元に無駄使い / Wasteful use of Grid for 1D */
.simple-row {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
2. リフローの最小化
2. Minimize Reflows
/* ✅ Good: transformとopacityは高速 / transform and opacity are fast */
.smooth-animation {
transform: translateX(100px);
opacity: 0.5;
}
/* ❌ Bad: width, height, marginは再計算が発生 / width, height, margin trigger recalc */
.slow-animation {
width: 200px;
margin-left: 100px;
}
3. will-changeの適切な使用
3. Proper use of will-change
/* ✅ Good: アニメーション前に指定 / Specify before animation */
.animated-element:hover {
will-change: transform;
}
.animated-element.animating {
transform: scale(1.2);
}
/* ❌ Bad: 常時指定はメモリを無駄に消費 / Always-on wastes memory */
.element {
will-change: transform, opacity;
}
4. ネストの深さ制限
4. Limit Nesting Depth
/* ✅ Good: フラットな構造 / Flat structure */
.container {
display: grid;
}
.item {
/* スタイル / Styles */
}
/* ❌ Bad: 過度なネスト / Excessive nesting */
.container .wrapper .inner .item {
/* 詳細度が高すぎる / Too specific */
}
5. メディアクエリの戦略
5. Media Query Strategy
/* ✅ Good: モバイルファースト / Mobile-first */
.container {
display: flex;
flex-direction: column;
}
@media (min-width: 768px) {
.container {
flex-direction: row;
}
}
/* コンテナクエリ(モダン) / Container queries (modern) */
.card-container {
container-type: inline-size;
}
@container (min-width: 400px) {
.card {
display: grid;
grid-template-columns: 1fr 2fr;
}
}
6. 一般的な落とし穴
6. Common Pitfalls
/* ❌ Bad: margin collapsingを無視 / Ignoring margin collapse */
.parent {
/* 子要素のmarginが親を突き抜ける / Child margins collapse through parent */
}
/* ✅ Good: paddingまたはborderで解決 / Fix with padding or border */
.parent {
padding: 1px 0; /* または overflow: hidden */
}
/* ❌ Bad: flexコンテナ内でmargin: auto乱用 / Overusing margin: auto in flex */
.flex-item {
margin-left: auto; /* 意図が不明瞭 / Unclear intent */
}
/* ✅ Good: justify-contentで明示的に / Explicit with justify-content */
.flex-container {
justify-content: space-between;
}
7. パフォーマンスチェックリスト
7. Performance Checklist
- レイアウト変更時のリフローを最小化 / Minimize reflows on layout changes
- GPU加速プロパティを優先(transform, opacity) / Prefer GPU-accelerated properties
- 不要なposition: absoluteを避ける / Avoid unnecessary position: absolute
- contain プロパティで範囲を限定 / Use contain property to limit scope
- content-visibility で遅延レンダリング / Use content-visibility for lazy rendering
/* containプロパティの活用 / Using contain property */
.card {
contain: layout style paint;
/* レイアウト計算を隔離 / Isolate layout calculations */
}
/* content-visibilityで最適化 / Optimize with content-visibility */
.large-list-item {
content-visibility: auto;
/* ビューポート外は描画をスキップ / Skip rendering off-screen */
}
まとめ / Summary
レイアウト手法の使い分け
When to Use Each Layout Method
| 手法 / Method | 用途 / Use Case | 特徴 / Features |
|---|---|---|
| Flexbox | 1次元レイアウト / 1D layouts | ナビゲーション、ツールバー、単純なリスト / Navigation, toolbars, simple lists |
| Grid | 2次元レイアウト / 2D layouts | ページ全体、複雑なレイアウト / Full pages, complex layouts |
| Position | 重ね合わせ / Overlays | モーダル、ツールチップ、バッジ / Modals, tooltips, badges |
| Float | テキスト回り込み / Text wrapping | ※現在は非推奨 / Deprecated for layout |
クイックリファレンス / Quick Reference
水平中央揃え / Horizontal Center:
/* Flexbox */ display: flex; justify-content: center;
/* Grid */ display: grid; justify-items: center;
/* Margin */ margin: 0 auto; (ブロック要素 / block element)
垂直中央揃え / Vertical Center:
/* Flexbox */ display: flex; align-items: center;
/* Grid */ display: grid; align-items: center;
/* Position */ position: absolute; top: 50%; transform: translateY(-50%);
完全中央 / Perfect Center:
/* Flexbox */ display: flex; justify-content: center; align-items: center;
/* Grid */ display: grid; place-items: center;
/* Position */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
リソース / Resources
ブラウザ互換性確認 / Browser Compatibility
- Can I Use - CSS機能のブラウザサポート確認
- MDN Web Docs - 詳細なドキュメント
学習ツール / Learning Tools
- Flexbox Froggy - Flexbox学習ゲーム
- Grid Garden - Grid学習ゲーム
- CSS-Tricks - 実践的なチュートリアル
デバッグツール / Debugging Tools
- Chrome DevTools - Grid/Flexboxインスペクター
- Firefox DevTools - レイアウトデバッガー
作成日 / Created: 2026-01-27
対象ブラウザ / Target Browsers: モダンブラウザ(Chrome 90+, Firefox 88+, Safari 14+, Edge 90+)
CSS Child Element Layout Guide
目次 / Table of Contents
Flexboxレイアウト
Flexbox Layout
最適な使用ケース: 1次元レイアウト(横並び or 縦並び)
Best Use Case: One-dimensional layouts (horizontal or vertical)
基本設定 / Basic Setup
.parent {
display: flex; /* または inline-flex */
}
主要なプロパティ / Key Properties
親要素(Flexコンテナ)のプロパティ
Parent Element (Flex Container) Properties
.flex-container {
/* 方向設定 / Direction */
flex-direction: row; /* 横並び(デフォルト) / Horizontal (default) */
flex-direction: column; /* 縦並び / Vertical */
flex-direction: row-reverse; /* 横並び逆順 / Horizontal reversed */
flex-direction: column-reverse;/* 縦並び逆順 / Vertical reversed */
/* 折り返し設定 / Wrapping */
flex-wrap: nowrap; /* 折り返さない(デフォルト) / No wrap (default) */
flex-wrap: wrap; /* 折り返す / Wrap */
flex-wrap: wrap-reverse; /* 逆順で折り返す / Wrap reversed */
/* ショートハンド / Shorthand */
flex-flow: row wrap; /* flex-direction と flex-wrap の組み合わせ */
/* 主軸の配置 / Main axis alignment */
justify-content: flex-start; /* 開始位置(デフォルト) / Start (default) */
justify-content: flex-end; /* 終了位置 / End */
justify-content: center; /* 中央 / Center */
justify-content: space-between; /* 均等配置(両端詰め) / Space between */
justify-content: space-around; /* 均等配置(余白あり) / Space around */
justify-content: space-evenly; /* 完全均等配置 / Space evenly */
/* 交差軸の配置 / Cross axis alignment */
align-items: stretch; /* 引き伸ばし(デフォルト) / Stretch (default) */
align-items: flex-start; /* 開始位置 / Start */
align-items: flex-end; /* 終了位置 / End */
align-items: center; /* 中央 / Center */
align-items: baseline; /* ベースライン / Baseline */
/* 複数行の配置 / Multi-line alignment */
align-content: stretch; /* 引き伸ばし / Stretch */
align-content: flex-start; /* 開始位置 / Start */
align-content: center; /* 中央 / Center */
align-content: space-between; /* 均等配置 / Space between */
/* 間隔設定(モダンブラウザ) / Gap (modern browsers) */
gap: 20px; /* 行と列の間隔 / Row and column gap */
row-gap: 10px; /* 行の間隔 / Row gap */
column-gap: 15px; /* 列の間隔 / Column gap */
}
子要素(Flexアイテム)のプロパティ
Child Element (Flex Item) Properties
.flex-item {
/* 伸縮設定 / Flexibility */
flex-grow: 0; /* 拡大率(デフォルト: 0) / Grow factor (default: 0) */
flex-shrink: 1; /* 縮小率(デフォルト: 1) / Shrink factor (default: 1) */
flex-basis: auto; /* 基本サイズ / Base size */
/* ショートハンド / Shorthand */
flex: 0 1 auto; /* flex-grow flex-shrink flex-basis */
flex: 1; /* よく使われる設定(均等に伸縮) / Common: equal flexibility */
flex: 0 0 200px; /* 固定幅 / Fixed width */
/* 個別の交差軸配置 / Individual cross-axis alignment */
align-self: auto; /* 親の設定に従う / Follow parent */
align-self: flex-start; /* 開始位置 / Start */
align-self: center; /* 中央 / Center */
align-self: flex-end; /* 終了位置 / End */
/* 順序 / Order */
order: 0; /* 表示順序(デフォルト: 0) / Display order (default: 0) */
}
実践例 / Practical Examples
例1: 水平中央揃えレイアウト
Example 1: Horizontal Center Layout
.horizontal-center {
display: flex;
justify-content: center; /* 水平方向中央 / Horizontal center */
align-items: center; /* 垂直方向中央 / Vertical center */
height: 100vh; /* 全画面高さ / Full viewport height */
}
例2: 3カラムレイアウト(均等)
Example 2: 3-Column Layout (Equal)
.three-column {
display: flex;
gap: 20px;
}
.three-column > div {
flex: 1; /* 均等に分割 / Equal division */
}
例3: サイドバー付きレイアウト
Example 3: Layout with Sidebar
.layout-with-sidebar {
display: flex;
}
.sidebar {
flex: 0 0 250px; /* 固定幅250px / Fixed 250px width */
}
.main-content {
flex: 1; /* 残りのスペースを使用 / Use remaining space */
}
CSS Gridレイアウト
CSS Grid Layout
最適な使用ケース: 2次元レイアウト(行と列の両方)
Best Use Case: Two-dimensional layouts (both rows and columns)
基本設定 / Basic Setup
.parent {
display: grid; /* または inline-grid */
}
主要なプロパティ / Key Properties
親要素(Gridコンテナ)のプロパティ
Parent Element (Grid Container) Properties
.grid-container {
/* グリッドの定義 / Grid definition */
grid-template-columns: 200px 1fr 2fr; /* 列の定義 / Column definition */
grid-template-rows: 100px auto 200px; /* 行の定義 / Row definition */
/* 繰り返しパターン / Repeat patterns */
grid-template-columns: repeat(3, 1fr); /* 3列均等 / 3 equal columns */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* レスポンシブ / Responsive */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 自動調整 / Auto-adjust */
/* 名前付きエリア / Named areas */
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
/* 間隔設定 / Gap */
gap: 20px; /* 行と列の間隔 / Row and column gap */
row-gap: 10px; /* 行の間隔 / Row gap */
column-gap: 15px; /* 列の間隔 / Column gap */
/* 配置設定 / Alignment */
justify-items: start; /* 水平方向(セル内) / Horizontal (within cell) */
align-items: start; /* 垂直方向(セル内) / Vertical (within cell) */
justify-content: center; /* 水平方向(グリッド全体) / Horizontal (entire grid) */
align-content: center; /* 垂直方向(グリッド全体) / Vertical (entire grid) */
/* 自動配置 / Auto-placement */
grid-auto-flow: row; /* 行優先(デフォルト) / Row-first (default) */
grid-auto-flow: column; /* 列優先 / Column-first */
grid-auto-flow: dense; /* 密集配置 / Dense packing */
/* 暗黙的なグリッド / Implicit grid */
grid-auto-columns: 100px; /* 自動生成される列のサイズ / Auto-generated column size */
grid-auto-rows: 100px; /* 自動生成される行のサイズ / Auto-generated row size */
}
子要素(Gridアイテム)のプロパティ
Child Element (Grid Item) Properties
.grid-item {
/* 位置指定(ライン番号) / Position (line numbers) */
grid-column-start: 1;
grid-column-end: 3; /* または span 2 / or span 2 */
grid-row-start: 1;
grid-row-end: 2;
/* ショートハンド / Shorthand */
grid-column: 1 / 3; /* start / end */
grid-row: 1 / 2;
grid-area: 1 / 1 / 2 / 3; /* row-start / col-start / row-end / col-end */
/* 名前付きエリア使用 / Using named areas */
grid-area: header;
/* スパン指定 / Span specification */
grid-column: span 2; /* 2列分 / Span 2 columns */
grid-row: span 3; /* 3行分 / Span 3 rows */
/* 個別の配置 / Individual alignment */
justify-self: center; /* 水平方向 / Horizontal */
align-self: center; /* 垂直方向 / Vertical */
}
実践例 / Practical Examples
例1: 基本的なダッシュボードレイアウト
Example 1: Basic Dashboard Layout
.dashboard {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: 60px 1fr 50px;
grid-template-areas:
"sidebar header"
"sidebar main"
"sidebar footer";
gap: 20px;
height: 100vh;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
例2: レスポンシブカードグリッド
Example 2: Responsive Card Grid
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
}
例3: 複雑なマガジンレイアウト
Example 3: Complex Magazine Layout
.magazine-layout {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(4, 200px);
gap: 10px;
}
.featured-article {
grid-column: 1 / 4; /* 1列目から4列目まで / Columns 1-4 */
grid-row: 1 / 3; /* 1行目から3行目まで / Rows 1-3 */
}
.sidebar-article {
grid-column: 4 / 7; /* 4列目から7列目まで / Columns 4-7 */
grid-row: 1 / 2;
}
Positionプロパティ
Position Property
値の種類 / Position Values
.element {
/* static(デフォルト) / static (default) */
position: static;
/* 通常のドキュメントフロー / Normal document flow */
/* relative(相対配置) / relative positioning */
position: relative;
top: 10px; /* 元の位置から移動 / Move from original position */
left: 20px;
/* 元の場所は保持される / Original space preserved */
/* absolute(絶対配置) / absolute positioning */
position: absolute;
top: 0;
right: 0;
/* position指定のある親要素が基準 / Relative to positioned ancestor */
/* 通常フローから除外 / Removed from normal flow */
/* fixed(固定配置) / fixed positioning */
position: fixed;
bottom: 20px;
right: 20px;
/* ビューポートが基準 / Relative to viewport */
/* スクロールしても固定 / Fixed during scroll */
/* sticky(粘着配置) / sticky positioning */
position: sticky;
top: 0;
/* スクロール時に指定位置で固定 / Sticks at specified position when scrolling */
}
z-index(重なり順)
z-index (Stacking Order)
.layer {
position: relative; /* position指定が必要 / position required */
z-index: 10; /* 大きいほど前面 / Higher = front */
}
実践例 / Practical Examples
例1: モーダルウィンドウ
Example 1: Modal Window
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
}
.modal-content {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
z-index: 1001;
}
例2: スティッキーヘッダー
Example 2: Sticky Header
.sticky-header {
position: sticky;
top: 0;
background: white;
z-index: 100;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
例3: バッジ通知
Example 3: Badge Notification
.notification-container {
position: relative;
display: inline-block;
}
.badge {
position: absolute;
top: -8px;
right: -8px;
background: red;
color: white;
border-radius: 50%;
width: 20px;
height: 20px;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
}
Display & Alignment
Display & Alignment Properties
Displayの主要な値
Main Display Values
.element {
/* ブロック要素 / Block element */
display: block;
/* 幅100%、改行あり / Width 100%, line break */
/* インライン要素 / Inline element */
display: inline;
/* 幅・高さ指定不可、改行なし / No width/height, no line break */
/* インラインブロック / Inline-block */
display: inline-block;
/* 幅・高さ指定可、改行なし / Width/height ok, no line break */
/* 非表示 / Hidden */
display: none;
/* DOMに存在するが表示されない / Exists in DOM but invisible */
visibility: hidden;
/* 透明だが領域は保持 / Invisible but space preserved */
}
テキスト配置 / Text Alignment
.text-container {
/* 水平方向 / Horizontal */
text-align: left;
text-align: center;
text-align: right;
text-align: justify;
/* 垂直方向(table-cell使用時) / Vertical (with table-cell) */
vertical-align: top;
vertical-align: middle;
vertical-align: bottom;
}
マージンによる中央揃え
Centering with Margins
.center-block {
width: 600px;
margin: 0 auto; /* 水平方向中央 / Horizontal center */
}
.center-absolute {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 完全中央 / Perfect center */
}
実践的な例
Practical Examples
例1: レスポンシブナビゲーションバー
Example 1: Responsive Navigation Bar
<nav class="navbar">
<div class="logo">Logo</div>
<ul class="nav-links">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background: #333;
color: white;
}
.nav-links {
display: flex;
gap: 2rem;
list-style: none;
margin: 0;
padding: 0;
}
.nav-links a {
color: white;
text-decoration: none;
}
/* レスポンシブ対応 / Responsive */
@media (max-width: 768px) {
.navbar {
flex-direction: column;
gap: 1rem;
}
.nav-links {
flex-direction: column;
text-align: center;
}
}
例2: カードレイアウト
Example 2: Card Layout
<div class="card-container">
<div class="card">
<img src="image.jpg" alt="Image">
<div class="card-content">
<h3>Card Title</h3>
<p>Card description goes here.</p>
<button>Read More</button>
</div>
</div>
</div>
.card-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
padding: 2rem;
}
.card {
display: flex;
flex-direction: column;
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
transition: transform 0.3s;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.card img {
width: 100%;
height: 200px;
object-fit: cover;
}
.card-content {
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
flex: 1;
}
.card button {
margin-top: auto;
align-self: flex-start;
}
例3: ホーリーグレイルレイアウト
Example 3: Holy Grail Layout
<div class="holy-grail">
<header class="header">Header</header>
<div class="content-wrapper">
<aside class="left-sidebar">Left Sidebar</aside>
<main class="main-content">Main Content</main>
<aside class="right-sidebar">Right Sidebar</aside>
</div>
<footer class="footer">Footer</footer>
</div>
.holy-grail {
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
.content-wrapper {
display: grid;
grid-template-columns: 200px 1fr 200px;
gap: 20px;
}
/* モバイル対応 / Mobile responsive */
@media (max-width: 768px) {
.content-wrapper {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
.left-sidebar,
.right-sidebar {
order: 1;
}
.main-content {
order: 0;
}
}
例4: フォームレイアウト
Example 4: Form Layout
<form class="form-grid">
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email">
</div>
<div class="form-group full-width">
<label for="message">Message</label>
<textarea id="message"></textarea>
</div>
<button type="submit" class="full-width">Submit</button>
</form>
.form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
max-width: 800px;
margin: 0 auto;
}
.form-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.full-width {
grid-column: 1 / -1; /* 全幅 / Full width */
}
input,
textarea {
padding: 0.75rem;
border: 1px solid #ddd;
border-radius: 4px;
}
textarea {
min-height: 120px;
resize: vertical;
}
パフォーマンスとベストプラクティス
Performance and Best Practices
1. レイアウト手法の選択
1. Choosing Layout Methods
/* ✅ Good: Flexboxは1次元に使用 / Use Flexbox for 1D */
.horizontal-list {
display: flex;
gap: 1rem;
}
/* ✅ Good: Gridは2次元に使用 / Use Grid for 2D */
.page-layout {
display: grid;
grid-template-columns: 250px 1fr;
}
/* ❌ Bad: Gridを1次元に無駄使い / Wasteful use of Grid for 1D */
.simple-row {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
2. リフローの最小化
2. Minimize Reflows
/* ✅ Good: transformとopacityは高速 / transform and opacity are fast */
.smooth-animation {
transform: translateX(100px);
opacity: 0.5;
}
/* ❌ Bad: width, height, marginは再計算が発生 / width, height, margin trigger recalc */
.slow-animation {
width: 200px;
margin-left: 100px;
}
3. will-changeの適切な使用
3. Proper use of will-change
/* ✅ Good: アニメーション前に指定 / Specify before animation */
.animated-element:hover {
will-change: transform;
}
.animated-element.animating {
transform: scale(1.2);
}
/* ❌ Bad: 常時指定はメモリを無駄に消費 / Always-on wastes memory */
.element {
will-change: transform, opacity;
}
4. ネストの深さ制限
4. Limit Nesting Depth
/* ✅ Good: フラットな構造 / Flat structure */
.container {
display: grid;
}
.item {
/* スタイル / Styles */
}
/* ❌ Bad: 過度なネスト / Excessive nesting */
.container .wrapper .inner .item {
/* 詳細度が高すぎる / Too specific */
}
5. メディアクエリの戦略
5. Media Query Strategy
/* ✅ Good: モバイルファースト / Mobile-first */
.container {
display: flex;
flex-direction: column;
}
@media (min-width: 768px) {
.container {
flex-direction: row;
}
}
/* コンテナクエリ(モダン) / Container queries (modern) */
.card-container {
container-type: inline-size;
}
@container (min-width: 400px) {
.card {
display: grid;
grid-template-columns: 1fr 2fr;
}
}
6. 一般的な落とし穴
6. Common Pitfalls
/* ❌ Bad: margin collapsingを無視 / Ignoring margin collapse */
.parent {
/* 子要素のmarginが親を突き抜ける / Child margins collapse through parent */
}
/* ✅ Good: paddingまたはborderで解決 / Fix with padding or border */
.parent {
padding: 1px 0; /* または overflow: hidden */
}
/* ❌ Bad: flexコンテナ内でmargin: auto乱用 / Overusing margin: auto in flex */
.flex-item {
margin-left: auto; /* 意図が不明瞭 / Unclear intent */
}
/* ✅ Good: justify-contentで明示的に / Explicit with justify-content */
.flex-container {
justify-content: space-between;
}
7. パフォーマンスチェックリスト
7. Performance Checklist
- レイアウト変更時のリフローを最小化 / Minimize reflows on layout changes
- GPU加速プロパティを優先(transform, opacity) / Prefer GPU-accelerated properties
- 不要なposition: absoluteを避ける / Avoid unnecessary position: absolute
- contain プロパティで範囲を限定 / Use contain property to limit scope
- content-visibility で遅延レンダリング / Use content-visibility for lazy rendering
/* containプロパティの活用 / Using contain property */
.card {
contain: layout style paint;
/* レイアウト計算を隔離 / Isolate layout calculations */
}
/* content-visibilityで最適化 / Optimize with content-visibility */
.large-list-item {
content-visibility: auto;
/* ビューポート外は描画をスキップ / Skip rendering off-screen */
}
まとめ / Summary
レイアウト手法の使い分け
When to Use Each Layout Method
| 手法 / Method | 用途 / Use Case | 特徴 / Features |
|---|---|---|
| Flexbox | 1次元レイアウト / 1D layouts | ナビゲーション、ツールバー、単純なリスト / Navigation, toolbars, simple lists |
| Grid | 2次元レイアウト / 2D layouts | ページ全体、複雑なレイアウト / Full pages, complex layouts |
| Position | 重ね合わせ / Overlays | モーダル、ツールチップ、バッジ / Modals, tooltips, badges |
| Float | テキスト回り込み / Text wrapping | ※現在は非推奨 / Deprecated for layout |
クイックリファレンス / Quick Reference
水平中央揃え / Horizontal Center:
/* Flexbox */ display: flex; justify-content: center;
/* Grid */ display: grid; justify-items: center;
/* Margin */ margin: 0 auto; (ブロック要素 / block element)
垂直中央揃え / Vertical Center:
/* Flexbox */ display: flex; align-items: center;
/* Grid */ display: grid; align-items: center;
/* Position */ position: absolute; top: 50%; transform: translateY(-50%);
完全中央 / Perfect Center:
/* Flexbox */ display: flex; justify-content: center; align-items: center;
/* Grid */ display: grid; place-items: center;
/* Position */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
リソース / Resources
ブラウザ互換性確認 / Browser Compatibility
- Can I Use - CSS機能のブラウザサポート確認
- MDN Web Docs - 詳細なドキュメント
学習ツール / Learning Tools
- Flexbox Froggy - Flexbox学習ゲーム
- Grid Garden - Grid学習ゲーム
- CSS-Tricks - 実践的なチュートリアル
デバッグツール / Debugging Tools
- Chrome DevTools - Grid/Flexboxインスペクター
- Firefox DevTools - レイアウトデバッガー
作成日 / Created: 2026-01-27
対象ブラウザ / Target Browsers: モダンブラウザ(Chrome 90+, Firefox 88+, Safari 14+, Edge 90+)
tst