基本のアコーディオンを作る方法
基本アコーディオンを作る方法を紹介します。クリックするとコンテンツの表示・非表示を切り替えられる、シンプルなアコーディオンをHTML・CSS・JavaScriptだけで実装するサンプルです。複雑なライブラリを使わずに作成できるため、アコーディオンの基本的な仕組みを学びたい方にも適しています。
このサンプルでは、各項目をクリックすると対応するコンテンツだけが開閉します。FAQ・Q&Aページ、お問い合わせページ、商品説明、管理画面の設定項目など、情報量の多いページを見やすく整理したい場面で活用できます。表示する文章や項目数はHTMLを書き換えるだけで簡単に変更できます。
コードはHTML・CSS・JavaScriptのみで構成されているため、そのままコピペして利用できます。シンプルな実装なので、アニメーションやアイコンの追加、1つだけ開ける仕様などへ発展させる際のベースとしても利用しやすいサンプルです。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
見出しをクリックすると、対応する内容を個別に開閉できます。
各見出しをクリックすると、対応する内容の開閉動作を確認できます。
コードをコピーして使おう！
<!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="basic-accordion_wrap">
<!-- タイトル -->
<h1 class="basic-accordion_title">
基本アコーディオン
</h1>
<!-- 説明文 -->
<p class="basic-accordion_text">
見出しをクリックすると内容を開閉できます。
</p>
<!-- アコーディオン1 -->
<div class="basic-accordion_item">
<button
class="basic-accordion_button"
type="button">
アコーディオンとは？
</button>
<div class="basic-accordion_content">
アコーディオンは、クリックした項目の内容を表示・非表示にできるUIです。
</div>
</div>
<!-- アコーディオン2 -->
<div class="basic-accordion_item">
<button
class="basic-accordion_button"
type="button">
どんな場面で使う？
</button>
<div class="basic-accordion_content">
FAQ、お問い合わせページ、商品説明、設定画面などで利用できます。
</div>
</div>
<!-- アコーディオン3 -->
<div class="basic-accordion_item">
<button
class="basic-accordion_button"
type="button">
必要なファイルは？
</button>
<div class="basic-accordion_content">
HTML、CSS、JavaScriptの3ファイルだけで実装できます。
</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はアコーディオンの開閉処理を行うファイルです。見出しをクリックするとis-openクラスを付け外しし、対応する内容を表示・非表示へ切り替えます。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。各見出しをクリックすると内容が表示され、もう一度クリックすると閉じます。
カスタマイズできる内容
index.htmlではタイトル、説明文、アコーディオンの見出し、表示する文章、項目数を自由に変更できます。FAQ、お問い合わせ、商品説明、設定画面など用途に合わせた内容へ簡単に変更できます。
style.cssでは全体の横幅、背景色、余白、枠線、角丸、文字サイズ、行間、プラス・マイナス記号の色やサイズなどを変更できます。サイトデザインに合わせた見た目へ調整することも可能です。
数値調整
style.css
max-width:700px;
アコーディオン全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
padding:32px;
アコーディオン全体の内側余白です。値を大きくすると余白が広がり、小さくすると詰まった表示になります。
font-size:22px;
タイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると控えめになります。
margin:0 0 24px;
説明文の下側余白です。値を大きくするとアコーディオンとの間隔が広がり、小さくすると狭くなります。
margin:0 0 12px;
各アコーディオン項目の間隔です。値を大きくすると項目同士の間隔が広がります。
border-radius:12px;
アコーディオン項目の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
min-height:52px;
ボタンの最小高さです。値を大きくするとクリックしやすくなり、小さくすると高さを抑えられます。
padding:16px 18px;
ボタンの内側余白です。値を変更するとボタン全体の大きさが変わります。
font-size:22px;
プラス・マイナス記号のサイズです。値を大きくすると記号が見やすくなり、小さくすると控えめになります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxにより画面幅に応じてアコーディオン全体が縮小されます。また、640px以下では余白を小さくするmedia queryを実装しているため、スマートフォン・タブレット・PCで快適に利用できます。
コメント