こんにちわ、Webクリエイターのにんうさです。
最近、Pinterestのボードで使用されているようなカード型のデザインを実装する機会があったので、今回は自分用の忘備録として作り方を残しておこうと思います。
カード型のデザインってこんなの
カード型のデザインはこんな感じのやつです。
ECサイトとかでも見かけますよね。
画像とテキストを整理して効果的に提示できるので、見やすくて好きなレイアウトです。
htmlとcss
今回はテキスト部分を透過させて背景の画像がうっすらと見える仕上がりになる実装方法です。
<html>
<div class="card-flex">
<div class="card">
<a href="URL" target="_blank">
<img class="card-img" src="img/png" alt="">
<div class="card-content">
<div class="card-info">
<span class="card-cap">カテゴリーなど</span>
<h2 class="card-title">コンテンツのタイトル</h2>
<p class="card-text">コンテンツの説明</p>
</div>
</div>
</a>
</div>
<div class="card">
<a href="URL" target="_blank">
<img class="card-img" src="img/png" alt="">
<div class="card-content">
<div class="card-info">
<span class="card-cap">カテゴリーなど</span>
<h2 class="card-title">コンテンツのタイトル</h2>
<p class="card-text">コンテンツの説明</p>
</div>
</div>
</a>
</div>
<div class="card">
<a href="URL" target="_blank">
<img class="card-img" src="img/png" alt="">
<div class="card-content">
<div class="card-info">
<span class="card-cap">カテゴリーなど</span>
<h2 class="card-title">コンテンツのタイトル</h2>
<p class="card-text">コンテンツの説明</p>
</div>
</div>
</a>
</div>
</div>“card-flex”で続きを書いていくと次の段、次の段へと表示されていきます。次はCSSです。
<css>
.card img{
width: 100%;
}
.card-flex{
display: flex;
width: 90%;
margin: 0 auto;
}
.card {
position: relative;
width: 280px;
height: 330px;
margin: 16px;
background-color: #fff;
overflow: hidden;
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.3) 0 6px 20px 0, inset #333 0 0 0 0px, inset rgba(255, 255, 255, 0.8) 0 0 0 1px;
transition: all 0.2s ease 0s;
}
.card:hover {
transform: scale(1.05, 1.05);
}
.card-img {
border-radius: 5px 5px 0 0;
max-width: 100%;
height: auto;
}
.card-content {
position: absolute;
right: 0;
bottom: 0;
width: 100%;
height: 150px;
padding: 0;
background-color: #222;
opacity: 86%;
z-index: 0;
}
.card-info{
padding: 20px;
z-index: 30;
}
.card-cap {
font-size: 13px;
font-weight: bold;
color: #2fe6f3;
padding: 0;
}
.card-title {
font-size: 1.1em;
font-weight: bold;
margin: 0 0 10px 0;
color: #fff;
}
.card-text {
color: #fff;
font-size: 10px;
line-height: 1.5;
padding: 0;
}余計な記述も入ってるかもですが許してください。笑
画像を入れればテキストの下に透過されて表示されます。
ぼくも勉強中の身なので間違えている部分もあるかもです。
いつかこの記事を見返した時に恥ずかしい感じになると思うけど、とりあえずやってみることが大事だよねと自分に言い聞かせて残しておきます。ネット汚してごめんなさい。