HTML と CSS を使用してレスポンシブなカードレイアウトページを作成する方法-htmlチュートリアル-php.cn

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

PHPz

リリース： 2023-10-18 09:16:48

オリジナル

1432 人が閲覧しました

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

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

モバイルデバイスが普及した今日の時代では、レスポンシブデザインは Web の重要な手段の 1 つとなっています。デザイン。カードレイアウトは、直感的かつ明確にコンテンツをカードの形式で表示できる非常に一般的なデザイン方法です。この記事では、HTML と CSS を使用してレスポンシブなカードレイアウトページを作成する方法と、具体的なコード例を紹介します。

まず、基本的な HTML 構造が必要です。次のコードを使用できます。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式卡片布局</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <div class="card">
            <img src="image1.jpg" alt="Image 1">
            <h2>卡片标题 1</h2>
            <p>卡片内容 1</p>
        </div>
        <div class="card">
            <img src="image2.jpg" alt="Image 2">
            <h2>卡片标题 2</h2>
            <p>卡片内容 2</p>
        </div>
        <div class="card">
            <img src="image3.jpg" alt="Image 3">
            <h2>卡片标题 3</h2>
            <p>卡片内容 3</p>
        </div>
    </div>
</body>

</html>

ログイン後にコピー

この HTML 構造では、コンテナ (class="container") を使用してカード (クラス = "カード")。各カードには画像、タイトル、コンテンツが含まれています。

次に、カードレイアウトとレスポンシブデザインを実装するために CSS スタイルを追加する必要があります。次のコードを使用できます。

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.card {
    width: 300px;
    margin: 20px;
    padding: 20px;
    background-color: #f1f1f1;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.card img {
    width: 100%;
    height: auto;
}

@media screen and (max-width: 768px) {
    .card {
        width: 80%;
        margin: 10px auto;
    }
}

ログイン後にコピー

この CSS コードでは、まずコンテナがフレキシブルレイアウト (display: flex) を使用するように設定し、その内部要素がラップ (flex-wrap: Wrap) できるようにします。中央揃えメソッド Justify content (justify-content: center)。

カードスタイルには、固定幅とマージン (幅: 300 ピクセル、マージン: 20 ピクセル)、パディングと背景色 (パディング: 20 ピクセル、背景色: #f1f1f1) が含まれます。影効果（box-shadow）も追加しました。

レスポンシブデザインを実現するために、メディアクエリ (@media screen および (最大幅: 768px)) を使用します。デバイス幅が768px以下の場合、カードの幅が80%となり中央に表示されます（マージン：10px自動）。

最後に、上記の HTML コードをindex.html ファイルとして保存し、CSS コードを style.css ファイルとして保存し、画像ファイル (image1.jpg、image2.jpg、image3.jpg) が保存されていることを確認します。コンテンツの下の HTML ファイルと同じファイル内にあります。

ブラウザでindex.htmlファイルを開くと、レスポンシブなカードレイアウトページが表示されます。

上記のコード例を通じて、HTML と CSS を使用して単純なレスポンシブカードレイアウトページを作成する方法を明確に理解できます。もちろん、これは単なる基本的な例であり、ニーズに応じて拡張および変更して、よりユニークなカードレイアウト効果を作成できます。

この記事があなたのお役に立てば幸いです。また、美しく実用的なレスポンシブカードレイアウトページを作成していただければ幸いです。

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