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

31分

カードデザインのアイキャッチ画像

SHARE

Googleが推奨するマテリアルデザインは、デザインを最適化しやすいように装飾を減らし、シンプルなデザインでユーザーが直感的に使いやすいように設計された手法の一つです。

カードデザインは、専用のガイドラインページが用意されているほどGoogleによって細かく定義されています。

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

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

全てのカードのサンプルは、カラムで設置してあるので設置場所によって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. 写真に白文字のせ
12 Aug 2016
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業界情報などを紹介していくサイト。
しっかりきっかり更新中。

HOME FAQ PRIVACY

DUB DESiGN

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

HOME FAQ PRIVACY

コピペ用コード

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;
}

jQueryを加えて折り畳み式のカード

HTMLとCSSに、jQueryのアニメーションを加えて動きを付けたカードです。

jQueryの読み込みが必要になりますが、クリックでこのようなアニメーションを加えられるのでインタラクティブなカードにできます。

  • アイキャッチ画像

    カードのタイトルカードのタイトルカードのタイトル

    ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
    記事を見る
  • アイキャッチ画像

    カードのタイトルカードのタイトルカードのタイトルカードのタイトルカードのタイトル

    ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
    記事を見る
  • アイキャッチ画像

    カードのタイトル

    ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
    記事を見る
  • アイキャッチ画像

    カードのタイトルカードのタイトルカードのタイトルカードのタイトルカードのタイトル

    ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
    記事を見る

コピペ用コード

このカードは、jQuery本体の組み込みが必要です。

jQueryは既に<head>〜</head> の中で読み込まれていれば問題ありませんが、ない場合は以下の記事を参考にして、jQuery本体をHTMLファイルに書き込みましょう。

関連記事 jQueryのインストール方法

インストールが完了すれば、以下のコードをコピペしましょう。

HTML
<ul class="cards7">
<!-- card -->
  <li class="card7">
    <div class="card__image-holder"> <img class="card__image" src="https://dubdesign.net/wp-content/uploads/2021/03/jquerymatome_eyecatch-1024x587.jpg" alt="アイキャッチ画像"> </div>
    <div class="card-title"> <a href="#" class="toggle-info btn7">
        <span class="left"></span>
        <span class="right"></span>
      </a>
      <p class="card_timecategory"><time class="pubdate entry-time dfont" itemprop="datePublished" datetime="2021-10-16">2021年10月16日</time></p>
      <p class="card_htitle">カードのタイトルカードのタイトルカードのタイトル</p>
    </div>
    <div class="card-flap flap1">
      <div class="card-description">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</div>
      <div class="card-flap flap2">
        <div class="card-actions"> <a href="#" class="btn7">記事を見る</a> </div>
      </div>
    </div>
  </li>
<!-- card -->
<!-- card -->
  <li class="card7">
    <div class="card__image-holder"> <img class="card__image" src="https://dubdesign.net/wp-content/uploads/2021/10/restapi-afceyecatch-1024x587.jpg" alt="アイキャッチ画像"> </div>
    <div class="card-title"> <a href="#" class="toggle-info btn7">
        <span class="left"></span>
        <span class="right"></span>
      </a>
      <p class="card_timecategory"><time class="pubdate entry-time dfont" itemprop="datePublished" datetime="2021-10-16">2021年10月16日</time></p>
      <p class="card_htitle">カードのタイトルカードのタイトルカードのタイトルカードのタイトルカードのタイトル</p>
    </div>
    <div class="card-flap flap1">
      <div class="card-description">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</div>
      <div class="card-flap flap2">
        <div class="card-actions"> <a href="#" class="btn7">記事を見る</a> </div>
      </div>
    </div>
  </li>
<!-- card -->
<!-- card -->
  <li class="card7">
    <div class="card__image-holder"> <img class="card__image" src="https://dubdesign.net/wp-content/uploads/2021/08/jqueryheader_eyecatch-1024x587.jpg" alt="アイキャッチ画像"> </div>
    <div class="card-title"> <a href="#" class="toggle-info btn7">
        <span class="left"></span>
        <span class="right"></span>
      </a>
      <p class="card_timecategory"><time class="pubdate entry-time dfont" itemprop="datePublished" datetime="2021-10-16">2021年10月16日</time></p>
      <p class="card_htitle">カードのタイトル</p>
    </div>
    <div class="card-flap flap1">
      <div class="card-description">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</div>
      <div class="card-flap flap2">
        <div class="card-actions"> <a href="#" class="btn7">記事を見る</a> </div>
      </div>
    </div>
  </li>
