クリックで裏表が切り替わるカードを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

クリックで裏表が切り替わるカードを作る方法

クリックで上下左右に裏表が切り替わるカードを作る方法を紹介します。カードをクリックすると表面から裏面へ切り替わり、もう一度クリックすると元の表面へ戻るカードUIを作成できます。このサンプルでは、左右方向に回転するカードと、上下方向に回転するカードの2種類を用意しています。

HTMLでカードの表面と裏面を用意し、CSSのrotateY(180deg)で左右回転、rotateX(180deg)で上下回転を設定します。JavaScriptでは、クリックしたカードに表示用クラスを付け外しして、表面と裏面を切り替えます。複数のカードをまとめて扱えるため、カード一覧にも応用しやすい構成です。

商品紹介、プロフィールカード、サービス紹介、Q&A、補足情報の表示など、限られたスペースで2つの情報を切り替えたい場面に便利です。表面と裏面のテキスト、背景色、カードサイズ、角丸、影、回転速度などはCSSから変更できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

左右回転・表面

クリックすると左右方向に裏返ります。

左右回転・裏面

もう一度クリックすると表面へ戻ります。

上下回転・表面

クリックすると上下方向に裏返ります。

上下回転・裏面

もう一度クリックすると表面へ戻ります。

このデモでは、カードをクリックすると表面と裏面が切り替わる動作を確認できます。左右回転はrotateY(180deg)、上下回転はrotateX(180deg)を使用しています。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマホ表示に対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>クリックで裏表が切り替わるカードを作る方法</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- カード表示エリア -->
  <div class="click-flip-card_demo">

    <!-- 左右方向に裏返るカード -->
    <div class="click-flip-card_card">

      <!-- 回転するカード内側 -->
      <div class="click-flip-card_inner">

        <!-- カード表面 -->
        <div class="click-flip-card_front">
          <h3>左右回転・表面</h3>
          <p>クリックすると左右方向に裏返ります。</p>
        </div>

        <!-- カード裏面 -->
        <div class="click-flip-card_back">
          <h3>左右回転・裏面</h3>
          <p>もう一度クリックすると表面へ戻ります。</p>
        </div>

      </div>

    </div>

    <!-- 上下方向に裏返るカード -->
    <div class="click-flip-card_card click-flip-card_card-vertical">

      <!-- 回転するカード内側 -->
      <div class="click-flip-card_inner">

        <!-- カード表面 -->
        <div class="click-flip-card_front">
          <h3>上下回転・表面</h3>
          <p>クリックすると上下方向に裏返ります。</p>
        </div>

        <!-- カード裏面 -->
        <div class="click-flip-card_back">
          <h3>上下回転・裏面</h3>
          <p>もう一度クリックすると表面へ戻ります。</p>
        </div>

      </div>

    </div>

  </div>

  <!-- JavaScriptファイルを読み込み -->
  <script src="script.js"></script>

</body>
</html>

/* ページ全体 */
body{
  margin:0;  /* ページ外側の余白 */
  font-family:sans-serif;  /* 使用するフォント */
  background:#f8fafc;  /* ページ背景色 */
}

/* カード表示エリア */
.click-flip-card_demo{
  display:grid;  /* 2枚のカードを並べる */
  grid-template-columns:repeat(2, minmax(0, 320px));  /* PCでは2列で表示 */
  gap:28px;  /* カード同士の間隔 */
  justify-content:center;  /* 全体を中央寄せ */
  padding:40px 20px;  /* 外側の余白 */
  background:#f8fbff;  /* 表示エリアの背景色 */
  border-radius:18px;  /* 表示エリアの角丸 */
  perspective:1000px;  /* 3D回転の奥行き */
}

/* クリックで裏表が切り替わるカード */
.click-flip-card_card{
  width:320px;  /* カードの横幅 */
  height:220px;  /* カードの高さ */
  cursor:pointer;  /* クリックできることを示す */
}

/* 回転するカード内側 */
.click-flip-card_inner{
  position:relative;  /* 表面と裏面を重ねる基準 */
  width:100%;  /* 親カードと同じ横幅 */
  height:100%;  /* 親カードと同じ高さ */
  transform-style:preserve-3d;  /* 子要素を3D空間で表示 */
  transition:transform .6s;  /* 回転速度 */
}

/* 左右方向に裏返った状態 */
.click-flip-card_card.is-flipped .click-flip-card_inner{
  transform:rotateY(180deg);  /* 横方向に180度回転 */
}

/* 上下方向に裏返った状態 */
.click-flip-card_card.is-flipped.click-flip-card_card-vertical .click-flip-card_inner{
  transform:rotateX(180deg);  /* 縦方向に180度回転 */
}

