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

<ul class="gallery">
  <li>
    <img src="image1.jpg" alt="Image 1">
    <h3>图片标题1</h3>
    <p>图片描述1</p>
  </li>
  <li>
    <img src="image2.jpg" alt="Image 2">
    <h3>图片标题2</h3>
    <p>图片描述2</p>
  </li>
  <!-- 更多图片 -->
</ul>

次に、CSS を使用してスタイルとレイアウトを定義します。まず、写真集の表示領域をある程度の幅を持たせて中央に表示したいと考えています。次のスタイルを <ul> 要素に追加できます:

.gallery {
  width: 80%;
  margin: 0 auto;
}

次に、画像のサイズとスタイルを定義する必要があります。さまざまなデバイスで画像を適切なサイズで表示するには、CSS の max-width プロパティを使用します。

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

同時に、いくつかのスタイルを追加することもできます。境界線や影などの画像の魅力を高める効果:

.gallery img {
  max-width: 100%;
  height: auto;
  border: 1px solid #ccc;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

次に、タイトルと説明にスタイルを追加します。それらを画像の下の中央に配置したいと考えています。これを実現するには、CSS の text-align プロパティといくつかのマージン スタイルを使用できます。

.gallery h3,
.gallery p {
  text-align: center;
  margin: 10px 0;
}

さらに、タイトルのフォント スタイルと色、およびいくつかのスタイルを追加できます。可読性を高めるため。

レスポンシブ レイアウトを作成するときは、さまざまなデバイスの画面幅を考慮する必要があります。 CSS の @media クエリを使用して、さまざまな画面サイズのレイアウト スタイルを定義できます。たとえば、画面幅が 600 ピクセル未満の場合、画像コレクションの列数は 1、つまり各行に 1 つの画像のみが表示されると定義できます。

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

これに対応して、次のようになります。画面幅が 600 ピクセル未満の場合、画像コレクションの列数が 1 であることも定義できます。以下では、各行にさらに多くの画像が表示されます。たとえば、画面幅が 600 ピクセルを超える場合、各行を 2 つの画像を表示するように定義できます。

@media (min-width: 601px) {
  .gallery li {
    width: 50%;
  }
}

@media クエリを使用すると、さまざまな画面サイズに応じた画像コレクション さまざまなデバイスで適切に表示できるように、さまざまなスタイルとレイアウトを提供します。

要約すると、HTML と CSS を使用することで、レスポンシブな画像コレクションの表示レイアウトを作成できます。さまざまな要素に適切なスタイルを追加し、レスポンシブなレイアウトを設定することで、さまざまなデバイス間で一貫した優れたユーザー エクスペリエンスを提供できます。この記事で提供されているコード例が、読者がこのテクノロジをよりよく理解し、適用するのに役立つことを願っています。