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などすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成された、1つしか開かないアコーディオンです。index.html にアコーディオンの見出し・本文・ラジオボタンを記述し、style.css でデザインと開閉状態を設定しています。JavaScriptや外部ライブラリは使用せず、同じ name 属性を持つラジオボタンの仕組みによって、一度に1つの項目だけが開きます。
sample/
├── index.html
└── style.css
各ファイルの役割
index.html はアコーディオン全体の構造を記述するファイルです。見出し、本文、項目数、最初に開いておく項目を変更できます。
style.css はアコーディオン全体の横幅、背景色、文字色、余白、枠線、角丸、開閉部分の表示状態を設定するファイルです。
設置方法・使い方
sample フォルダ内へ index.html と style.css を配置し、sample/index.html をブラウザで開きます。アコーディオンの見出しをクリックすると対応する内容が表示され、別の見出しをクリックすると、それまで開いていた項目が自動で閉じます。
カスタマイズできる内容
index.html の label 要素を書き換えると見出しを変更でき、html-css-one-open-accordion_content 内を書き換えると表示内容を変更できます。アコーディオンを追加する場合は、ラジオボタンと項目部分を1組として追加し、id と for に同じ固有の値を指定します。最初に開く項目は、対象のラジオボタンへ checked を付けて設定します。
style.css を編集すると、背景色、文字色、プラス・マイナス記号の色、横幅、余白、枠線、角丸、文字サイズなどを変更できます。
数値調整
style.css の max-width:700px; はアコーディオン全体の最大横幅です。値を大きくすると広くなり、小さくするとコンパクトになります。
padding:32px; や padding:16px 18px; は全体や見出し内の余白、font-size:22px; や font-size:16px; は文字サイズを設定します。
border-radius:18px; や border-radius:12px; の値を大きくすると角の丸みが強くなり、小さくすると角張った形になります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.css の width:100%; と max-width:700px; により、画面幅に合わせてアコーディオン全体が縮小します。画面幅640px以下ではメディアクエリによって body とアコーディオン全体の余白を小さくしているため、スマートフォン・タブレット・PCで利用できます。
コメント