HTMLとCSSで画像を横並びに配置する方法

HTML CSS

HTMLとCSSで画像を横並びに配置する方法

画像を横並びに配置するには、HTMLとCSSを使ってレイアウトを設計します。
以下に、画像を横に並べる方法を示す例を紹介します。
この例では、HTMLとCSSを別々のファイルに分けて提供します。
クラス名には test- プレフィックスを使用しています。

HTMLファイル (index.html)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>画像横並びの例</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="test-container">
    <img src="image1.jpg" alt="画像1" class="test-image">
    <img src="image2.jpg" alt="画像2" class="test-image">
    <img src="image3.jpg" alt="画像3" class="test-image">
  </div>
</body>
</html>

CSSファイル (styles.css)

.test-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 10px; /* 画像間のスペースを調整 */
}

.test-image {
  width: 150px; /* 画像の幅を指定 */
  height: auto; /* 高さは自動調整 */
}

コードの説明

1. HTMLファイル (index.html):

  • link タグを使用して外部のCSSファイル styles.css を読み込みます。
  • body 内に test-container クラスを持つ div を作成し、その中に複数の画像 (img タグ) を配置しています。

各画像には test-image クラスを付与しています。

2. CSSファイル (styles.css):

  • .test-container クラスには display: flex を使用し、子要素（画像）を横に並べます。

justify-content: space-around は子要素間のスペースを均等に分配します。
align-items: center は子要素を縦に中央揃えにします。
gap プロパティで画像間のスペースを調整しています。

  • .test-image クラスで、画像の幅を 150px に設定し、高さは自動で調整されるようにしています。

これにより、画像が元の比率を保ちながら指定された幅に合わせて縮小または拡大されます。

この方法を使うことで、HTMLとCSSを別々のファイルに分けて、画像を横に並べるレイアウトを簡単に作成できます。
flex レイアウトは、レスポンシブデザインや多様なレイアウトに非常に便利です。