【CSS】画像を横並びに表示する方法

ウェブデザインにおいて、画像を効果的に配置することは重要です。特に、画像を横並びに表示することは、見た目を整え、ユーザーエクスペリエンスを向上させる一つの方法です。この記事では、HTMLとCSSを使用して画像を横並びに表示する3つの異なる方法を紹介します。それぞれの方法は柔軟で使いやすいものであり、コンテンツによって適したものを選択できます。

スポンサーリンク

Flexboxを使用する

Flexboxは、コンテナ内のアイテムを簡単に整列させるための便利なツールです。以下は、Flexboxを使用して画像を横並びに表示するサンプルコードです。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .image-container {
      display: flex; /* Flexboxを使用 */
    }

    .image-container img {
      max-width: 100%; /* 画像がコンテナを超えないようにする */
      height: auto; /* アスペクト比を保つ */
      margin-right: 10px; /* 画像間のスペースを設定 */
    }
  </style>
</head>
<body>

  <div class="image-container">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <!-- 他の画像も追加できます -->
  </div>

</body>
</html>

この方法はシンプルでありながらも柔軟性があり、画像の横並びを実現するのに適しています。

CSS Gridを利用する

CSS Gridは、より複雑なレイアウトを構築するためのツールです。以下は、CSS Gridを使用して画像を横並びに表示するサンプルコードです。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .image-container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* 列の自動調整 */
      grid-gap: 10px; /* 画像間のスペース */
    }

    .image-container img {
      max-width: 100%;
      height: auto;
    }
  </style>
</head>
<body>

  <div class="image-container">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <!-- 他の画像も追加できます -->
  </div>

</body>
</html>

この方法は、自動的に列を調整することができ、複雑なレイアウトを構築する際に威力を発揮します。

Inline-blockを導入する

Inline-blockは、要素を横に配置するための手法です。以下は、Inline-blockを使用して画像を横並びに表示するサンプルコードです。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .image-container {
      font-size: 0; /* フォントサイズを0にすることで、インラインブロック間の余白を削除 */
    }

    .image-container img {
      max-width: 100%;
      height: auto;
      display: inline-block;
      margin-right: 10px; /* 画像間のスペース */
    }
  </style>
</head>
<body>

  <div class="image-container">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <!-- 他の画像も追加できます -->
  </div>

</body>
</html>

よくある質問（FAQ）

Q. CSSで複数の画像を横並びに表示するには？
A. 親要素にdisplay: flex;を設定するのが最もシンプルです。または画像をdisplay: inline-blockにする方法もあります。レスポンシブにするにはflex-wrapとwidthの設定を組み合わせます。
Q. 画像が横並びにならない場合の原因は？
A. imgeは通常inline要素です。親要素にdisplay: flexを設定するか、imgにdisplay: blockまたはinline-blockを設定します。floatを使う方法は古い手法ですが今も動作します。
Q. 横並びの画像を均等幅に揃えるには？
A. imgにflex: 1またはwidth: 100%を設定し、親のFlexboxで制御します。object-fit: coverで比率を維持しながらスペースを埋めることができます。

まとめ

これらの方法は、状況によって適したものを選択できます。どの方法もブラウザのサポートが広く、柔軟性があります。選択する際には、コンテンツとデザインの要件に基づいて最適なものを選んでください。