/* カード表面と裏面 */
.click-flip-card_front,
.click-flip-card_back{
  position:absolute;  /* 表面と裏面を同じ位置に重ねる */
  inset:0;  /* 上下左右を0にして全面配置 */
  display:flex;  /* 中身を配置 */
  flex-direction:column;  /* 縦方向に並べる */
  justify-content:center;  /* 縦方向中央寄せ */
  align-items:center;  /* 横方向中央寄せ */
  padding:28px 24px;  /* 内側余白 */
  border:1px solid #dbeafe;  /* 枠線 */
  border-radius:18px;  /* 角丸 */
  background:#ffffff;  /* 表面背景色 */
  box-shadow:0 12px 30px rgba(15,23,42,.08);  /* 影 */
  backface-visibility:hidden;  /* 裏側を非表示 */
  -webkit-backface-visibility:hidden;  /* Safari対応 */
  text-align:center;  /* テキスト中央寄せ */
}

/* カード裏面 */
.click-flip-card_back{
  background:#2563eb;  /* 裏面背景色 */
  color:#ffffff;  /* 裏面文字色 */
  transform:rotateY(180deg);  /* 左右回転用の裏面配置 */
}

/* 上下回転カードの裏面 */
.click-flip-card_card-vertical .click-flip-card_back{
  transform:rotateX(180deg);  /* 上下回転用の裏面配置 */
}

/* カード見出し */
.click-flip-card_front h3,
.click-flip-card_back h3{
  margin:0 0 12px;  /* 見出し下の余白 */
  font-size:22px;  /* 見出し文字サイズ */
  font-weight:900;  /* 見出し文字の太さ */
}

/* 表面の見出し */
.click-flip-card_front h3{
  color:#0f172a;  /* 表面見出し文字色 */
}

/* カード説明文 */
.click-flip-card_front p,
.click-flip-card_back p{
  margin:0;  /* 外側余白 */
  font-size:15px;  /* 説明文文字サイズ */
  line-height:1.8;  /* 行間 */
}

/* 表面の説明文 */
.click-flip-card_front p{
  color:#475569;  /* 表面説明文文字色 */
}

/* スマホ表示 */
@media (max-width:720px){
  .click-flip-card_demo{
    grid-template-columns:1fr;  /* スマホでは1列表示 */
  }

  .click-flip-card_card{
    width:100%;  /* 画面幅に合わせる */
    max-width:320px;  /* カードの最大横幅 */
    margin:0 auto;  /* カードを中央寄せ */
  }
}

// クリックで裏表を切り替えるカードをすべて取得
const clickFlipCards = document.querySelectorAll(".click-flip-card_card");

// 取得したカードを1枚ずつ処理
clickFlipCards.forEach(function(card){

  // カードをクリックした時に処理を実行
  card.addEventListener("click", function(){

    // 表面と裏面を切り替えるクラスを付け外しする
    card.classList.toggle("is-flipped");

  });

});

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではカードの表面と裏面を配置し、CSSではカードのデザインや3D回転アニメーションを設定します。JavaScriptではクリック操作を検知し、カードへクラスを付け替えることで表面と裏面を切り替えます。外部ライブラリを使用せず、シンプルな構成で導入できるサンプルです。

sample/
├── index.html
├── style.css
└── script.js

各ファイルの役割
index.htmlはカード全体の構造を作成するファイルです。表面と裏面の見出しや説明文を自由に変更できます。

style.cssはカードの大きさ、背景色、文字色、余白、角丸、影、3D回転アニメーションを設定するファイルです。左右回転と上下回転の両方をCSSだけで切り替えています。

script.jsはカードをクリックしたときに表面と裏面を切り替える処理を担当します。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。カードをクリックすると3D回転しながら裏面が表示され、もう一度クリックすると表面へ戻ります。

カスタマイズできる内容
index.htmlではカードのタイトルや説明文を自由に変更できます。カードを追加すると、同じ動作をするカードを増やすこともできます。

style.cssではカードの横幅、高さ、背景色、文字色、角丸、影、回転時間などを用途に合わせて調整できます。また、左右回転と上下回転の表示方法も変更できます。

script.jsではクリック時の切り替え処理を変更したり、動作条件を追加したりできます。

数値調整
style.css

width:320px;
カードの横幅です。値を大きくすると横長になり、小さくするとコンパクトになります。

height:220px;
カードの高さです。値を大きくすると縦に大きくなり、小さくすると低く表示されます。

padding:28px 24px;
カード内側の余白です。値を大きくすると文字との間隔が広がります。

border-radius:18px;
カードの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

perspective:1000px;
3D回転の奥行きです。値を小さくすると立体感が強くなり、大きくすると控えめになります。

transition:transform .6s;
カードが裏返る時間です。.6秒を大きくするとゆっくり回転し、小さくすると速く切り替わります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssではGridレイアウトを使用し、PCでは2枚のカードを横並び、720px以下では1列表示へ自動で切り替えます。また、カードはwidth:100%とmax-width:320pxを使用しているため、スマートフォン・タブレット・PCで利用できます。