HTMLとCSSのコピペで実装できるカード型デザイン6種

カードデザインのイラスト

Googleが推奨するマテリアルデザインは、デザインを最適化しやすいように装飾を減らし、シンプルなデザインでユーザーが直感的に使いやすいように設計された手法の一つで、カードデザインは専用のガイドラインページが用意されているほどGoogleによって細かく定義されています。

このカードのデザインは、その名の通り四角形を並べたスタイルのデザインがよく使わており、多くの場合、ひとつのカードのブロックに対して画像やテキスト、ボタン等、様々な要素が含まれています。

今回は、 HTMLとCSSのコピペで実装できるカード型デザイン6種をご紹介します。

全てのカードのサンプルは、カラムで設置してあるので設置場所によってCSS貼り付けの際は、width等々カスタマイズしてお使い下さい。

リンクボタン付きの四角いカード

標準的な四角いカードのデザインで、ミニマルなデザインでも、装飾の多いデザインでも、どんなデザイン・コンテンツにもマッチしやすいデザインです。

四辺の丸みがないので、カチッとしたサイトに合わせやすいデザインです。

サムネイルのタイトル

サムネイル

これはカード型のデザインです。これはカード型のデザインです。これはカード型のデザインです。これはカード型のデザインです。

サムネイルのタイトル

サムネイル

これはカード型のデザインです。これはカード型のデザインです。これはカード型のデザインです。これはカード型のデザインです。

コピペ用コード

HTML
<div class="l-wrapper_01">
  <article class="card_01">
    <div class="card__header_01">
      <p class="card__title_01">サムネイルのタイトル</p>
      <figure class="card__thumbnail_01">
        <img src="https://dubdesign.net/wp-content/uploads/2020/05/0514_inhouse_designereyecatch.jpg" alt="サムネイル" class="card__image_01">
    </figure>
    </div>
    <div class="card__body_01">
      <p class="card__text2_01">これはカード型のデザインです。これはカード型のデザインです。これはカード型のデザインです。これはカード型のデザインです。</p>
    </div>
    <div class="card__footer_01">
      <p class="card__text_01"><a href="#" class="button_01 -compact">この記事を詳しく見る</a></p>
    </div>
    
  </article>
</div>
CSS
/*--------------------------------------
  カード型_01
--------------------------------------*/
.l-wrapper_01 {
  margin: 1rem auto;
  width: 95%;
}

.l-wrapper_01:hover {
  transform: translateY(-3px);
  box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);
  transition: all .5s;
}

.card_01 {
  background-color: #fff;
  box-shadow: 0 0 8px rgba(0, 0, 0, .16);
  color: #212121;
  text-decoration: none;
}

.card__header_01 {
  display: flex;
  flex-wrap: wrap;
}

.card__title_01 {
  padding: 1rem 1.5rem 0;
  font-size: 1.6rem;
  order: 1;
  margin-bottom: 0.6rem;
  font-weight: bold;
  text-decoration: none;
}

.card__thumbnail_01 {
  margin: 0;
  order: 0;
}

.card__image_01 {
  width: 100%;
}

.card__body_01 {
  padding: 0 1.5rem;
}

.card__text_01 {
  font-size: .8rem;
  text-align:center;
  text-decoration: none;
	padding-bottom: 0;
}

.card__text2_01 {
  font-size: .8rem;
  margin-top: 0;
  margin-bottom: 2rem;
}

.card__text_01 + .card__text_01 {
  margin-top: .5rem;
}

.card__footer_01 {
  padding: 1rem;
  border-top: 1px solid #ddd;
}

.button_01 {
  display: inline-block;
  text-decoration: none;
  transition: background-color .3s ease-in-out;
  text-align: center;
}

.button_01 a {
  text-decoration: none;
}

.button_01.-compact {
  padding: .5rem 1rem;
  border-radius: .25rem;
  background-color: #4f96f6;
  color: #fff;
  font-weight: bold;
	text-decoration: none;
}

.button_01.-compact:hover,
.button_01.-compact:focus {
  background-color: #6bb6ff;
}

テキスト多めの角丸カード

四辺を角丸にして、タイトルに下線を入れたカードデザインです。

