ボタンクリックでカードを展開して詳細を表示する方法
ボタンクリックでカードを展開して詳細を表示する方法を紹介します。このサンプルでは、カード内の「詳しく見る」ボタンをクリックすると詳細エリアが展開され、もう一度クリックすると折りたたまれるカードUIを作成します。詳細が開いている間はボタンの文字が「閉じる」に切り替わるため、現在の表示状態も分かりやすく確認できます。
商品紹介、プロフィール、サービス説明、プラン案内など、最初は概要だけを表示し、必要な場合だけ追加情報を確認できるようにしたい場面に利用できます。詳細を常に表示しておく必要がないため、カードをコンパクトな状態に保ちながら、利用者の操作に応じて詳しい内容を表示できます。
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_demo">
<!-- カード -->
<div class="expand-card">
<!-- カード上部 -->
<div class="expand-card_header">
<h3>カードタイトル</h3>
<p>
「詳しく見る」ボタンをクリックすると、カードの詳細を表示できます。
</p>
</div>
<!-- 展開する詳細エリア -->
<div class="expand-card_body">
<div class="expand-card_content">
<h4>詳細情報</h4>
<p>
ここには商品の説明やプロフィール、補足情報などを自由に表示できます。もう一度ボタンを押すと折りたためます。
</p>
</div>
</div>
<!-- 開閉ボタン -->
<button class="expand-card_button" type="button">
詳しく見る
</button>
</div>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではカードタイトル、概要文、詳細情報、「詳しく見る」ボタンを配置します。CSSではカードの横幅、余白、背景色、枠線、角丸、影、詳細エリアの展開アニメーションなどを設定し、JavaScriptではボタンクリックによってカードの開閉状態とボタン文字を切り替えます。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはカード全体を構成するファイルです。「カードタイトル」の見出し、カード上部の説明文、「詳細情報」の見出し、詳細本文、「詳しく見る」ボタンの文字を変更できます。詳細として表示したい文章を変更する場合は、expand-card_content内を編集します。
style.cssはカードのデザインと展開時の表示を設定するファイルです。カードの横幅、背景色、枠線、角丸、影、各部分の余白、文字サイズなどを変更できます。詳細エリアは初期状態でmax-height:0;になっており、カードへis-openクラスが付くとmax-height:260px;へ変化して内容が表示されます。
script.jsは「詳しく見る」ボタンによる開閉処理を行うファイルです。ボタンをクリックするとカードへis-openクラスを付け外しし、詳細エリアを展開・折りたたみします。開いているときはボタン文字を「閉じる」、閉じているときは「詳しく見る」へ切り替えます。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを同じ階層で配置します。3つのファイルを保存したあと、sample/index.htmlをブラウザで開いてください。カード下部の「詳しく見る」ボタンをクリックすると詳細情報が展開され、ボタン文字が「閉じる」へ変わります。もう一度クリックすると詳細情報が折りたたまれ、ボタン文字も「詳しく見る」へ戻ります。
カスタマイズできる内容
index.htmlではカードタイトル、概要文、詳細タイトル、詳細本文、「詳しく見る」ボタンの文字を変更できます。商品説明、プロフィール、サービス案内、補足情報など、表示したい内容へ置き換えて利用できます。
style.cssではカードの横幅、背景色、枠線、角丸、影、各エリアの余白、文字サイズ、詳細エリアの最大高さ、展開アニメーション時間、ボタンの色や角丸などを変更できます。JavaScriptでは開閉状態に合わせて「詳しく見る」と「閉じる」の文字を切り替えています。
数値調整
style.css
padding:40px 20px;
ページ全体とカード表示エリアで使用している余白です。上下の40pxを大きくすると縦方向の余白が広がり、左右の20pxを大きくすると画面端との間隔が広がります。
border-radius:18px;
カード表示エリアとカード本体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
width:360px;
カード本体の横幅です。値を大きくするとカードが横に広がり、小さくするとコンパクトになります。
box-shadow:0 12px 30px rgba(15,23,42,.08);
カードの影です。12pxは縦方向の位置、30pxはぼかしの広がりを表します。値を変更すると影の見え方が変わります。
padding:24px;
カード上部と詳細内容の内側余白です。値を大きくすると文章とカード端との間隔が広がります。
font-size:22px;
カードタイトルの文字サイズです。値を大きくするとタイトルが大きくなり、小さくすると小さくなります。
margin:0 0 10px;
カードタイトル下の余白です。10pxを大きくすると概要文との間隔が広がります。
line-height:1.8;
カード内の説明文や詳細本文の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。
transition:max-height .35s ease;
詳細エリアが展開・折りたたみされる時間です。0.35秒で変化します。値を大きくするとゆっくり、小さくすると速くなります。
max-height:260px;
カードを開いたときの詳細エリアの最大高さです。値を大きくするとより多くの内容を表示でき、小さくすると表示できる高さが低くなります。
font-size:18px;
詳細情報の見出し文字サイズです。値を大きくすると見出しが大きくなります。
margin:0 0 12px;
詳細情報の見出し下の余白です。12pxを大きくすると本文との間隔が広がります。
width:calc(100% - 48px);
開閉ボタンの横幅です。左右24pxずつの余白を残してカード内へ収まる幅にしています。
margin:0 24px 24px;
開閉ボタンの左右と下側の余白です。24pxを大きくするとカード端や下部との間隔が広がります。
padding:12px;
開閉ボタンの内側余白です。値を大きくするとボタンが高くなります。
border-radius:10px;
開閉ボタンの角丸です。値を大きくすると丸みが強くなります。
font-size:15px;
開閉ボタンの文字サイズです。値を大きくするとボタン文字が大きくなります。
レスポンシブ対応
このサンプルではHTMLのviewportを設定し、カード表示エリアへ左右20pxの余白を付けています。ただし、カード本体にはwidth:360px;の固定幅を指定しており、画面幅に応じてカード幅を変更するmedia queryやwidth:100%は実装していません。利用する画面幅に合わせて必要な場合は、style.cssのカード幅を調整してください。
コメント