はじめに
今日はHTMLとCSSをブログの「記事一覧」や「おすすめ記事」に使える、カード風レイアウトを作ってみます。WordPressでも使えるデザインを紹介するので、最後まで読んでいただけたら嬉しいです。
完成イメージ
デスクトップではカードが３つ横並び、PCでは縦１列で並ぶレイアウトになります。
【実践】カード風デザインを実装する
HTMLコード
<body>
<section class="card-section">
<h2>記事一覧</h2>
<div class="card-list">
<div class="card">
<span class="tag">デザイン</span>
<img src="card_image.png" alt="記事画像">
<h3>タイトル1</h3>
<p>記事の紹介文がここに入ります。</p>
<a href="#" class="read-more">続きを読む</a>
</div>
<div class="card">
<span class="tag">CSS</span>
<img src="card_image.png" alt="記事画像">
<h3>タイトル2</h3>
<p>Flexboxを使ったレイアウトの方法を紹介しています。</p>
<a href="#" class="read-more">続きを読む</a>
</div>
<div class="card">
<span class="tag">HTML</span>
<img src="card_image.png" alt="記事画像">
<h3>タイトル3</h3>
<p>タグや続きを読むボタンも付けてみました。</p>
<a href="#" class="read-more">続きを読む</a>
</div>
</div>
</section>
</body>ポイント解説
それぞれ要素に付与したクラスの役割を解説します！
card-list → 複数のカードを並べるためのボックス
card → 個別のカード
tag → カテゴリやタグのスタイル用
CSSコード
body {
font-family: "Helvetica Neue", sans-serif;
margin: 0;
padding: 0;
background: #f0f0f0;
color: #333;
}
.card-section {
max-width: 1000px;
margin: 2rem auto;
padding: 1rem;
}
.card-section h1 {
text-align: center;
margin-bottom: 2rem;
}
/* カードリスト */
.card-list {
display: flex;
flex-wrap: wrap;
gap: 1.2rem;
justify-content: space-between;
}
/* カード */
.card {
position: relative;
background: #fff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
width: 300px;
overflow: hidden;
transition: transform 0.3s;
display: flex;
flex-direction: column;
justify-content: center;
}
.card:hover {
transform: translateY(-5px);
}
/* タグ */
.tag {
position: absolute;
top: 10px;
left: 10px;
background: #00bb1c;
color: white;
padding: 0.3em 0.6em;
font-size: 0.8rem;
border-radius: 4px;
}
/* カード中身 */
.card img {
width: 100%;
height: auto;
display: block;
}
.card h2 {
font-size: 1.2rem;
margin: 1rem;
}
.card p {
margin: 0 1rem;
flex-grow: 1;
}
/* ボタン */
.read-more {
display: block;
margin: 1rem;
padding: 0.5rem;
text-align: center;
background: #ffbf60;
color: white;
text-decoration: none;
border-radius: 6px;
transition: background 0.3s;
}
.read-more:hover {
background: #e8a806;
}
/* レスポンシブ */
@media (max-width: 660px) {
.card-list {
flex-direction: column;
align-items: center;
}
}ポイント解説
レイアウトを横並びにするFlexbox（フレックスボックス）を複数のカードを並べるためのボックス(card-list)に指定することで、中に入るカードを横並びにしています。
.card-list {
display: flex;
flex-wrap: wrap;
gap: 1.2rem;
justify-content: space-between;
}Flexboxとは・・・要素を「並べる」「間隔を空ける」「折り返す」など、柔軟なレイアウトができるCSS機能のこと
主なプロパティ・・・
| プロパティ | 役割 |
|---|---|
display: flex |
Flexboxを使う宣言 |
flex-wrap: wrap |
画面幅に応じて折り返す |
gap |
子要素の間隔（上下左右対応） |
justify-content |
横方向の配置 |
flexboxを使うことでレイアウトの幅が広がりますね。
今回はレスポンシブ対応ということでスマホサイズの時にflex-direction: column;でカードが1つずつ縦に並ぶようにしています。
@media (max-width: 660px) {
.card-list {
flex-direction: column;
align-items: center;
}
}まとめ
今回は、HTMLとCSSだけで作れる「カード風レイアウト」を紹介しました。カード型のデザインはブログやポートフォリオなど多くのサイトで使われているので、覚えておくと役に立ちます。Flexboxを活用することで、横並びや、画面サイズに合わせて折り返したりといったレイアウトが手軽にできますね。
最後までお読みいただきありがとうございました！
