ホームページ >ウェブフロントエンド >CSSチュートリアル >HTML および CSS Flexbox を使用したレスポンシブなカード レイアウトの構築
HTML および CSS Flexbox を使用したレスポンシブなカード レイアウトの構築
- Susan Sarandonオリジナル
- 2024-12-31 06:29:13436ブラウズ
これまでの記事では、構造化 HTML の重要性と、CSS Flexbox が Web レイアウトを簡素化する方法について説明しました。この記事は、これらの概念を組み合わせて実用的なもの、レスポンシブ カード レイアウトを作成することによって構築されています。これは、Web 開発スキルをレベルアップしながら、これまでに学んだすべてを確実にする方法であると考えてください。
Web レイアウトを構築する場合、製品リスト、ブログ投稿など、カード コンポーネントがあらゆる場所に存在します。適切にデザインされたカードは、機能的かつ視覚的に魅力的であり、レスポンシブなデザインにより、どのデバイスでも見栄えが良くなります。この記事では、セマンティック HTML と CSS Flexbox を使用して、レスポンシブなカード レイアウトを構築する方法を段階的に説明します。
私たちが構築するもの
次のようなレスポンシブ カード レイアウトを作成します。
1. 大きな画面に複数のカードを並べて表示します。
2. 小さい画面にカードを垂直に重ねます。
3. アクセシビリティと保守性のためにセマンティック HTML を使用します。
4. 配置と間隔のフレックスボックスを示します。
ステップ 1: HTML を作成する
カードの構造を作成することから始めましょう。コンテンツが有意義でアクセスしやすいものとなるよう、セマンティック HTML を利用します。
<body> <section> <h3> <em>Key Points</em>: </h3>
- Use section for the container, as it groups related content.
- Each card is an article, signifying that it's a self-contained piece of content.
- The img, header, and footer are semantically grouped to enhance readability and accessibility.
STEP 2: Add Basic Styles
Let's define some basic styles;
/* General Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f4f4f4;
text-align: center;
}
.card-container {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
padding: 1rem;
}
.card {
display: flex;
flex-direction: column;
gap: 1rem;
width: 300px;
border: 1px solid #ddd;
border-radius: 8px;
padding: 1rem;
background-color: #fff;
}
.card-image {
width: 100%;
border-radius: 8px;
}
.card-header h2 {
font-size: 1.5rem;
color: black;
font-weight: bold;
}
.card-footer {
display: flex;
justify-content: space-between;
}
button {
background-color: palevioletred;
color: black;
font-weight: bold;
padding: 0.5rem 1rem;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: plum;
}
キーポイント:
- .card-container は flex-wrap:wrap を使用して、画面サイズが縮小したときにカードをスタックできるようにします。
- 各 .card は、柔軟な列レイアウトと要素間の適切な間隔でスタイル設定されます。
ステップ 3: レスポンシブにしましょう
次に、カード レイアウトがすべての画面サイズで適切に表示されることを確認します。
@media (max-width: 768px) {
.card-container {
flex-direction: column;
align-items: center;
}
}
キーポイント:
- 768 ピクセルより小さい画面の場合、.card-container は行レイアウトから列レイアウトに切り替わります。
- これにより、カードが垂直方向に積み重ねられ、モバイル デバイスで読みやすくなります。
最終的な外観
- 大きな画面の場合: カードは間隔をあけて横に並べられます。?
- 小さい画面の場合: カードはきれいにレイアウトされるように互いの上に積み重ねられます。 ?
まとめ
最後に、私たちが学んだことを以下に示します。
セマンティック HTML: クリーンでアクセスしやすく、保守しやすいコードを作成します。
フレックスボックスの基礎: フレックスボックスを使用して、要素を簡単に位置合わせしたり間隔をあけたりできます。
レスポンシブ デザイン: メディア クエリを適用して、レイアウトをさまざまなデバイスに適応させます。
次は何ですか?
この例を自分のものにしてみてください。練習すればするほど上達するので、さまざまなカードのデザインを試してみましょう。
次回まで、あなたのフレンドリーな近所のライター、MJ。 ?さようなら!!!
以上がHTML および CSS Flexbox を使用したレスポンシブなカード レイアウトの構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。