立体的に開くアコーディオンを作る方法
立体的に開くアコーディオンを作る方法を紹介します。このサンプルでは、HTML・CSS・JavaScriptを使用し、見出しをクリックすると説明ブロックが奥から手前へ飛び出すような立体アニメーションで表示されるアコーディオンを実装します。通常のスライド表示とは異なり、奥行きを感じられる動きによって、開閉の変化を視覚的に分かりやすく表現できます。
FAQページや商品説明、サービス紹介、お問い合わせページ、会員サイト、管理画面など、情報を整理して表示したい場面で利用できます。見出しは常に表示されたままで、クリックした項目だけが立体的に展開されます。また、開閉に合わせて「＋」「－」ボタンも立体的にアニメーションするため、現在の状態を直感的に確認できます。
見出しや説明文はHTMLから自由に変更でき、CSSでは背景色、文字色、余白、角丸、影、立体感、アニメーション速度などを用途に合わせて調整できます。JavaScriptは開閉状態の切り替えのみを担当しているため構成も分かりやすく、スマートフォン・タブレット・PCに対応した立体感のあるアコーディオンとして、さまざまなWebサイトへ導入できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
見出しを固定したまま、内容が奥から手前へ現れるように開閉します。
各見出しをクリックすると「＋」が「－」へ切り替わり、内容だけが奥から手前へ立体的に表示されます。
コードをコピーして使おう！
<!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="depth-3d-accordion_wrap">
<!-- タイトル -->
<div class="depth-3d-accordion_title">
奥行きのある3Dアコーディオン
</div>
<!-- 説明文 -->
<p class="depth-3d-accordion_text">
見出しを固定したまま、内容が奥から手前へ現れるように開閉します。
</p>
<!-- アコーディオン一覧 -->
<div class="depth-3d-accordion_list">
<!-- 項目1 -->
<div class="depth-3d-accordion_item">
<button
class="depth-3d-accordion_button"
type="button"
aria-expanded="false">
<span>
アコーディオンとは？
</span>
<span
class="depth-3d-accordion_icon"
aria-hidden="true">
＋
</span>
</button>
<div class="depth-3d-accordion_content">
<div class="depth-3d-accordion_content-inner">
<div class="depth-3d-accordion_content-card">
アコーディオンは、見出しをクリックして必要な内容だけを表示できるUIです。
</div>
</div>
</div>
</div>
<!-- 項目2 -->
<div class="depth-3d-accordion_item">
<button
class="depth-3d-accordion_button"
type="button"
aria-expanded="false">
<span>
どんな場面で使う？
</span>
<span
class="depth-3d-accordion_icon"
aria-hidden="true">
＋
</span>
</button>
<div class="depth-3d-accordion_content">
<div class="depth-3d-accordion_content-inner">
<div class="depth-3d-accordion_content-card">
FAQ、商品説明、お問い合わせページ、管理画面の設定項目などで利用できます。
</div>
</div>
</div>
</div>
<!-- 項目3 -->
<div class="depth-3d-accordion_item">
<button
class="depth-3d-accordion_button"
type="button"
aria-expanded="false">
<span>
必要なファイルは？
</span>
<span
class="depth-3d-accordion_icon"
aria-hidden="true">
＋
</span>
</button>
<div class="depth-3d-accordion_content">
<div class="depth-3d-accordion_content-inner">
<div class="depth-3d-accordion_content-card">
HTML・CSS・JavaScriptの3ファイルで作成できます。外部ライブラリは使用しません。
</div>
</div>
</div>
</div>
</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はアコーディオン全体の構造を作成するファイルです。見出しや説明文の内容を変更できます。
style.cssは立体感のあるデザインや開閉アニメーションを設定するファイルです。色、余白、角丸、影、立体感、アニメーション速度などを変更できます。
script.jsはアコーディオンの開閉処理を行うファイルです。クリック時の開閉、aria-expanded属性の切り替え、「＋」「－」アイコンの変更を行います。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。各見出しをクリックすると、内容が奥から手前へ立体的に表示され、再度クリックすると閉じます。
カスタマイズできる内容
index.htmlでは見出しや説明文の内容を自由に変更できます。FAQ、お問い合わせ、商品説明、設定画面など用途に合わせて項目数を増減できます。
style.cssでは全体の横幅、背景色、余白、角丸、影、立体感、文字サイズ、開閉アニメーション、アイコンサイズなどを変更できます。script.jsでは開閉処理やアイコン切り替えの動作を編集できます。
数値調整
style.css
max-width:720px;
アコーディオン全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
padding:32px;
全体の内側余白です。値を大きくすると余白が広がり、小さくすると詰まった表示になります。
gap:28px;
各アコーディオン項目の間隔です。値を大きくすると上下の余白が広がります。
perspective:1200px;
立体感の奥行きです。値を小さくすると立体感が強くなり、大きくすると自然な見た目になります。
min-height:72px;
見出しボタンの高さです。値を大きくするとボタンが高く表示されます。
transition:.6s
開閉や回転アニメーションの時間です。値を大きくするとゆっくり、小さくすると素早く動作します。
translateZ(-120px)・translateZ(60px)
コンテンツの奥行きを設定しています。値を変更すると飛び出す距離や立体感が変わります。
rotateX(-35deg)
開く前のカードの傾きです。値を大きくすると傾きが強くなります。
scale(.9)
開く前のカードサイズです。値を小さくすると縮小率が大きくなります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:720pxにより画面幅に合わせて縮小表示されます。また、640px以下ではpadding:24px 18px;やボタンサイズ、アイコンサイズを調整しているため、スマートフォン・タブレット・PCでも見やすく利用できます。
コメント