クリックでカードを展開して詳細を表示する方法【HTML/CSS/JavaScript・サンプルコード付き】

カードUI

クリックでカードを展開して詳細を表示する方法

クリックでカードを展開して詳細を表示する方法を紹介します。カードをクリックすると高さが伸びて詳細情報が表示され、もう一度クリックすると元のサイズへ戻るシンプルなサンプルです。商品紹介、プロフィール、FAQ、サービス説明など、必要な時だけ詳細を表示したい場面で利用できます。

このサンプルでは、HTMLでカードの構造を作成し、CSSでカードが滑らかに伸縮するアニメーションを設定しています。JavaScriptではクリック操作に応じてクラスを切り替え、カードを展開・折りたたみできるようにしています。

カードのタイトルや詳細内容、色、サイズ、角丸、影、アニメーション速度などは自由に変更できます。コンテンツ量に応じてカードをコンパクトにまとめられるため、情報量の多いページでも見やすいレイアウトを作成できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

カードタイトル

ボタンをクリックすると、カードの詳細を表示できます。

詳細情報

ここには商品の説明やプロフィール、補足情報などを自由に表示できます。もう一度ボタンを押すと折りたためます。

このデモでは、ボタンをクリックするとカード内の詳細エリアが展開され、もう一度クリックすると折りたたまれます。

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

<!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="expand-card-details_demo">

    <!-- 展開できるカード -->
    <div class="expand-card-details_card">

      <!-- カード上部 -->
      <div class="expand-card-details_header">

        <!-- カードタイトル -->
        <h3>カードタイトル</h3>

        <!-- 短い説明文 -->
        <p>
          ボタンをクリックすると、カードが展開して詳細情報を表示します。
        </p>

      </div>

      <!-- 詳細エリア -->
      <div class="expand-card-details_body">

        <!-- 詳細内容 -->
        <div class="expand-card-details_content">

          <h4>詳細情報</h4>

          <p>
            ここには商品の説明、プロフィール、補足情報などを表示できます。もう一度ボタンをクリックすると、カードが折りたたまれます。
          </p>

        </div>

      </div>

      <!-- 展開ボタン -->
      <button class="expand-card-details_button" type="button">
        詳しく見る
      </button>

    </div>

  </div>

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

</body>
</html>

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3つのファイルで構成されています。HTMLではカードや詳細エリアの構造を作成し、CSSではカードのデザインや展開アニメーションを設定しています。JavaScriptではボタンのクリックに応じてカードを展開・折りたたみする処理を行っています。 

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

sampleフォルダ内に各ファイルを配置し、ブラウザでsample/index.htmlを開くと動作を確認できます。カードのタイトルや詳細内容はindex.html、カードの色・サイズ・角丸・影・アニメーションはstyle.cssから変更できます。また、script.jsではクリック時の展開・折りたたみ処理やボタンの表示文字を変更しているため、動作や表示内容を自由にカスタマイズできます。

コメント