HTML/CSSだけで動くアコーディオンの作り方
HTML/CSSだけで動くアコーディオンの作り方を紹介します。このサンプルでは、HTMLのdetails要素とsummary要素を使用し、見出しをクリックすると対応する内容を開閉できるアコーディオンを実装します。JavaScriptや外部ライブラリを使用しないため、シンプルな構成で導入できます。
各項目はそれぞれ独立して開閉でき、複数の内容を同時に表示できます。FAQ、お問い合わせページ、商品説明、利用案内、管理画面の補足説明など、情報量の多いページを整理して表示したい場面に適しています。ブラウザに備わっている開閉機能を利用するため、少ないコードで基本的なアコーディオンを作成できます。
HTMLでは見出しと本文、項目数を変更でき、CSSでは背景色、文字色、枠線、余白、角丸、開閉アイコンなどを調整できます。画面幅に合わせて横幅が縮小される構成のため、スマートフォン・タブレット・PCでも利用しやすく、初心者でもカスタマイズしやすいサンプルです。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
見出しをクリックすると、JavaScriptを使わずに内容を開閉できます。
アコーディオンとは？
どんな場面で使う？
JavaScriptは必要？
各見出しをクリックすると、対応する内容の開閉動作を確認できます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン表示対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>HTML/CSSだけで動くアコーディオン</title>
<!-- CSSファイルを読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- アコーディオン全体 -->
<div class="html-css-accordion_wrap">
<!-- タイトル -->
<h1 class="html-css-accordion_title">
HTML/CSSだけで動くアコーディオン
</h1>
<!-- 説明文 -->
<p class="html-css-accordion_text">
見出しをクリックすると、JavaScriptを使わずに内容を開閉できます。
</p>
<!-- アコーディオン項目 -->
<details class="html-css-accordion_item">
<summary class="html-css-accordion_summary">
アコーディオンとは？
</summary>
<div class="html-css-accordion_content">
見出しをクリックして内容を表示・非表示にできるUIです。
</div>
</details>
<!-- アコーディオン項目 -->
<details class="html-css-accordion_item">
<summary class="html-css-accordion_summary">
どんな場面で使う？
</summary>
<div class="html-css-accordion_content">
FAQ、お問い合わせページ、商品説明などで利用できます。
</div>
</details>
<!-- アコーディオン項目 -->
<details class="html-css-accordion_item">
<summary class="html-css-accordion_summary">
JavaScriptは必要？
</summary>
<div class="html-css-accordion_content">
このサンプルはHTMLとCSSだけで動作します。
</div>
</details>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではdetails要素とsummary要素を使用して、JavaScriptを使わずに開閉できるアコーディオンを作成します。CSSではアコーディオン全体の横幅や余白、枠線、角丸、開閉アイコンなどの見た目を設定しています。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはアコーディオン全体を構成するファイルです。タイトル、説明文、各見出し、開いたときに表示する本文を編集できます。details要素とsummary要素を使用しているため、JavaScriptを追加しなくても見出しをクリックするだけで内容を開閉できます。
style.cssはアコーディオン全体と各項目のデザインを設定するファイルです。横幅、余白、背景色、文字色、枠線、角丸、開閉アイコンの色やサイズなどを変更できます。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。各見出しをクリックすると対応する内容が開き、もう一度クリックすると閉じます。外部ライブラリやJavaScriptファイルは必要ありません。
カスタマイズできる内容
index.htmlでは「HTML/CSSだけで動くアコーディオン」のタイトル、説明文、各見出し、本文を変更できます。details要素を追加または削除することで、アコーディオンの項目数も調整できます。FAQ、商品説明、お問い合わせページなど、用途に合わせた内容へ変更できます。
style.cssではアコーディオン全体の横幅、背景色、余白、枠線、角丸、文字サイズ、項目同士の間隔、開閉アイコンの色やサイズを変更できます。「＋」「－」の記号もCSSのcontentから変更できます。
数値調整
style.css
padding:40px 20px;
ページ全体の内側余白です。40pxは上下、20pxは左右の余白を表します。値を大きくすると画面端との間隔が広がります。
max-width:700px;
アコーディオン全体の最大横幅です。値を大きくすると横へ広がり、小さくするとコンパクトになります。
margin:40px auto;
アコーディオン全体の上下余白と左右中央配置を設定しています。40pxを大きくすると上下の間隔が広がります。
padding:32px;
アコーディオン全体の内側余白です。値を大きくすると内容と枠線の間隔が広がります。
border:1px solid #e5e7eb;
アコーディオン全体と各項目の枠線です。1pxを大きくすると枠線が太くなります。
border-radius:18px;
アコーディオン全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
タイトルの文字サイズです。値を大きくするとタイトルが大きく表示されます。
margin:0 0 24px;
説明文の下側余白です。24pxを大きくすると最初のアコーディオン項目との間隔が広がります。
line-height:1.8;
説明文と本文の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。
margin-bottom:12px;
各アコーディオン項目の間隔です。値を大きくすると項目同士が離れ、小さくすると近付きます。
border-radius:12px;
各アコーディオン項目の角丸です。値を大きくすると丸みが強くなります。
padding:16px 18px;
見出し部分の内側余白です。16pxは上下、18pxは左右の余白を表します。値を大きくするとクリックできる範囲が広がります。
font-size:22px;
「＋」「－」アイコンの文字サイズです。値を大きくするとアイコンが大きくなります。
padding:0 18px 18px;
開いたときに表示される本文の内側余白です。左右と下側の値を変更すると、本文と枠線の間隔が変わります。
@media (max-width:640px)
画面幅640px以下でスマートフォン向けのスタイルへ切り替える境界です。値を変更すると切り替わる画面幅が変わります。
padding:24px 18px;
画面幅640px以下で使用するアコーディオン全体の内側余白です。PC表示より余白を小さくして、狭い画面でも内容が収まりやすくなります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxにより、画面幅に合わせてアコーディオン全体が縮小されます。また、640px以下ではpadding:24px 18px;へ変更して内側余白を小さくしているため、スマートフォン・タブレット・PCで利用できます。
コメント