HTML と CSS を使用してレスポンシブなフォト ギャラリー レイアウトを作成する方法

HTML と CSS を使用してレスポンシブな画像ギャラリー レイアウトを作成する方法

最新の Web デザインでは、レスポンシブなレイアウトが重要です。 Web ページでは、さまざまなサイズやデバイスが使用されるときに、レイアウトや要素のサイズを適応的に変更できる必要があります。この記事では、HTML と CSS を使用してレスポンシブなイメージ ギャラリー レイアウトを作成する方法を学びます。

HTML 構造

まず、HTML 構造を定義する必要があります。画像コレクションのレイアウトに複数の画像が含まれており、各画像にタイトルと説明があるとします。レスポンシブ レイアウトを実装するには、順序なしリスト (<ul></ul>) を使用してすべての画像要素を含めることができます。具体的な HTML 構造は次のとおりです。

<div class="gallery">
  <ul>
    <li>
      <img src="image1.jpg" alt="Image 1">
      <div class="caption">
        <h3>Image 1</h3>
        <p>Description of Image 1</p>
      </div>
    </li>
    <li>
      <img src="image2.jpg" alt="Image 2">
      <div class="caption">
        <h3>Image 2</h3>
        <p>Description of Image 2</p>
      </div>
    </li>
    <!-- 剩下的图片元素 -->
  </ul>
</div>

CSS スタイル

次に、CSS を使用してこの画像コレクション レイアウトのスタイルを設定する必要があります。まず、基本レイアウトのスタイルを設定します。この例では、Flexbox レイアウトを使用して画像の水平方向の配置を実現し、スペースを追加します。具体的な CSS スタイルは次のとおりです。

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.gallery ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gallery li {
  width: 30%; /* 调整这个值来改变每行显示的图片数量 */
  margin-bottom: 20px;
}

.gallery img {
  max-width: 100%;
  height: auto;
}

.gallery .caption {
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 10px;
  text-align: center;
}

この CSS コードでは、display: flex を使用して Flexbox コンテナを作成し、justify-content: space -between を使用します。絵素を均等に分配します。 width: 30% を使用して各画像要素の幅を設定し、画面上に 3 つの画像を表示できるようにします。必要に応じてこの値を調整して、各行に表示される画像の数を変更できます。

最後に、画像とタイトルの基本的なスタイル設定をいくつか行いました。レスポンシブなレイアウトを実現するために、画像は max-width: 100% を使用します。これにより、画像はさまざまなサイズのデバイスで正しく表示されます。

メディア クエリ

上記のスタイルにより、基本的なレスポンシブ画像コレクション レイアウトが作成されました。ただし、画面サイズが変更されると、レイアウトを調整することが必要になる場合があります。現時点では、メディア クエリ (メディア クエリ) を使用して、さまざまな画面サイズにさまざまなスタイルを適用できます。たとえば、小さな画面デバイスの場合は 1 行に 2 つの画像を設定し、画像が幅全体を占めるようにすることができます。具体的な CSS スタイルは次のとおりです。

@media screen and (max-width: 768px) {
  .gallery li {
    width: 45%;
  }
}

@media screen and (max-width: 480px) {
  .gallery li {
    width: 100%;
  }
}

この CSS コードでは、メディア クエリを使用して、最大幅 768 ピクセルと 480 ピクセルの画面に異なるスタイルを設定します。メディア クエリの最初のセットでは、行ごとに表示される画像の数を 3 から 2 に調整しました。メディア クエリの 2 番目のセットでは、画像が幅全体を満たすように、行ごとに表示される画像の数を 1 に調整します。

概要

上記の手順により、レスポンシブな画像コレクション レイアウトを作成することができました。 HTML と CSS を使用して構造とスタイルを定義し、メディア クエリを使用してさまざまな画面サイズにさまざまなスタイルを適用することで、さまざまなデバイスで優れたユーザー エクスペリエンスを提供できます。この例は方法の 1 つにすぎず、実際のニーズに応じて柔軟に調整および変更できます。

以上がHTML と CSS を使用してレスポンシブなフォト ギャラリー レイアウトを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。