13,002
回編集
「CSS - レイアウト」の版間の差分
ナビゲーションに移動
検索に移動
→float
(→float) |
(→float) |
||
| 128行目: | 128行目: | ||
特に、2カラムや3カラムのレイアウトを作成する場合によく使用される。<br> | 特に、2カラムや3カラムのレイアウトを作成する場合によく使用される。<br> | ||
<br> | <br> | ||
<syntaxhighlight lang="css"> | <syntaxhighlight lang="css"> | ||
.left-content { | .left-content { | ||
float: left; | float: left; | ||
| 143行目: | 143行目: | ||
<u>floatを適用した要素は通常のドキュメントフローから外れるため、親要素が高さを認識できない。</u><br> | <u>floatを適用した要素は通常のドキュメントフローから外れるため、親要素が高さを認識できない。</u><br> | ||
<u>これを解決するために、clearfixと呼ばれる手法を使用する。</u><br> | <u>これを解決するために、clearfixと呼ばれる手法を使用する。</u><br> | ||
<syntaxhighlight lang="css"> | <syntaxhighlight lang="css"> | ||
.clearfix::after { | .clearfix::after { | ||
content: ""; | content: ""; | ||
| 153行目: | 153行目: | ||
レスポンシブデザインに対応する場合、<br> | レスポンシブデザインに対応する場合、<br> | ||
メディアクエリを使用してスマートフォン等の画面幅が狭いデバイスでは、float設定を解除し、縦並びに変更するのが一般的である。<br> | メディアクエリを使用してスマートフォン等の画面幅が狭いデバイスでは、float設定を解除し、縦並びに変更するのが一般的である。<br> | ||
<syntaxhighlight lang="css"> | <syntaxhighlight lang="css"> | ||
@media screen and (max-width: 768px) { | @media screen and (max-width: 768px) { | ||
.left-content, | .left-content, | ||