HOME
カード型デザイン
【コピペ可】記事一覧などで使えるシンプルな記事カードのHTML・CSS – レスポンシブ対応

【コピペ可】記事一覧などで使えるシンプルな記事カードのHTML・CSS – レスポンシブ対応

schedule 2025.10.19

HTML
CSS
実際の表示
参考にしたサイト

ブログの関連記事なんかにも使える、超シンプルな記事カードです。3カラム表示で記事が1つまたは2つの場合でも、左寄せで並ぶように設定しています。

HTML

<div class="grid-layout_001">
<div class="grid-layout_card">
<a class="grid-layout_link" href="#">
<div class="grid-layout_card_img">
<img src="https://picsum.photos/id/5/600/400" alt="thumbnail 01" width="600" height="400" />
</div>
<div class="grid-layout_card_desc">
<div class="grid-layout_card_desc__title">ここに記事のタイトルが入ります。</div>
<div class="grid-layout_card_desc__text">ここに本文の抜粋が入ります。テキストテキストテキストテキスト</div>
</div>
</a>
</div>
<div class="grid-layout_card">
<a class="grid-layout_link" href="#">
<div class="grid-layout_card_img">
<img src="https://picsum.photos/id/20/600/400" alt="thumbnail 02" width="600" height="400" />
</div>
<div class="grid-layout_card_desc">
<div class="grid-layout_card_desc__title">ここに記事のタイトルが入ります。テキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
<div class="grid-layout_card_desc__text">ここに本文の抜粋が入ります。テキストテキストテキストテキスト</div>
</div>
</a>
</div>
<div class="grid-layout_card">
<a class="grid-layout_link" href="#">
<div class="grid-layout_card_img">
<img src="https://picsum.photos/id/1060/600/400" alt="thumbnail 03" width="600" height="400" />
</div>
<div class="grid-layout_card_desc">
<div class="grid-layout_card_desc__title">ここに記事のタイトルが入ります。テキストテキストテキスト</div>
<div class="grid-layout_card_desc__text">ここに本文の抜粋が入ります。テキストテキストテキストテキスト</div>
</div>
</a>
</div>
</div>

CSS

.grid-layout_001 {
display: grid;
gap: 2rem 1.4rem;
width: 96%;
margin: 2rem auto;
transition: 0.5s;
}
@media screen and (min-width: 650px) {
.grid-layout_001 {
grid-template-columns: 1fr 1fr;
}
}
@media screen and (min-width: 1200px) {
.grid-layout_001 {
display: grid;
gap: 2rem 1.4rem;
grid-template-columns: 1fr 1fr 1fr;
}
}
.grid-layout_card_img img {
display: block;
width: 100%;
height: auto;
}
.grid-layout_card_desc {
margin: 0.6rem 0 0;
}
.grid-layout_card_desc__title {
font-size: 1rem;
font-weight: bold;
line-height: 1.4em;
margin: 0 0 0.1rem;
display: -webkit-box;
line-clamp: 2;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.grid-layout_card_desc__text {
display: -webkit-box;
line-clamp: 1;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.grid-layout_link:hover {
opacity: 0.7;
transition: 0.5s;
}