<!-- card -->
<!-- card -->
  <li class="card7">
    <div class="card__image-holder"> <img class="card__image" src="https://dubdesign.net/wp-content/uploads/2021/09/sliderimage_eyecatch-1024x587.jpg" alt="アイキャッチ画像"> </div>
    <div class="card-title"> <a href="#" class="toggle-info btn7">
        <span class="left"></span>
        <span class="right"></span>
      </a>
      <p class="card_timecategory"><time class="pubdate entry-time dfont" itemprop="datePublished" datetime="2021-10-16">2021年10月16日</time></p>
      <p class="card_htitle">カードのタイトルカードのタイトルカードのタイトルカードのタイトルカードのタイトル</p>
    </div>
    <div class="card-flap flap1">
      <div class="card-description">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</div>
      <div class="card-flap flap2">
        <div class="card-actions"> <a href="#" class="btn7">記事を見る</a> </div>
      </div>
    </div>
  </li>
<!-- card -->
</ul>
CSS
a.btn7 {
    background: #6bb6ff;
    border-radius: 4px;
    box-shadow: 0 2px 0px 0 rgba(0,0,0,0.25);
    color: #ffffff;
    display: inline-block;
    padding: 6px 30px 6px;
    position: relative;
    text-decoration: none;
    transition: all 0.1s 0s ease-out;
    font-weight: 600;
    letter-spacing: 0.04rem;
}
.no-touch a.btn7:hover {
    background: #00a2ad;
    box-shadow: 0px 8px 2px 0 rgba(0,0,0,0.075);
    transform: translateY(-2px);
    transition: all 0.25s 0s ease-out;
}
.no-touch a.btn7:active, a.btn7:active {
    background: #008a93;
    box-shadow: 0 1px 0px 0 rgba(255,255,255,0.25);
    transform: translate3d(0,1px,0);
    transition: all 0.025s 0s ease-out;
}
ul.cards7 {
    border: none;
    padding: 0;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-start;
}
li.card7 {
    display: inline-block;
    perspective: 1000;
    position: relative;
    text-align: left;
    transition: all 0.3s 0s ease-in;
    width: 48%;
    z-index: 1;
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 0 3px 0 rgb(0 0 0 / 12%), 0 2px 3px 0 rgb(0 0 0 / 22%);
    padding: 0;
    cursor: pointer;
    margin-bottom: 25px;
}
li.card7 img {
    width: 100%;
}
li.card7 .card__image-holder {
    background: rgba(0,0,0,0.1);
    height: 0;
    padding-bottom: 57%;
    overflow: hidden;
}
li.card7 .card__image-holder img {
    transition: all 0.1s 0s ease-in;
}
li.card7:hover > .card__image-holder img {
    transform: scale(1.05);
}
li.card7 div.card-title {
    background: #ffffff;
    padding: 8px 18px 14px;
    position: relative;
    z-index: 0;
}
li.card7 div.card-title a.toggle-info {
    border-radius: 32px;
    height: 32px;
    padding: 0;
    position: absolute;
    right: 16px;
    top: 8px;
    width: 32px;
    margin: 0 !important;
}
li.card7 div.card-title a.toggle-info span {
    background: #ffffff;
    display: block;
    height: 2px;
    position: absolute;
    top: 16px;
    transition: all 0.15s 0s ease-out;
    width: 12px;
}
li.card7 div.card-title a.toggle-info span.left {
    right: 14px;
    transform: rotate(45deg);
}
li.card7 div.card-title a.toggle-info span.right {
    left: 14px;
    transform: rotate(-45deg);
}
li.card7 div.card-title p {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.05em;
    margin: 6px 0 3px;
    padding: 0;
    line-height: 1.56;
    color: #555;
}
li.card7 div.card-title p.card_timecategory {
    display: flex;
    flex-flow: row;
    font-weight: 600;
    font-size: 0.85rem;
    justify-content: flex-start;
    letter-spacing: 0.02rem;
    color: #b5b5b5;
    position: relative;
}
li.card7 div.card-title p small {
    display: block;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: -0.025em;
}
li.card7 div.card-description {
    padding: 0px 20px 20px;
    position: relative;
    font-size: 0.9rem;
    color: #313131;
}
li.card7 div.card-actions {
    box-shadow: 0 2px 0px 0 rgba(0,0,0,0.075);
    padding: 10px 15px 15px;
    text-align: center;
}
li.card7 div.card-flap {
    background: #d9d9d9;
    position: absolute;
    width: 100%;
    transform-origin: top;
    transform: rotateX(-90deg);
    box-shadow: 0 0 3px 0 rgb(0 0 0 / 12%), 0 2px 3px 0 rgb(0 0 0 / 22%);
}
li.card7 div.flap1 {
    transition: all 0.3s 0.3s ease-out;
    z-index: -1;
}
li.card7 div.flap2 {
    transition: all 0.3s 0s ease-out;
    z-index: -2;
}
ul.cards7.showing li.card7 {
    cursor: pointer;
    opacity: 0.6;
    transform: scale(0.88);
}
.no-touch ul.cards7.showing li.card7:hover {
    opacity: 0.94;
    transform: scale(0.92);
}
li.card7.show {
    opacity: 1 !important;
    transform: scale(1) !important;
}
li.card7.show div.card-title a.toggle-info {
    background: #ff6666 !important;
}
li.card7.show div.card-title a.toggle-info span {
    top: 15px;
}
li.card7.show div.card-title a.toggle-info span.left {
    right: 10px;
}
li.card7.show div.card-title a.toggle-info span.right {
    left: 10px;
}
li.card7.show div.card-flap {
    background: #ffffff;
    transform: rotateX(0deg);
}
li.card7.show div.flap1 {
    transition: all 0.3s 0s ease-out;
}
li.card7.show div.flap2 {
    transition: all 0.3s 0.2s ease-out;
}
.card-actions a {
    padding-right: 45px;
    padding-left: 45px;
    border-radius: 3px;
    box-shadow: 0 2px 3px rgb(0 0 0 / 20%), 0 2px 3px -2px rgb(0 0 0 / 15%);
}
.card-actions a.btn7:hover {
    box-shadow: 0 13px 20px -3px rgb(0 0 0 / 24%);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transform: translateY(-3px);
}
.card-actions a.btn7:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f105";
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
}

