【カード型レイアウト】グリッドレイアウトを使用して実装する方法

2023年10月4日2024年4月15日

【PR】この記事には広告を含む場合があります。

今回は、記事一覧や実績紹介などでよく使用されるカード型レイアウトの作成方法を紹介していきます。

カード型レイアウトを実装する際に

・レイアウトを組む際の便利なグリッドレイアウトを使用
・文章を抜粋して表示する方法
・マウスホバーした際のカードの上への移動

も合わせて実装していきます。

カード型レイアウトのHTML/CSS設定

まずは、カード型レイアウトの基本の形をグリッドレイアウトを使用して作成していきます。

See the Pen カード型レイアウト_基本型 by moreo (@moreoweb) on CodePen.

コード解説

今回は、上に画像、下側にテキストと投稿日時を記載する形で作成しています。

グリッドレイアウトを使用して、画面幅に対して3等分に表示されるように、「grid-template-columns: 1fr 1fr 1fr;」を指定しています。

.cards {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; //画面幅に対して3等分
  gap: 20px; //カードとカードの余白の大きさ
  margin: 0 auto;
}

今回は、レスポンシブの対応として、768px以下で1列で表示させるように実装しています。

カード型レイアウト　基本HTML

<div class="container">
  <div class="cards">
    <a href="#" class="card">
      <figure class="card__img-wrapper">
        <img src="https://picsum.photos/id/13/367/267" alt="景色1" class="card__img">
      </figure>
      <div class="card__body">
        <p class="card__text">カード型レイアウトカード型レイアウトカード型レイアウトカード型レイアウトカード型レイアウト</p>
        <time class="card__time">2023.10.01</time>
      </div>
    </a>
    <a href="#" class="card">
      <figure class="card__img-wrapper">
        <img src="https://picsum.photos/id/14/367/267" alt="景色2" class="card__img">
      </figure>
      <div class="card__body">
        <p class="card_text">カード型レイアウトカード型レイアウトカード型レイアウトカード型レイアウトカード型レイアウト</p>
        <time class="card__time">2023.10.01</time>
      </div>
    </a>
    <a href="#" class="card">
      <figure class="card__img-wrapper">
        <img src="https://picsum.photos/id/17/367/267" alt="景色3" class="card__img">
      </figure>
      <div class="card__body">
        <p class="card_text">カード型レイアウトカード型レイアウトカード型レイアウトカード型レイアウトカード型レイアウト</p>
        <time class="card__time">2023.10.01</time>
      </div>
    </a>
  </div>
</div>

カード型レイアウト基本CSS

/* 表示用 */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  color: #333;
}
img {
  display: block;
}
a {
  text-decoration: none;
}
.container {
  width: 100%;
  max-width: 940px;
  margin: 40px auto;
  padding-inline: 20px;
}

/* カード型レイアウト */
.cards {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; //画面幅に対して3等分
  gap: 20px; //カードとカードの余白の大きさ
  margin: 0 auto;
}
.card {
  border-radius: 10px;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  transition: transform 0.4s;
}

.card__img-wrapper {
  width: 100%;
  height: auto;
  aspect-ratio: 360/240;
}
.card__img {
  width: 100%;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

.card__body {
  width: 100%;
  background-color: #fff;
  padding: 16px 24px 24px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}
.card__time {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  margin-top: 15px;
  font-weight: bold;
  color: #b5b5b6;
}

文章を抜粋して表示する方法

テキスト部分に下記のコードを指定して抜粋しています。

See the Pen カード型レイアウト_抜粋 by moreo (@moreoweb) on CodePen.

コード解説

今回は、テキストが５行目以降に非表示になるように指定しています。

「-webkit-line-clamp: 4;」
表示するテキストの最大行数を指定します。ここでは4行と指定しているので、5行目以降のテキストは非表示になります。

.card__text {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

カード型レイアウト　テキスト抜粋HTML

<div class="container">
  <div class="cards">
    <a href="#" class="card">
      <figure class="card__img-wrapper">
        <img src="https://picsum.photos/id/13/367/267" alt="景色1" class="card__img">
      </figure>
      <div class="card__body">
        <p class="card__text">カード型レイアウト抜粋カード型レイアウト抜粋カード型レイアウト抜粋カード型レイアウト抜粋カード型レイアウト抜粋カード型レイアウト抜粋カード型レイアウト抜粋カード型レイアウト抜粋</p>
        <time class="card__time">2023.10.01</time>
      </div>
    </a>
    <a href="#" class="card">
      <figure class="card__img-wrapper">
        <img src="https://picsum.photos/id/14/367/267" alt="景色2" class="card__img">
      </figure>
      <div class="card__body">
        <p class="card__text">カード型レイアウト抜粋カード型レイアウト抜粋カード型レイアウト抜粋カード型レイアウト抜粋カード型レイアウト抜粋カード型レイアウト抜粋カード型レイアウト抜粋カード型レイアウト抜粋</p>
        <time class="card__time">2023.10.01</time>
      </div>
    </a>
    <a href="#" class="card">
      <figure class="card__img-wrapper">
        <img src="https://picsum.photos/id/17/367/267" alt="景色3" class="card__img">
      </figure>
      <div class="card__body">
        <p class="card__text">カード型レイアウト抜粋カード型レイアウト抜粋カード型レイアウト抜粋カード型レイアウト抜粋カード型レイアウト抜粋カード型レイアウト抜粋カード型レイアウト抜粋カード型レイアウト抜粋</p>
        <time class="card__time">2023.10.01</time>
      </div>
    </a>
  </div>
</div>

カード型レイアウトテキスト抜粋CSS

/* 表示用 */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  color: #333;
}
img {
  display: block;
}
a {
  text-decoration: none;
}
.container {
  width: 100%;
  max-width: 940px;
  margin: 40px auto;
  padding-inline: 20px;
}

/* カード型レイアウト */

.cards {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  margin: 0 auto;
  @media (max-width: 768px) {
    max-width: 400px;
    grid-template-columns: 1fr; /* 1列に変更 */
    gap: 40px;
  }
}

.card {
  border-radius: 10px;
  box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.2);
  transition: transform 0.4s;
}