リンク要素を持たせていないので、ホバー時のアクションは入れていないカードの為、写真に紐づいた文字で何か記載したい場合に合うようなデザインです。

使い用によっては、1カラムでの設置の方がいいかもしれません。

サムネイルのタイトル

サムネイル

これはカード型のデザインです。これはカード型のデザインです。これはカード型のデザインです。これはカード型のデザインです。これはカード型のデザインです。これはカード型のデザインです。これはカード型のデザインです。これはカード型のデザインです。これはカード型のデザインです。

サムネイルのタイトル

サムネイル

これはカード型のデザインです。これはカード型のデザインです。これはカード型のデザインです。これはカード型のデザインです。これはカード型のデザインです。これはカード型のデザインです。これはカード型のデザインです。これはカード型のデザインです。これはカード型のデザインです。

コピペ用コード

HTML
<div class="l-wrapper_02 card-radius_02">
  <article class="card_02">
    <div class="card__header_02">
      <p class="card__title_02">サムネイルのタイトル</p>
      <figure class="card__thumbnail_02">
        <img src="https://dubdesign.net/wp-content/uploads/2020/05/0514_inhouse_designereyecatch.jpg" alt="サムネイル" class="card__image_02">
    </figure>
    </div>
    <div class="card__body_02">
      <p class="card__text2_02">これはカード型のデザインです。これはカード型のデザインです。これはカード型のデザインです。これはカード型のデザインです。これはカード型のデザインです。これはカード型のデザインです。これはカード型のデザインです。これはカード型のデザインです。これはカード型のデザインです。</p>
    </div>    
  </article>
</div>
CSS
/*--------------------------------------
  カード型_02
--------------------------------------*/
.l-wrapper_02 {
  margin: 1rem auto;
  width: 380px;
}
.card-radius_02{
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,.2);
}

.card_02 {
  background-color: #fff;
  box-shadow: 0 0 0px rgba(0, 0, 0, .16);
  color: #212121;
  text-decoration: none;
}

.card__header_02 {
  display: flex;
  flex-wrap: wrap;
}

.card__title_02 {
  padding: 1rem 1.5rem 0;
  font-size: 1.6rem;
  order: 1;
  font-weight: bold;
  text-decoration: none;
  /*線の種類(実線) 太さ 色*/
  border-bottom: solid 3px black;

}

.card__thumbnail_02 {
  margin: 0;
  order: 0;
}

.card__image_02 {
  width: 100%;
}

.card__body_02 {
  padding: 0 1.5rem;
}

.card__text_02 {
  font-size: .8rem;
  text-align:center;
  text-decoration: none;
}

.card__text2_02 {
  font-size: .8rem;
  margin-top: 0;
  margin-bottom: 1.5rem;
}

ホバーすると浮き出てくるカード

海外のLPとかに出てきそうな浮き出る動きがあるカード型のデザインです。

背景が白前提で浮き出る仕様で作っているので、白い地色のサイトには合いますがダーク系のページには使いづらいかもしれません。

  • タイトル1

    この部分はダミーテキスト。この部分はダミーテキスト。この部分はダミーテキスト。この部分はダミーテキスト。この部分はダミーテキスト。この部分はダミーテキスト。この部分はダミーテキスト。この部分はダミーテキスト。

  • タイトル1

    この部分はダミーテキスト。この部分はダミーテキスト。この部分はダミーテキスト。この部分はダミーテキスト。この部分はダミーテキスト。この部分はダミーテキスト。この部分はダミーテキスト。この部分はダミーテキスト。

コピペ用コード

HTML
<div id="sec">
  <ul>
    <li>
      <span class="fa fa-code"></span>

      <p class="title01">タイトル1</p>
      <p>この部分はダミーテキスト。この部分はダミーテキスト。この部分はダミーテキスト。この部分はダミーテキスト。この部分はダミーテキスト。この部分はダミーテキスト。この部分はダミーテキスト。この部分はダミーテキスト。</p>
    </li>
    <li>
      <span class="fa fa-code"></span>

      <p class="title01">タイトル1</p>
      <p>この部分はダミーテキスト。この部分はダミーテキスト。この部分はダミーテキスト。この部分はダミーテキスト。この部分はダミーテキスト。この部分はダミーテキスト。この部分はダミーテキスト。この部分はダミーテキスト。</p>
    </li>
  </ul>
