画像をHTMLとCSSで横並びにしたいとき、最もおすすめなのがFlexboxを使った方法です。
この記事では、画像を横並びにするための具体的なコードと、よくある失敗例、レスポンシブ対応のポイントまで詳しく解説します。
CSSの基本が不安な方でも再現できる内容になっています。
Flexboxとは？なぜ画像の横並びに最適なのか
Flexbox（フレックスボックス）とは、CSS3で導入されたレイアウト手法です。
画像やテキストなどの要素を効率的かつ柔軟に横並びや縦並びに整列させることができます。
従来のfloatやinline-blockを使った方法と比べて、Flexboxはレイアウト崩れが少なく、保守性も高いという利点があります。
横並びレイアウトの基本構造（HTML＋CSS）
HTML構造
<div class="container">
<img src="/image/photo01.jpg" width="200" height="auto" alt="森">
<img src="/image/photo02.jpg" width="200" height="auto" alt="湖">
<img src="/image/photo03.jpg" width="200" height="auto" alt="公園">
</div>CSS構造
.container {
display: flex; /* 横並びの基本設定 */
}これだけで、画像が横に並ぶようになります。
Flexboxを利用するには、まず親要素（フレックスコンテナ）に対してdisplay: flex;を指定します。
これにより、子要素（フレックスアイテム）がFlexboxのレイアウトルールに従って配置されます。
画像を横並びにするための主要プロパティ解説
flex-direction：並び方向の指定
.container {
display: flex;
flex-direction: row; /* または column */
}デフォルトでは、flex-directionはrowとなっており、子要素が水平方向に配置されます。
垂直方向に配置したい場合は、columnを指定します。
justify-content：水平方向の配置
.container {
display: flex;
justify-content: space-between; /* 他に center, flex-start, flex-end など */
}フレックスアイテム間の水平方向の配置を制御します。
例えば、space-betweenを指定すると、アイテム間が均等に配置されます。
align-itemsでの垂直方向の配置調整
.container {
display: flex;
align-items: center; /* 他に flex-start, flex-end, stretch など */
}アイテムの垂直方向の配置を制御します。centerを指定すると、アイテムが中央に揃います。
画像間のスペース調整：gapプロパティの活用
.container {
display: flex;
gap: 10px; /* 10pxの間隔を設定 */
}gapプロパティを使用すると、フレックスアイテム間の間隔を簡単に設定できます。
このプロパティを使用することで、アイテム間の余白を均等に保つことができます。
Flexboxを用いたレスポンシブデザインの実現
.container {
display: flex;
flex-wrap: wrap; /* アイテムを折り返す */
}Flexboxは、レスポンシブデザインにも適しています。flex-wrapプロパティを使用して、コンテナ内のスペースに応じてアイテムを折り返すことが可能です。
さらに、メディアクエリを組み合わせることで、画面サイズに応じたレイアウトの調整が可能です。
@media (max-width: 600px) {
.container {
flex-direction: column; /* 画面幅が600px以下の場合、縦並びにする */
}
}実践例：Flexboxで画像を横並びに配置する手順
Flexboxを使用して画像を横並びに配置する具体的な例です。
HTML
<div class="container">
<img src="/image/photo01.jpg" width="200" height="auto" alt="森">
<img src="/image/photo02.jpg" width="200" height="auto" alt="湖">
<img src="/image/photo03.jpg" width="200" height="auto" alt="公園">
</div>CSS
.container {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.container img {
width: 100%;
max-width: 200px; /* 画像の最大幅を設定 */
height: auto;
}この設定により、画像が横並びになり、画面サイズに応じて自動的に折り返されます。
よくあるエラーと解決策
flexboxが効かない場合
上記で紹介したflexboxのプロパティはすべて横並びにしたい.container(親要素)に指定してください。
横並びにしたい親要素と子要素の関係を意識しましょう。
画像のサイズが異なる場合の対応方法
画像のサイズが異なるとレイアウトが崩れることがあります。object-fit: cover;を使用して、画像のトリミングを行い、統一感を持たせることが可能です。
.container img {
width: 100%;
height: 150px; /* 高さを統一 */
object-fit: cover; /* 画像をトリミングしてフィットさせる */
}余白や配置が崩れる場合
ブラウザのデフォルトスタイルやマージンの影響で余白が生じることがあります。
リセットCSSを導入するか、特定の要素に対してマージンやパディングを明示的に設定することで解決できます。
CSSとFlexboxで画像を美しく横並びに配置しよう
CSSで画像を横並びにしたいなら、Flexboxがベストな選択肢です。
display: flexを使うgap,justify-content,align-itemsで調整- レスポンシブ対応には
flex-wrapやメディアクエリ
初心者の方でも再現しやすい方法なので、ぜひあなたのWeb制作に取り入れてみてください。
コメント