HTML/CSSだけで1つしか開かないアコーディオンを作る方法
HTMLとCSSだけで1つしか開かないアコーディオンを作る方法を紹介します。このサンプルでは、ラジオボタンの仕組みを利用して、一度に1つの項目だけを開けるアコーディオンを実装しています。JavaScriptを使用しないため、シンプルな構成で導入できるのが特徴です。
新しい項目を開くと、それまで開いていた項目は自動で閉じます。そのため、FAQページ、お問い合わせページ、商品説明、管理画面の設定項目など、多くの情報を整理して表示したい場面に適しています。HTMLとCSSだけで動作するため、JavaScriptを利用できない環境でも導入しやすい構成です。
コードはHTMLとCSSのみで構成されているため、そのままコピペして利用できます。項目数や見出し、本文はHTMLを書き換えるだけで簡単に変更でき、色や余白、角丸などのデザインはCSSから自由にカスタマイズできます。レスポンシブにも対応しているため、スマートフォン・タブレット・PCでも快適に利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
見出しをクリックすると、1つだけ内容を表示できます。
見出しをクリックすると、開いていた項目が閉じ、新しい項目だけが表示されます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン表示対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>HTML/CSSだけで1つしか開かないアコーディオン</title>
<!-- CSSファイルを読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- アコーディオン全体 -->
<div class="html-css-one-open-accordion_wrap">
<!-- タイトル -->
<div class="html-css-one-open-accordion_title">
HTML/CSSだけで作るアコーディオン
</div>
<!-- 説明文 -->
<p class="html-css-one-open-accordion_text">
見出しをクリックすると、1つだけ内容を表示できます。
</p>
<!-- アコーディオン1の選択用ラジオボタン -->
<input
class="html-css-one-open-accordion_radio"
type="radio"
name="accordion"
id="accordion1">
<!-- アコーディオン1 -->
<div class="html-css-one-open-accordion_item">
<!-- アコーディオン1の見出し -->
<label
class="html-css-one-open-accordion_label"
for="accordion1">
アコーディオンとは？
</label>
<!-- アコーディオン1の内容 -->
<div class="html-css-one-open-accordion_content">
HTMLとCSSだけで開閉動作を実現できます。
</div>
</div>
<!-- アコーディオン2の選択用ラジオボタン -->
<input
class="html-css-one-open-accordion_radio"
type="radio"
name="accordion"
id="accordion2"
>
<!-- アコーディオン2 -->
<div class="html-css-one-open-accordion_item">
<!-- アコーディオン2の見出し -->
<label
class="html-css-one-open-accordion_label"
for="accordion2">
このサンプルの特徴
</label>
<!-- アコーディオン2の内容 -->
<div class="html-css-one-open-accordion_content">
ラジオボタンを利用するため、常に1つだけ開いた状態になります。
</div>
</div>
<!-- アコーディオン3の選択用ラジオボタン -->
<input
class="html-css-one-open-accordion_radio"
type="radio"
name="accordion"
id="accordion3">
<!-- アコーディオン3 -->
<div class="html-css-one-open-accordion_item">
<!-- アコーディオン3の見出し -->
<label
class="html-css-one-open-accordion_label"
for="accordion3">
利用シーン
</label>
<!-- アコーディオン3の内容 -->
<div class="html-css-one-open-accordion_content">
FAQ、お問い合わせ、商品説明、管理画面などで利用できます。
</div>
</div>
</div>
</body>
</html>
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではラジオボタンとlabel要素を組み合わせて、JavaScriptを使わずに1つだけ開けるアコーディオンを作成します。CSSではラジオボタンの選択状態を利用して表示・非表示を切り替え、見た目やレイアウトを整えています。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはアコーディオン全体を構成するファイルです。タイトル、説明文、各見出し、本文を編集できます。ラジオボタンを利用しているため、別の見出しをクリックすると、それまで開いていた項目が自動で閉じ、新しく選択した項目だけが開きます。
style.cssはアコーディオン全体のデザインを設定するファイルです。横幅、余白、背景色、文字色、枠線、角丸、見出し、開閉アイコンの表示などを変更できます。また、ラジオボタンが選択されたときだけ本文を表示する設定も行っています。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。各見出しをクリックすると内容が表示され、別の見出しをクリックすると前に開いていた項目は自動で閉じ、新しく選択した項目だけが表示されます。
カスタマイズできる内容
index.htmlではタイトル、説明文、見出し、本文を自由に変更できます。ラジオボタンとアコーディオン項目を追加すれば表示する項目数を増やすこともできます。FAQ、商品説明、お問い合わせページ、管理画面など用途に合わせて内容を変更できます。
style.cssではアコーディオン全体の横幅、余白、背景色、文字色、枠線、角丸、文字サイズ、項目間隔、アイコンの色やサイズなどを変更できます。「＋」「－」の表示内容もCSSのcontentを書き換えるだけで変更できます。
数値調整
style.css
padding:40px 20px;
ページ全体の余白です。40pxは上下、20pxは左右の余白です。値を大きくすると画面端との間隔が広がります。
max-width:700px;
アコーディオン全体の最大横幅です。値を大きくすると横へ広がり、小さくするとコンパクトになります。
margin:40px auto;
アコーディオン全体の上下余白です。40pxを変更すると上下の間隔が変わります。
padding:32px;
アコーディオン全体の内側余白です。値を大きくすると内容と枠線の間隔が広がります。
border-radius:18px;
アコーディオン全体の角丸です。値を大きくすると丸みが強くなります。
margin:0 0 24px;
説明文の下側余白です。24pxを変更すると最初の項目との間隔が変わります。
margin:0 0 12px;
各アコーディオン項目の下側余白です。値を大きくすると項目同士の間隔が広がります。
border-radius:12px;
各項目の角丸です。値を大きくすると丸みが強くなります。
min-height:52px;
見出し部分の最小高さです。値を大きくするとクリック・タップしやすい見出しになります。
padding:16px 18px;
見出し部分の内側余白です。16pxは上下、18pxは左右の余白です。値を変更すると見出しの大きさが変わります。
margin-left:16px;
見出し文字と「＋」「－」アイコンとの間隔です。値を大きくするとアイコンが右へ離れます。
font-size:22px;
「＋」「－」アイコンの文字サイズです。値を大きくするとアイコンも大きく表示されます。
padding:0 18px 18px;
開いた本文の内側余白です。左右や下側の余白を変更すると本文の見え方が変わります。
@media screen and (max-width:640px)
スマートフォン向け表示へ切り替える画面幅です。値を変更すると切り替えタイミングが変わります。
padding:24px 18px;
スマートフォン表示時のアコーディオン全体の内側余白です。値を変更すると小さい画面での余白が変わります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxにより、画面幅に合わせてアコーディオン全体が縮小されます。また、640px以下では余白を小さくする設定を行っているため、スマートフォン・タブレット・PCで快適に利用できます。
コメント