📢 Webサイト閉鎖と移転のお知らせ
このWebサイトは2026年9月に閉鎖いたします。
新しい記事は移転先で追加しております。（旧サイトでは記事を追加しておりません）
| 124行目: | 124行目: | ||
<br> | <br> | ||
==== float ==== | ==== float ==== | ||
floatは要素を左右に配置するためのCSSプロパティである。<br> | |||
基本的には、<code>float: left</code>や<code>float: right</code>を使用して、要素を左右に寄せて配置する。<br> | |||
特に、2カラムや3カラムのレイアウトを作成する場合によく使用される。<br> | |||
<br> | <br> | ||
<syntaxhighlight lang="css"> | |||
.left-content { | |||
float: left; | |||
width: 50%; | |||
} | |||
.right-content { | |||
float: right; | |||
width: 50%; | |||
} | |||
</syntaxhighlight> | |||
<br> | |||
ただし、floatを使用する場合には注意点がある。<br> | |||
<u>floatを適用した要素は通常のドキュメントフローから外れるため、親要素が高さを認識できない。</u><br> | |||
<u>これを解決するために、clearfixと呼ばれる手法を使用する。</u><br> | |||
<syntaxhighlight lang="css"> | |||
.clearfix::after { | |||
content: ""; | |||
display: block; | |||
clear: both; | |||
} | |||
</syntaxhighlight> | |||
<br> | |||
レスポンシブデザインに対応する場合、<br> | |||
メディアクエリを使用してスマートフォン等の画面幅が狭いデバイスでは、float設定を解除し、縦並びに変更するのが一般的である。<br> | |||
<syntaxhighlight lang="css"> | |||
@media screen and (max-width: 768px) { | |||
.left-content, | |||
.right-content { | |||
float: none; | |||
width: 100%; | |||
} | |||
} | |||
</syntaxhighlight> | |||
<br> | |||
floatは、特定のケース (画像の周りにテキストを回り込ませる等) で現在でも使用されるが、<br> | |||
最近のWeb開発では、FlexboxやGrid Layout等のより柔軟なレイアウト手法が主流となっている。<br> | |||
<br> | |||
しかし、floatレイアウトは、シンプルな実装と高いブラウザ互換性という利点があり、特定の状況では今でも有効である。<br> | |||
<br> | |||
例えば、レガシーブラウザのサポートが必要な場合や画像とテキストを組み合わせたシンプルなレイアウトを作成する場合等に使用される。<br> | |||
<br> | |||
他の使用例としては、ナビゲーションメニューの横並び表示やブログ記事内での画像配置等がある。<br> | |||
ただし、複雑なレイアウトを実現する場合は、より現代的なレイアウト手法の使用を検討することを推奨する。<br> | |||
<br> | |||
==== レスポンシブデザイン ==== | ==== レスポンシブデザイン ==== | ||
レスポンシブデザインを考慮する場合、メディアクエリと組み合わせることにより、柔軟な対応が可能である。<br> | レスポンシブデザインを考慮する場合、メディアクエリと組み合わせることにより、柔軟な対応が可能である。<br> | ||