</div>
CSS
/*--------------------------------------
  カード型_03
--------------------------------------*/
#sec {
  padding: 0;
  background: #fff;
  text-align: center;
  word-wrap: break-word;
}

#sec ul {
  margin: 0;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  list-style: none;
  border: none;
}
#sec ul li {
  padding: 40px;
  width: 320px;
  transition: box-shadow 0.3s;
}
#sec ul li:hover {
  box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
#sec ul li:hover span {
  color: #63B7E6;
}
#sec ul li:hover p {
  color: #555;
}
#sec ul li:hover .title01 {
  color: #63B7E6;
}
#sec ul li:hover .title01:after {
  width: 25px;
}
#sec ul li span {
  font-size: 2.6em;
  display: block;
  transition: color 0.3s;
  color: #A2A2A2;
}
#sec ul li span:before, #sec ul li span:after {
  position: static;
}
#sec ul li .title01 {
  color: #6f6f6f;
  display: inline-block;
  font-size: 24px;
  font-weight: 100;
  transition: color 0.3s;
}
#sec ul li .title01:after {
  content: "";
  position: relative;
  left: 50%;
  top: 20px;
  transform: translateX(-50%);
  display: block;
  width: 40px;
  height: 1px;
  background: #6f6f6f;
  transition: width 0.3s;
}
#sec ul li p {
  color: #A2A2A2;
  text-align: left;
  text-indent: 1em;
  font-size: 16px;
  line-height: 26px;
  transition: color 0.3s;
}

プロフィール紹介に向いてるカード

ホバーすると反転して裏面が出るカードデザインです。

プロフィール紹介や、力のある写真との組み合わせで使いやすいかもしれません。

Avatar

かかかず

UXリサーチャー

短めの文章をいれる。

Avatar

かかかず

UXリサーチャー

短めの文章をいれる。

コピペ用コード

HTML
<div class="flip-card4">
  <div class="flip-card-inner4">
    <div class="flip-card-front4">
      <img src="https://dubdesign.net/wp-content/uploads/2020/04/export-1.jpg" alt="Avatar" style="width:300px;height:300px;">
    </div>
    <div class="flip-card-back4">
      <p class="flip-card_name">かかかず</p>
      <p>UXリサーチャー</p>
      <div class="cardbox1">
      <p>短めの文章をいれる。</p>
      </div>
    </div>
  </div>
