CSS レスポンシブ カード デザイン: さまざまなデバイスに適応するカード スタイルを作成します。

CSS レスポンシブ カード デザイン: さまざまなデバイスに適応するカード スタイルを作成するには、特定のコード サンプルが必要です

現代の Web デザインでは、レスポンシブ デザインが必須となっています 技術的な準備のポイント。デバイスごとに画面サイズと解像度が異なるため、すべてのデバイスで適切に表示するには、Web ページを適応させる必要があります。

カード レイアウトは、Web ページの一般的なレイアウト方法で、情報を表示する際に明確なブロック感を与えることができ、画像やテキスト コンテンツの表示に非常に適しています。この記事では、シンプルでエレガントな CSS レスポンシブ カード デザイン方法を共有し、対応するコード例を提供します。

まず、カードのコンテンツを表示するための基本的な HTML 構造が必要です。コードは次のとおりです:

<div class="card">
  <img src="/static/imghwm/default1.png"  data-src="image.jpg"  class="lazy" alt="Card Image">
  <div class="card-body">
    <h2 id="Card-Title">Card Title</h2>
    <p class="card-text">Card description goes here.</p>
    <a href="#" class="btn">Read More</a>
  </div>
</div>

次に、カードの外観を作成する CSS スタイルを記述する必要があります。コードは次のとおりです。

.card {
  width: 300px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  margin: 10px;
  display: inline-block;
  vertical-align: top;
  position: relative;
}

.card img {
  width: 100%;
  height: auto;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.card .card-body {
  padding: 20px;
}

.card .card-title {
  font-size: 24px;
  margin-bottom: 10px;
}

.card .card-text {
  font-size: 14px;
  color: #777;
}

.card .btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  margin-top: 10px;
}

@media (max-width: 768px) {
  .card {
    width: 100%;
    margin: 10px 0;
  }
}

上記のコードの .card クラスは、背景色、境界線の丸い角、影の効果など、カードの基本スタイルを定義します。 .card img クラスは、カードの幅に適応できるようにカード内の画像スタイルを定義します。 .card .card-body クラスは、パディング、タイトル、説明テキストなどのスタイルを含む、カード内のコンテンツ領域のスタイルを定義します。 .card .btn クラスは、カード内のボタンのスタイルを定義します。

次に、@media クエリで、幅が 768 ピクセル未満のデバイスのスタイルを調整し、カード幅が 100% になるようにし、次のような小さな画面デバイスに適応させます。携帯電話とタブレット。

上記のコードを使用すると、シンプルなレスポンシブ カード スタイルを簡単に作成できます。実際のニーズに応じて、スタイルを調整したり、コンテンツや効果を追加したりできます。

概要:
CSS レスポンシブ カード デザインは、さまざまなデバイスに適応する Web ページ レイアウトを実現する効果的な方法です。 CSS とメディア クエリを使用すると、さまざまなデバイスで適切に表示されるように、Web ページのレイアウトとスタイルを簡単に調整できます。上記の内容が、レスポンシブ カード デザインの理解と適用に役立つことを願っています。

以上がCSS レスポンシブ カード デザイン: さまざまなデバイスに適応するカード スタイルを作成します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。