カード型のレイアウトをつくる方法 (省略記号「…」つき)

Advertisements

ニュース部分や一覧ページなどで良く見かけるカード型のレイアウト。
つくり方は人それぞれみたいですが、
アレンジしながら自分的につくりやすかった方法をメモしました。
さらに、長い文を省略するときに便利な記号の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;
    }

}

Advertisements

ポイント

共通で使えるクラス名は、commonの中にまとめて記入。

<img>はobject-fitを加えることで、拡大縮小して、歪まずに枠に対してトリミングされるようにしています。

Advertisements

card内のクラス名も再利用してスッキリ!

見出し、本文、時間の部分は、基本的に同じクラス名card__itemで余白も同じに。
また、時間の下のみ余白をもっと空けるため、padding-bottomを追加指定しています。

複数行でも使える3点リーダーを追加

下記の設定をつけて、htmlの3点リーダーを付けたい箇所に、クラス名を追加すればOK。
複数行の場合でも、使用することが可能です。

 
.ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;   /* 表示したい行の数 */
  overflow: hidden;
}

1つのカードについての詳細でしたが、複数をきれいに並べる方法はこちら↓で解説しています

Advertisements