HTMLとCSSで写真を横並びに配置する方法

HTML CSS

HTMLとCSSで写真を横並びに配置する方法

横並びに写真を配置するためのHTMLとCSSの例を示します。
この方法では、HTMLファイルとCSSファイルを分けて記述し、CSSのスタイルを用いて写真を横並びに配置します。

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-gallery">
    <div class="test-photo">
      <img src="photo1.jpg" alt="写真1">
    </div>
    <div class="test-photo">
      <img src="photo2.jpg" alt="写真2">
    </div>
    <div class="test-photo">
      <img src="photo3.jpg" alt="写真3">
    </div>
  </div>
</body>
</html>

CSSファイル（styles.css）

/* 全体のレイアウト設定 */
.test-gallery {
  display: flex;
  gap: 10px; /* 写真間のスペース */
  padding: 10px; /* ギャラリー全体のパディング */
  background-color: #f0f0f0; /* 背景色 */
}

/* 各写真のスタイル */
.test-photo {
  flex: 1; /* 写真が均等に並ぶようにする */
  max-width: 100%; /* 写真が親要素を超えないようにする */
  box-sizing: border-box; /* パディングやボーダーをサイズに含める */
}

/* 写真のスタイル */
.test-photo img {
  width: 100%; /* 親要素の幅に合わせて写真をリサイズ */
  height: auto; /* 高さを自動で調整 */
  display: block; /* 不要な空白を削除 */
}

解説

1. HTMLファイル:

  • test-galleryクラスを持つdiv要素は、写真の横並びの親要素です。
  • 各写真を含むdivにはtest-photoクラスが指定されています。
  • 各test-photo内にimgタグを配置し、src属性で写真のパスを指定します。

2. CSSファイル:

  • .test-galleryクラスにdisplay: flexを設定し、子要素を横並びにします。
  • gapプロパティで各写真間のスペースを指定しています。
  • .test-photoクラスにflex: 1を設定することで、写真が均等に並ぶようにしています。
  • max-width: 100%とwidth: 100%を使って、写真が親要素の幅に合わせてリサイズされるようにしています。

このように、HTMLとCSSを適切に設定することで、簡単に写真を横並びに配置することができます。
写真の数やサイズに応じて、gapやpaddingの値を調整することで、レイアウトをカスタマイズできます。