How TO - カード

❮ 前章へ次章へ ❯

CSS を使用してカードの作成方法を学習します。

John Doe

Architect & Engineer

Jane Doe

Interior Designer

カードの作成方法

ステップ 1) HTML の追加：

例

<div class="card">
<img src="img_avatar.png" alt="Avatar" style="width:100%">
<div class="container">
<h4><b>John Doe</b></h4>
<p>Architect & Engineer</p>
</div>
</div>

ステップ 2) CSS の追加：

例

.card {
    /* Add shadows to create the "card" effect */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
}

/* On mouse-over, add a deeper shadow */
.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

/* Add some padding inside the card container */
.container {
    padding: 2px 16px;
}

Try it Yourself »

角丸付き：

例

.card {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    border-radius: 5px; /* 5px rounded corners */
}

/* Add rounded corners to the top left and the top right corner of the image */
img {
    border-radius: 5px 5px 0 0;
}

Try it Yourself »

チップ:影の詳細については、CSS Shadow Effects チュートリアルをご覧ください。

❮ 前章へ次章へ ❯