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

カードUI

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

クリックで上下左右に裏表が切り替わるカードを作る方法を紹介します。カードをクリックすると表面から裏面へ切り替わり、もう一度クリックすると元の表面へ戻るカード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>

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3つのファイルで構成されています。 

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

sampleフォルダ内に各ファイルを配置し、ブラウザでsample/index.htmlを開くと動作を確認できます。カードの表面・裏面の内容はindex.html、デザインや回転方向はstyle.css、クリック時の切り替え処理はscript.jsから変更できます。

コメント