カード型のレイアウトをつくる方法 (省略記号「…」つき)
ニュース部分や一覧ページなどで良く見かけるカード型のレイアウト。
つくり方は人それぞれみたいですが、
アレンジしながら自分的につくりやすかった方法をメモしました。
さらに、長い文を省略するときに便利な記号の3点リーダーも追加しました。
複数のカードについては、カード型コンテンツの高さを揃えて、レスポンシブにする方法
の記事に記載しました。
カード型レイアウトのHTML&CSS設定
HTMLはこちら。
<div class="card">
<figure class="card__img">
<img src=“picture URL”>
</figure>
<h2 class="heading card__item">box-title</h2>
<p class="ellipsis card__item">
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<time class="card__time card__item small" datetime="2021-12-01">2021 12.01 </time>
</div>HTMLは、<img>は<figure>で囲い、 あとは順番に見出し、本文、時間となっているのを、divでまとめています。
cssはこちら。
/* ===============================================
Common
=============================================== */
html {
font-size: 62.5%;
line-height: 1.4;
color: #082b50;
}
body {
font-size: 1.6rem;
}
img {
max-width: 100%;
height: auto;
object-fit: cover;
}
.heading {
font-size: 2.4rem;
}
.small {
font-size: 1.3rem;
color: #79767D;
}
/* ===============================================
Card styling
=============================================== */
.card {
margin: 0 auto;
box-shadow: 1px 1px 3px rgba(106, 131, 152, 0.2);
display: flex;
flex-direction: column;
width: 300px;
}
.card__item {
padding: 10px 10px 0 10px;
}
.card__time {
color: #888888;
text-align: right;
padding-bottom: 10px;
}
Sassだとこちら。
/* ===============================================
Common
=============================================== */
html {
font-size: 62.5%;
line-height: 1.4;
color: #082b50;
}
body {
font-size: 1.6rem;
}
img {
max-width: 100%;
height: auto;
object-fit: cover;
}
.heading {
font-size: 2.4rem;
}
.small {
font-size: 1.3rem;
color: #79767D;
}
/* ===============================================
Card styling
=============================================== */
.card {
margin: 0 auto;
box-shadow: 1px 1px 3px rgba(106, 131, 152, 0.2);
display: flex;
flex-direction: column;
width: 300px;
&__item {
padding: 10px 10px 0 10px;
}
&__time {
color: #888888;
text-align: right;
padding-bottom: 10px;
}
}
ポイント
共通で使えるクラス名は、commonの中にまとめて記入。
<img>はobject-fitを加えることで、拡大縮小して、歪まずに枠に対してトリミングされるようにしています。
card内のクラス名も再利用してスッキリ！
見出し、本文、時間の部分は、基本的に同じクラス名card__itemで余白も同じに。
また、時間の下のみ余白をもっと空けるため、padding-bottomを追加指定しています。
複数行でも使える3点リーダーを追加
下記の設定をつけて、htmlの3点リーダーを付けたい箇所に、クラス名を追加すればOK。
複数行の場合でも、使用することが可能です。
.ellipsis {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* 表示したい行の数 */
overflow: hidden;
}
1つのカードについての詳細でしたが、複数をきれいに並べる方法はこちら↓で解説しています