@media screen and (max-width: 767px) {
ul.cards7 {
    flex-direction: column;
}
li.card7 {
    width: 100%;
}
}
jQuery
$(document).ready(function(){
  var zindex = 10;
  
  $("li.card7").click(function(e){
    e.preventDefault();

    var isShowing = false;

    if ($(this).hasClass("show")) {
      isShowing = true
    }

    if ($("ul.cards7").hasClass("showing")) {
      $("li.card7.show")
        .removeClass("show");

      if (isShowing) {
        $("ul.cards7")
          .removeClass("showing");
      } else {
        $(this)
          .css({zIndex: zindex})
          .addClass("show");

      }

      zindex++;

    } else {
      // no cards in view
      $("ul.cards7")
        .addClass("showing");
      $(this)
        .css({zIndex:zindex})
        .addClass("show");
      zindex++;
    }
    
  });
});

2 COMMENTS

現在コメントは受け付けておりません。

前の記事

イラストレーターのショートカットのイラスト
Illustratorのショートカットとコピペでできるキーボー…

次の記事

HTMLとCSSのコピペでできるカルーセル・スライダーのデザイ…
スライダー・カルーセルのイラスト

関連記事

カテゴリーのイラスト

同じカテゴリの記事一覧

ボタンの影

まとめ記事

Article

About

Summary

OTHER

DUB DESiGNはデザインをテーマにしたメディアです。Webデザインに関するHow-toや、WordPressのスニペットなど、デザインの話を中心に、仕事を楽しむすべての方を対象に記事を配信しています。

＞＞ 詳しくはこちら