(Sample)
今回は、「写真と文字を横に並べたい！」というときに使えるCSSの古典的な技術、floatについて解説します。
「え？floatって今でも使うの？」と思ったあなた、鋭いですね。
確かに最近はflexboxやgridといった強力なレイアウト技術が主流ですが、floatの仕組みを理解しておくことは今でも非常に価値があります！
floatとは？
元々は「文字の回り込み」のための機能
floatはCSSのプロパティで、要素を左右に寄せて、他の要素を回り込ませるために使います。
たとえば、新聞のレイアウトのように、画像の横に文字を回り込ませたいときに使われます。
今回のコードで何をしている？
あなたのコードでは、次のような構成になっています：
- 画像用のカラム（
.image-column）を左に浮かせる - テキスト用のカラム（
.text-column）も左に浮かせる - 画面サイズが768px以上（＝タブレット以上）のときに横並び、それ以下では縦に積む
つまり、レスポンシブデザインとfloatによるレイアウト制御を合わせた構成です。
レイアウトの仕組みを図で確認！
画面が広いとき（例：PC表示）
+------------------+------------------------------+
| 画像 | テキスト |
| (33.33%) | (66.67%) |
+------------------+------------------------------+
画面が狭いとき（例：スマホ表示）
+-----------------------------------------------+
| 画像 |
+-----------------------------------------------+
| テキスト |
+-----------------------------------------------+
これは、メディアクエリを使って、デバイス幅に応じたレイアウトの切り替えをしているためです。
コードを分解して解説
floatを使った横並び
.image-column {
float: left;
width: 100%; /* デフォルトはスマホ向け */
}
.text-column {
float: left;
width: 100%;
}
ここで両方の要素をfloat: left;にしているのがポイントです。両方を左に寄せることで横並びにします。
ただし、スマホサイズではwidth: 100%にしているので、縦並びになります。
タブレット以上で横並びに切り替え
@media (min-width: 768px) {
.image-column {
width: 33.33%; /* 画面の1/3 */
}
.text-column {
width: 66.67%; /* 残り2/3 */
}
}
この指定があることで、タブレット以上の画面幅になったときに、2つのカラムが横に並ぶようになります。
overflow: hidden;って何？
.container {
overflow: hidden;
}
これは**clearfix（floatによるはみ出しの解消）**として使われています。
実はfloatで浮かせた要素は、親要素から“はみ出して”見えることがあります。
そのため、親要素にoverflow: hiddenやclearfixクラスを追加して、「はみ出さないようにする」工夫が必要なんです。
floatのメリットとデメリット
| 観点 | float | 解説 |
|---|---|---|
| メリット | 単純な回り込みや古いブラウザ対応に有効 | 特に画像とテキストの並びに便利 |
| デメリット | 高度なレイアウトには向かない | 横中央揃えや均等配置は難しい |
| 最新性 | やや古い技術 | FlexboxやGridが推奨される |
floatを使うなら知っておきたい注意点
- 意図しない重なりやレイアウト崩れが起きやすい
clearやclearfixを使わないとレイアウトが崩壊することがある- ボタンなどのインタラクティブ要素の配置には不向き
じゃあ、いまは何を使えばいいの？
現代のWeb開発では、次の2つが主流です：
- Flexbox（
display: flex）：行や列の並びが得意 - CSS Grid（
display: grid）：より複雑なレイアウトに対応
しかし、floatの仕組みはメールテンプレートや古いプロジェクトなどで依然使われています。
だからこそ、知識としてはしっかり押さえておきましょう！
まとめと今後の学び
今日のポイント
floatは画像と文字を横並びにするためのCSSプロパティ- 画面サイズごとに
widthを変えることでレスポンシブ対応 overflow: hiddenなどでfloatの影響をリセットする必要がある- 今後はFlexboxやGridも積極的に使っていこう！
次に学ぶとよいテーマ
display: flexを使ったレイアウトの書き換えalign-itemsやjustify-contentの活用方法- Gridでカラムを自由に配置する方法
- レスポンシブ対応のベストプラクティス（メディアクエリやBootstrap活用）
CSSの歴史を知ることで、新しい技術への理解もより深まります。
少しずつ、でも着実にレベルアップしていきましょう！