</div>
CSS
/*--------------------------------------
  カード型_04
--------------------------------------*/
.flip-card_04 {
  background-color: transparent;
  width: 300px;
  height: 300px;
  border: 0px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

.flip-card_name {
  font-weight:bold;
  font-size:2.0rem;
}

.flip-card-inner_04 {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-card_04:hover .flip-card-inner_04 {
  transform: rotateY(180deg);
}

.flip-card-front_04, .flip-card-back_04 {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

.flip-card-front_04 {
  background-color: #bbb;
  color: black;
}

.flip-card-back_04 {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}

/* 反転した時の囲み枠 */
.cardbox1 {
    padding: 2.0em 1em;
    margin: 1em 2em;
    font-weight: bold;
    border: solid 3px #FFFFFF;
}
.cardbox1 p {
    margin: 0; 
    padding: 0;
}

ブログのサムネに向いていそうなカード2種類

HTMLの量が多めですが、その分動きもあるカードデザインです。

動的なコードと掛け合わせたサムネイルに使えそうと思って作っていましたが、コードが多かったので途中で諦めてしまいました。

その1. 下半分が白地
12 Aug 2020
DUB DESiGN

広い宇宙に出てみたら、地球ってでかいと感じた

ここには文章。ここには文章。ここには文章。ここには文章。ここには文章。ここには文章。ここには文章。ここには文章。ここには文章。

その2. 写真に白文字のせ
DUB DESiGN

やっぱり地球って大きいですよね。

ここに文章が入ります。ここに文章が入ります。

詳しく読む

コピペ用コード

その1. 下半分が白地のHTML
  <div class="example-1 card">
    <div class="wrapper" style="background: url(https://dubdesign.net/wp-content/uploads/2020/05/samplepic.jpg) 20% 1%/cover no-repeat;">
      <div class="date">
        <span class="day">12</span>
        <span class="month">Aug</span>
        <span class="year">2020</span>
      </div>
      <div class="data">
        <div class="content">
          <span class="author">DUB DESiGN</span>
          <p class="card_maintitle"><a href="#" class="card_href_05">広い宇宙に出てみたら、地球ってでかいと感じた</a></p>
          <p class="text">ここには文章。ここには文章。ここには文章。ここには文章。ここには文章。ここには文章。ここには文章。ここには文章。ここには文章。</p>
          <label for="show-menu" class="menu-button"><span></span></label>
        </div>
        <input type="checkbox" id="show-menu" />
        <ul class="menu-content">
          <li>
            <a href="#" class="fa fa-bookmark-o"></a>
          </li>
          <li><a href="#" class="fa fa-heart-o"><span>47</span></a></li>
          <li><a href="#" class="fa fa-comment-o"><span>8</span></a></li>
        </ul>
      </div>
    </div>
  </div>
その2. 写真に白文字のせ
  <div class="example-2 card">
    <div class="wrapper" style="background: url(https://dubdesign.net/wp-content/uploads/2020/05/samplepic.jpg) center/cover no-repeat;">
      <div class="data">
        <div class="content">
          <span class="author">DUB DESiGN</span>
          <p class="card_maintitle"><a href="#" class="card_href_05">やっぱり地球って大きいですよね。</a></p>
          <p class="text">ここに文章が入ります。ここに文章が入ります。</p>
          <a href="#" class="button">詳しく読む</a>
        </div>
      </div>
    </div>
  </div>
共通のCSS
.row_card_05 {
  max-width: 900px;
  margin: 50px auto 0;
}

.card {
  float: left;
  padding: 0 1.7rem;
  width: 100%;
}
.card .menu-content {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.card .menu-content::before, .card .menu-content::after {
  content: "";
  display: table;
}
.card .menu-content::after {
  clear: both;
}
.card .menu-content li {
  display: inline-block;
}
.card .menu-content a {
  color: #fff;
}
.card .menu-content span {
  position: absolute;
  left: 50%;
  top: 0;
  font-size: 10px;
  font-weight: 700;
  font-family: 'Noto Sans JP';
  transform: translate(-50%, 0);
}
.card .wrapper {
  background-color: #fff;
  min-height: 450px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.2);
}
.card .wrapper:hover .data {
  transform: translateY(0);
}
.card .data {
  position: absolute;
  bottom: 0;
  width: 100%;
  transform: translateY(calc(70px + 1em));
  transition: transform 0.3s;
}
.card .data .content {
  padding: 1em;
  position: relative;
  z-index: 1;
}
.card .author {
  font-size: 12px;
}
.card .title {
  margin-top: 10px;
}
.card .text {
  height: 70px;
  margin: 0;
}
.card input[type=checkbox] {
  display: none;
}
.card input[type=checkbox]:checked + .menu-content {
  transform: translateY(-60px);
}

.example-1 .date {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #4f96f6;
  color: #fff;
  padding: 0.8em;
}
.example-1 .date span {
  display: block;
  text-align: center;
}
.example-1 .date .day {
  font-weight: 700;
  font-size: 24px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.18);
}
.example-1 .date .month {
  text-transform: uppercase;
}
.example-1 .date .month,
.example-1 .date .year {
  font-size: 12px;
}
.example-1 .content {
  background-color: #fff;
  box-shadow: 0 5px 30px 10px rgba(0, 0, 0, 0.3);
}
.example-1 .title a {
  color: gray;
}
.example-1 .menu-button {
  position: absolute;
  z-index: 999;
  top: 16px;
  right: 16px;
  width: 25px;
  text-align: center;
  cursor: pointer;
}
.example-1 .menu-button span {
  width: 5px;
  height: 5px;
  background-color: gray;
  color: gray;
  position: relative;
  display: inline-block;
  border-radius: 50%;
}
.example-1 .menu-button span::after, .example-1 .menu-button span::before {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  background-color: currentColor;
  position: absolute;
  border-radius: 50%;
}
.example-1 .menu-button span::before {
  left: -10px;
}
.example-1 .menu-button span::after {
  right: -10px;
}
.example-1 .menu-content {
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
  transition: transform 0.3s;
  transform: translateY(0);
}
.example-1 .menu-content li {
  width: 33.333333%;
  float: left;
  background-color: #4f96f6;
  height: 60px;
  position: relative;
}
.example-1 .menu-content a {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
}
.example-1 .menu-content span {
  top: -10px;
}


.example-2 .wrapper:hover .menu-content span {
  transform: translate(-50%, -10px);
  opacity: 1;
}
.example-2 .header {
  color: #fff;
  padding: 1em;
}
.example-2 .header::before, .example-2 .header::after {
  content: "";
  display: table;
}
.example-2 .header::after {
  clear: both;
}
.example-2 .header .date {
  float: left;
  font-size: 12px;
}
.example-2 .menu-content {
  float: right;
}
.example-2 .menu-content li {
  margin: 0 5px;
  position: relative;
}
.example-2 .menu-content span {
  transition: all 0.3s;
  opacity: 0;
}
.example-2 .data {
  color: #fff;
  transform: translateY(calc(70px + 4em));
}
.example-2 .title a {
  color: #fff;
}
.example-2 .button {
  display: block;
  width: 100px;
  margin: 2em auto 1em;
  text-align: center;
  font-size: 12px;
  color: #fff;
  line-height: 1;
  position: relative;
  font-weight: 700;
}
.example-2 .button::after {
  content: "→";
  opacity: 0;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(0, -50%);
  transition: all 0.3s;
}
.example-2 .button:hover::after {
  transform: translate(5px, -50%);
  opacity: 1;
}

.card_href_05 {
  text-decoration:none;
  color: #4f96f6;

}

.card_maintitle {
  font-size: 1.4rem;
  font-weight: bold;
  text-decoration:none;
}

.card_href_05_2 {
  text-decoration:none;
  color: #FFFFFF;
}

.card_maintitle {
  font-size: 1.4rem;
  font-weight: bold;
}

リンク付きの角丸のカード

カード型のデザインは、シンプルなものが推奨されており、このような角丸で、余白が適度にあるカードデザインが一番使いやすかったりします。

HTMLもシンプルなので、いじりやすく見やすいカード型のデザインです。

DUB DESiGN

WebデザインやWebサイト制作、最新のWeb業界情報などを紹介していくサイト。
しっかりきっかり更新中。

DUB DESiGN

WebデザインやWebサイト制作、最新のWeb業界情報などを紹介していくサイト。
しっかりきっかり更新中。

コピペ用コード

HTML
<div class="l-wrapper_06">
<div class="card_06">
  <img class="card-img_06" src="https://dubdesign.net/wp-content/uploads/2020/05/0508_dtplayouteyecatch.jpg" alt="">
  <div class="card-content_06">
    <p class="card-title_06">DUB DESiGN</p>
    <p class="card-text_06">WebデザインやWebサイト制作、最新のWeb業界情報などを紹介していくサイト。<br>しっかりきっかり更新中。</p>
  </div>
  <div class="card-link_06">
    <a href="#">HOME</a>
    <a href="#">FAQ</a>
    <a href="#">PRIVACY</a>
  </div>
</div>
</div>
CSS
/*--------------------------------------
  カード型_06
--------------------------------------*/
.l-wrapper_06 {
  margin: 1rem auto;
  width: 100%;
}

.l-wrapper_06:hover {
  transform: translateY(-5px);
  box-shadow: 0 7px 34px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);
  transition: all .5s;
}
.card_06 {
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px #ccc;
}

.card-img_06 {
  border-radius: 5px 5px 0 0;
  max-width: 100%;
  height: auto;
}
.card-content_06 {
  padding: 8px 20px 20px;
}
.card-title_06 {
  font-size: 1.6em;
  color: #333;
  font-weight: 700;
}
.card-text_06 {
  color: #777;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 0.2em;
}
.card-link_06 {
  text-align: center;
  border-top: 1px solid #eee;
  padding: 20px;
}
.card-link_06 a {
  text-decoration: none;
  color: #4f96f6;
  margin: 0 10px;
}
.card-link_06 a:hover {
  color: #6bb6ff;
}

.card-content_06 p {
  margin-bottom:0;
}