HTML, CSSでのカードデザインサンプル 4種

CSSでのカードデザインを何種類か作ったので紹介します。

作ったのはこんな感じのデザインです。

<!-- ▼ 共通CSS ▼ -->
<style type="text/css">
    body {
        background-color: #eee;
    }
    img, p {
        margin: 0;
        padding: 0;
    }
    p {
        font-size: 100%;
        line-height: 1;
   }
</style>

サンプル1

タイトル

本文

<!-- ▼ デザイン 1 ▼ -->
<style type="text/css">
    .card1 {
        width: 300px;
        margin: 20px;
        border-radius: 5px;
        background-color: #fff;
        box-shadow: 0 3px 6px #ccc;
    }
    .image1 {
        width: 100%;
        height: 200px;
        object-fit: cover;
        border-radius: 5px 5px 0 0;
    }
    .title1 {
        font-size: 150%;
        margin: 10px;
        color: #444;
    }
    .content1 {
        padding: 10px;
        color: #666;
    }
</style>
<div class="card1">
    <img src="sample.jpg" class="image1">
    <p class="title1">タイトル</p>
    <p class="content1">本文</p>
</div>

サンプル2

タイトル

名前

本文

<!-- ▼ デザイン 2 ▼ -->
<style type="text/css">
    .card2 {
        width: 300px;
        margin: 20px;
        border-radius: 5px;
        background-color: #fff;
        box-shadow: 0 3px 6px #ccc;
    }
    .box2 {
        display: flex;
    }
    .icon2 {
        width: 48px;
        height: 48px;
        margin: 10px;
        border-radius: 24px;
        object-fit: cover;
    }
    .name2 {
        font-size: 60%;
        margin-bottom: 10px;
        color: #888;
    }
    .image2 {
        width: 100%;
        height: 200px;
        object-fit: cover;
    }
    .title2 {
        font-size: 150%;
        margin: 10px 0;
        color: #444;
    }
    .content2 {
        padding: 10px;
        color: #666;
    }
</style>
<div class="card2">
    <div class="box2">
        <img src="icon.jpg" class="icon2">
        <div>
            <p class="title2">タイトル</p>
            <p class="name2">名前</p>
        </div>
    </div>
    <img src="sample.jpg" class="image2">
    <p class="content2">本文</p>
</div>

サンプル3

タイトル

本文

<!-- ▼ デザイン 3 ▼ -->
<style type="text/css">
    .card3 {
        width: 400px;
        margin: 20px;
        border-radius: 5px;
        background-color: #fff;
        box-shadow: 0 3px 6px #ccc;
    }
    .box3 {
        display: flex;
    }
    .image3 {
        width: 100px;
        height: 100px;
        object-fit: cover;
        border-radius: 5px 0 0 5px;
    }
    .title3 {
        font-size: 150%;
        margin: 10px;
        color: #444;
    }
    .content3 {
        padding: 10px;
        color: #666;
    }
</style>
<div class="card3">
    <div class="box3">
        <img src="sample.jpg" class="image3">
        <div>
            <p class="title3">タイトル</p>
            <p class="content3">本文</p>
        </div>
    </div>
</div>

サンプル4

タイトル

本文

続きを読む

<!-- ▼ デザイン 4 ▼ -->
<style type="text/css">
    .card4 {
        width: 300px;
        margin: 20px;
        border-radius: 5px;
        background-color: #fff;
        box-shadow: 0 3px 6px #ccc;
    }
    .image4 {
        width: 100%;
        height: 200px;
        object-fit: cover;
        border-radius: 5px 5px 0 0;
    }
    .title4 {
        font-size: 150%;
        margin: 10px;
        color: #444;
    }
    .content4 {
        padding: 10px;
        color: #666;
    }
    .box4 {
        display: flex;
        justify-content: flex-end;
    }
    .continue4 {
        font-size: 80%;
        margin: 5px;
        padding: 5px;
        border-radius: 5px;
        border: 1px solid #08f;
        color: #08f;
        background-color: transparent;
    }
</style>
<div class="card4">
    <img src="sample.jpg" class="image4">
    <p class="title4">タイトル</p>
    <p class="content4">本文</p>
    <div class="box4">
        <button class="continue4">続きを読む</button>