floatで写真と文字を横に並べるレイアウトの基本と注意点

(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の歴史を知ることで、新しい技術への理解もより深まります。
少しずつ、でも着実にレベルアップしていきましょう！

Webアプリケーション制作のための小ネタ集　目次に戻る

研修のカリキュラムを見てみる

floatとは？