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

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

今日のインターネット時代では、ピクチャ ギャラリー表示は Web デザインにおける一般的なレイアウトです。さまざまな写真やグラフィック作品を展示します。ユーザーがさまざまなデバイスで快適なブラウジング体験ができるようにするために、レスポンシブ デザインの重要性がますます高まっています。この記事では、HTML と CSS を使用してレスポンシブな画像ギャラリー表示レイアウトを作成する方法を紹介し、具体的なコード例を示します。

ステップ 1: 基本的な HTML 構造を作成する

まず、基本的な HTML 構造を作成する必要があります。順序なしリスト (

) を使用してすべての画像要素を含め、リスト項目 (
• ) を使用して各画像をラップします。各リスト項目内で、 タグを使用して画像を埋め込みます。

  <div class="gallery">
    <ul>
      <li><img src="image1.jpg" alt="Image 1"></li>
      <li><img src="image2.jpg" alt="Image 2"></li>
      <li><img src="image3.jpg" alt="Image 3"></li>
      <!-- 添加更多图片 -->
    </ul>
  </div>

  ステップ 2: CSS スタイルを適用する

  次に、いくつかの CSS スタイルを画像ギャラリーに追加して、レスポンシブ レイアウトのギャラリーを作成する必要があります。まず、ギャラリーの高さと幅を定義する必要があります。レスポンシブなデザインを実現するには、パーセンテージを使用して幅を定義します。

  .gallery {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .gallery ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .gallery li {
    display: inline-block;
    width: 30%;
    padding: 10px;
    box-sizing: border-box;
  }
  
  .gallery img {
    width: 100%;
    height: auto;
  }

  上記の CSS スタイルでは、ギャラリー コンテナーの幅を 100% に定義しますが、最大幅は 1200px です。各リスト項目 (つまり、画像) の幅は 30% で、パディングは 10 ピクセルです。

  ステップ 3: レスポンシブ デザインを実装する

  レスポンシブ デザインを実装するには、メディア クエリを使用してさまざまな画面サイズに適応できます。小さな画面デバイスでギャラリーのレイアウトをより適切に表示するには、各リスト項目の幅を変更します。

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

  上記の CSS コードは、メディア クエリを使用して、さまざまな画面サイズに適応するために、小さな画面デバイス上のリスト項目の幅をそれぞれ 50% と 100% に変更します。

  上記の手順により、レスポンシブな画像ギャラリーの表示レイアウトを作成することができました。このレイアウトは、さまざまなデバイスのさまざまな画面サイズに適応でき、優れたユーザー エクスペリエンスを提供します。

  概要

  この記事では、HTML と CSS を使用してレスポンシブなイメージ ギャラリーの表示レイアウトを作成する方法を紹介します。 HTML 構造を設定し、CSS スタイルを適用することで、さまざまな画面サイズに適応するレスポンシブ デザインを実現できます。この記事がレスポンシブ デザインを理解し、イメージ ギャラリー レイアウトを作成するのに役立つことを願っています。

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