13,005
回編集
「CSS - レイアウト」の版間の差分
ナビゲーションに移動
検索に移動
→CSS Flexbox
(→概要) |
|||
| 91行目: | 91行目: | ||
==== CSS Flexbox ==== | ==== CSS Flexbox ==== | ||
CSS Flexboxは、1次元のレイアウトに特に強みがある。<br> | CSS Flexboxは、1次元のレイアウトに特に強みがある。<br> | ||
また、動的なコンテンツに柔軟に対応している。<br> | |||
<br> | <br> | ||
これは、ナビゲーションメニューやカードの配置等で使用される。<br> | これは、ナビゲーションメニューやカードの配置等で使用される。<br> | ||
<br> | |||
以下の例では、上に1つ、中央に2つ、下に1つレイアウトを配置している。<br> | |||
<br> | |||
<syntaxhighlight lang="html"> | |||
<div class="container"> | |||
<div class="top">上部コンテンツ</div> | |||
<div class="middle"> | |||
<div class="middle-item">中部左</div> | |||
<div class="middle-item">中部右</div> | |||
</div> | |||
<div class="bottom">下部コンテンツ</div> | |||
</div> | |||
</syntaxhighlight> | |||
<br> | |||
<syntaxhighlight lang="css"> | <syntaxhighlight lang="css"> | ||
.container { | .container { | ||
display: flex; | display: flex; | ||
justify-content: space-between; | flex-direction: column; | ||
align-items: center; | justify-content: space-between; /* 左右の要素を両端に配置 */ | ||
align-items: center; /* 縦方向を中央揃え */ | |||
gap: 20px; | |||
max-width: 1200px; | |||
margin: 0 auto; | |||
padding: 20px; | |||
} | |||
.top, .bottom { | |||
background: #e0e0e0; | |||
padding: 20px; | |||
min-height: 100px; | |||
} | |||
.middle { | |||
display: flex; | |||
gap: 20px; | |||
} | |||
.middle-item { | |||
flex: 1; | |||
background: #e0e0e0; | |||
padding: 20px; | |||
min-height: 100px; | |||
} | |||
/* レスポンシブ対応 */ | |||
@media (max-width: 768px) { | |||
.middle { | |||
flex-direction: column; | |||
} | |||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
<br> | <br> | ||
==== CSS Grid ==== | ==== CSS Grid ==== | ||
CSS Gridは、2次元のレイアウトを実現できる。<br> | CSS Gridは、2次元のレイアウトを実現できる。<br> | ||