HTML と CSS を使用してレスポンシブなカード ウォール レイアウトを作成する方法

HTML と CSS を使用してレスポンシブ カード ウォール レイアウトを作成する方法

現代の Web デザインでは、レスポンシブ レイアウトは非常に重要なテクノロジです。 HTML と CSS を使用すると、さまざまな画面サイズのデバイスに適応するレスポンシブなカード ウォール レイアウトを作成できます。

HTMLとCSSを使って簡単なレスポンシブカードウォールレイアウトを作成する方法を詳しく紹介します。

HTML 部分:

まず、HTML ファイルの基本構造を設定する必要があります。順序なしリスト (

) とリスト項目 (
• ) を使用してカードを作成できます。

  <ul class="card-wall">
      <li class="card">
          <img src="/static/imghw/default1.png"  data-src="image1.jpg"  class="lazy" alt="Image 1">
          <h3 id="Card">Card 1</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </li>
      <li class="card">
          <img src="/static/imghw/default1.png"  data-src="image2.jpg"  class="lazy" alt="Image 2">
          <h3 id="Card">Card 2</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </li>
      <li class="card">
          <img src="/static/imghw/default1.png"  data-src="image3.jpg"  class="lazy" alt="Image 3">
          <h3 id="Card">Card 3</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </li>
      ...
  </ul>

  CSS セクション:

  次に、カードとカード ウォールのスタイルを設定する必要があります。ここでは、CSS Flexbox レイアウトを使用してレスポンシブ効果を実現します。

  .card-wall {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
  }
  
  .card {
      width: 300px;
      margin: 10px;
      background-color: #f1f1f1;
      text-align: center;
      padding: 20px;
  }
  
  .card img {
      width: 100%;
  }
  
  @media only screen and (max-width: 768px) {
      .card {
          width: 90%;
      }
  }

  コードの説明:

  • ".card-wall" クラスは Flexbox レイアウトに設定されており、カードが行に配置され、中央に水平に整列されます。
  • 「.card」クラスは、カードの幅、余白、背景色、テキストの中央揃え、およびパディングを設定します。
  • 「.card img」クラスは、カード内の画像の幅を 100% に設定します。
  • 「@media」クエリは、画面幅が 768 ピクセル未満の場合に適用され、小さな画面でのカードのレンダリングが向上します。

  これらのコードを使用すると、レスポンシブなカード ウォール レイアウトを簡単に作成できます。使用するデバイスに関係なく、カードのサイズは自動的に変更され、さまざまな画面サイズに合わせて配置されます。

  もちろん、これは単なる単純な例です。カードを追加したり、CSS スタイルを使用したりすることで、デザインを強化できます。

  概要:

  この記事では、HTML と CSS を使用して、シンプルなレスポンシブ カード ウォール レイアウトを作成しました。 Flexbox レイアウトとメディア クエリを使用すると、さまざまな画面サイズのデバイスに合わせてレイアウトを簡単に調整できます。

  これは、HTML と CSS を使用してレスポンシブ レイアウトを作成するための基本にすぎません。さらに深く学習して実践し、より複雑でユニークなデザイン効果を実現することができます。

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