.card__img-wrapper {
  width: 100%;
  height: auto;
  aspect-ratio: 360/240;
}
.card__img {
  width: 100%;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

.card__body {
  width: 100%;
  background-color: #fff;
  padding: 24px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

.card__text {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card__time {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  margin-top: 15px;
  font-weight: bold;
  color: #b5b5b6;
}

マウスホバーでカードを上下に移動

カーソルをカードにホバーした際に、上に移動するように実装しています。

See the Pen カード型レイアウト by moreo (@moreoweb) on CodePen.

コード解説

カードにカーソルを乗せた際に、「transform: translateY(-15px);」を指定することで、縦方向に15px移動するようにしています。
この値を変更することで、移動の大きさを変更できるので、お好みの移動高さに調整してみてください。

.card:hover {
  transform: translateY(-15px);
}

カード型レイアウト　ホバー移動HTML

<div class="container">
  <div class="cards">
    <a href="#" class="card">
      <figure class="card__img-wrapper">
        <img src="https://picsum.photos/id/13/367/267" alt="景色1" class="card__img">
      </figure>
      <div class="card__body">
        <p class="card__text">カード型レイアウトマウスホバーカード型レイアウトマウスホバーカード型レイアウトマウスホバーカード型レイアウトマウスホバーカード型レイアウトマウスホバーカード型レイアウトマウスホバー</p>
        <time class="card__time">2023.10.01</time>
      </div>
    </a>
    <a href="#" class="card">
      <figure class="card__img-wrapper">
        <img src="https://picsum.photos/id/14/367/267" alt="景色2" class="card__img">
      </figure>
      <div class="card__body">
        <p class="card__text">カード型レイアウトマウスホバーカード型レイアウトマウスホバーカード型レイアウトマウスホバーカード型レイアウトマウスホバーカード型レイアウトマウスホバーカード型レイアウトマウスホバー</p>
        <time class="card__time">2023.10.01</time>
      </div>
    </a>
    <a href="#" class="card">
      <figure class="card__img-wrapper">
        <img src="https://picsum.photos/id/17/367/267" alt="景色3" class="card__img">
      </figure>
      <div class="card__body">
        <p class="card__text">カード型レイアウトマウスホバーカード型レイアウトマウスホバーカード型レイアウトマウスホバーカード型レイアウトマウスホバーカード型レイアウトマウスホバーカード型レイアウトマウスホバー</p>
        <time class="card__time">2023.10.01</time>
      </div>
    </a>
  </div>
</div>

カード型レイアウトホバー移動CSS

/* 表示用 */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  color: #333;
}
img {
  display: block;
}
a {
  text-decoration: none;
}
.container {
  width: 100%;
  max-width: 940px;
  margin: 40px auto;
  padding-inline: 20px;
}

/* カード型レイアウト */

.cards {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  margin: 0 auto;
  @media (max-width: 768px) {
  max-width:400px;
    grid-template-columns: 1fr; /* 1列に変更 */
  gap: 40px;
}
}
.card {
  border-radius: 10px;
  box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.2);
  transition: transform 0.4s;
}

.card:hover {
  transform: translateY(-15px);
}
.card__img-wrapper {
  width: 100%;
  height: auto;
  aspect-ratio: 360/240;
}
.card__img {
  width: 100%;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

.card__body {
  width: 100%;
  background-color: #fff;
  padding: 24px ;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

.card__text {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card__time {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  margin-top: 15px;
  font-weight: bold;
  color: #b5b5b6;
}

まとめ

今回は、

・レイアウトを組む際の便利なグリッドレイアウトを使用
・文章を抜粋して表示する方法
・マウスホバーした際のカードを上に移動させる方法

を合わせて実装しながら、記事一覧や実績紹介などでよく使用されるカード型レイアウトの作成方法について紹介しました。

今回は3つのカードを横に並べて実装しました。
実際には3つ以上のカードを並べて実装することもありますので、数が増えた時のグリッドを使用したレスポンシブ対応の実装方法なども、今後解説していきます。

この記事が気に入ったら
フォローしてね！

Follow @moreoweb

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！