HTMLとCSSで画像を3枚横並びにする方法｜flexが効かない原因と正しい指定方法

HTMLで画像を3枚横並びに表示したい場合、CSSのflexboxを使う方法が一般的です。しかし、display:flexを指定しているのに画像が思ったように並ばない、サイズ変更が反映されないという問題は初心者の方によく起こります。

画像が横並びにならない原因は、CSSの指定場所や読み込み状態、画像サイズの指定方法など複数あります。この記事では、flexboxで画像を横並びにする基本的な書き方と、CSSが反映されない場合の確認ポイントを解説します。

flexboxで画像を横並びにする基本構造

flexboxは、親要素にdisplay:flexを指定することで、その直下にある子要素を横方向に並べる仕組みです。

今回のHTMLでは、flex-containerが親要素、flex-itemが子要素になっています。そのため、横並びの指定はflex-container側に行います。

このHTML構造の場合、display:flexの指定自体は正しい書き方です。問題は画像サイズやCSSの適用状況にある可能性が高くなります。

提示されているCSSでは、以下のように画像自体へwidth:30%を指定しています。

.flex-item img { width:30%; height:auto; }

しかし、この指定では注意が必要です。widthの30%は「親要素であるflex-itemの幅」に対して計算されます。

flex-item自体には幅の指定がないため、画像のサイズ計算が期待した結果にならない場合があります。

画像を3枚均等に並べたい場合は、flex-item側に幅を指定する方法が分かりやすいです。

.flex-container { display:flex; gap:10px; } .flex-item { width:33.333%; } .flex-item img { width:100%; height:auto; }

このようにすると、3つの箱を横に並べ、その中の画像を箱いっぱいに表示できます。

初心者の場合は、以下のような書き方にすると管理しやすくなります。

.flex-container { display:flex; gap:10px; } .flex-item { flex:1; } .flex-item img { width:100%; height:auto; display:block; }

flex:1を指定すると、3つのflex-itemが同じ幅で自動的に広がります。

また、img要素にdisplay:blockを指定することで、画像下に発生する余白を防ぐことができます。

例えば、3枚の商品画像や料理写真を均等サイズで並べたい場合、この方法がシンプルで使いやすいです。

CSSを書いたのに変化がない場合、コードの内容以外にも原因があります。

まず確認したいポイントは以下です。

例えばstyle.cssを修正したのに表示が変わらない場合、ブラウザのスーパーリロード（WindowsではCtrl＋F5など）を試すと改善することがあります。

画像を横並びにする時は、「画像そのもの」と「画像を入れる箱」を分けて考えると理解しやすくなります。

flex-itemは画像を配置するための枠、imgはその枠の中に表示するコンテンツです。

例えば、カード型のレイアウトを作る場合も、カード全体の幅をflex-itemで決め、画像サイズはimgのwidth:100%で調整するという考え方になります。

元画像のサイズが大きい場合でも、CSSで表示サイズを制御できます。

ただし、画像自体の容量が大きいとページ表示速度が遅くなるため、Webサイトで利用する場合は画像を適切なサイズに圧縮することも重要です。

例えばスマートフォンで撮影した数MBの写真を3枚並べる場合、表示サイズだけ小さくしても読み込みデータ量は変わりません。必要に応じて画像圧縮も行うと快適なページになります。

HTMLで画像を3枚横並びにする場合、親要素にdisplay:flexを指定し、子要素の幅と画像サイズを適切に設定することが重要です。

今回のようにflex自体が動いていても、imgに対するwidth指定が期待通りに計算されないことがあります。その場合はflex-itemに幅やflex:1を指定し、imgにはwidth:100%を指定すると安定します。

CSSが反映されない場合は、コードだけでなくCSSファイルの読み込みや上書き、キャッシュも確認すると原因を見つけやすくなります。