最初から1つだけ開いているアコーディオンを作る方法
最初から1つだけ開いているアコーディオンを作る方法を紹介します。このサンプルでは、ページを開いた時点で最初の項目だけを展開した状態で表示し、残りの項目は閉じた状態で開始します。各見出しをクリックすると、それぞれの項目を自由に開閉できるシンプルなアコーディオンをHTML・CSS・JavaScriptだけで実装できます。
FAQページやヘルプページ、商品説明、設定画面などでは、最初に見せたい情報だけを表示しておきたい場面があります。このようなレイアウトにすることで、利用者へ最初に重要な内容を案内しながら、必要に応じて他の項目も開いて確認できます。シンプルな開閉処理なので、初心者でも仕組みを理解しやすく、さまざまなWebサイトへ応用できます。
HTMLではタイトルや説明文、各アコーディオンの見出しと本文を変更できます。CSSでは横幅、余白、背景色、文字サイズ、枠線、角丸、アイコンカラーなどを自由に調整できます。また、最初に開いておく項目はHTML内のis-openクラスを付け替えるだけで簡単に変更できるため、用途に合わせて柔軟にカスタマイズできます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
ページを開いた時点で、最初の項目だけが開いた状態になります。
ページを開くと最初の項目だけ開いています。各見出しをクリックすると個別に開閉できます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コードを指定 -->
<meta charset="UTF-8">
<!-- スマートフォン表示に対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>最初から1つだけ開いているアコーディオン</title>
<!-- CSSファイルを読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- アコーディオン全体 -->
<div class="initial-open-single-accordion_wrap">
<!-- タイトル -->
<div class="initial-open-single-accordion_title">
最初の項目だけ開いたアコーディオン
</div>
<!-- 説明文 -->
<p class="initial-open-single-accordion_text">
ページを開いた時点で、最初の項目だけが開いた状態になります。
</p>
<!-- 1つ目。is-open が付いているので最初から開く -->
<div class="initial-open-single-accordion_item is-open">
<button class="initial-open-single-accordion_button" type="button">
アコーディオンとは？
</button>
<div class="initial-open-single-accordion_content">
クリックした項目の内容を開閉できるUIです。
</div>
</div>
<!-- 2つ目 -->
<div class="initial-open-single-accordion_item">
<button class="initial-open-single-accordion_button" type="button">
どんな場面で使う？
</button>
<div class="initial-open-single-accordion_content">
FAQや設定画面などで最初に重要な内容だけ表示したい場合に利用できます。
</div>
</div>
<!-- 3つ目 -->
<div class="initial-open-single-accordion_item">
<button class="initial-open-single-accordion_button" type="button">
使用ファイル
</button>
<div class="initial-open-single-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はアコーディオン全体の構造を作成するファイルです。タイトル、説明文、各項目の見出しと本文を変更できます。最初から開いておく項目にはis-openクラスを付けます。このサンプルでは1つ目の項目だけにis-openを付けているため、ページを開いた時点では最初の項目だけが表示されます。
style.cssはアコーディオン全体と各項目のデザインを設定するファイルです。横幅、余白、背景色、文字色、枠線、角丸、開閉アイコンなどを変更できます。また、通常は本文を非表示にし、is-openクラスが付いた項目だけを表示します。
script.jsは各アコーディオン項目の開閉処理を行うファイルです。見出しボタンをクリックすると、その項目のis-openクラスを切り替え、本文と開閉アイコンの表示を変更します。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置してください。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開きます。ページを開くと最初の項目だけが開いた状態で表示されます。各見出しをクリックすると、その項目を個別に開閉できます。
カスタマイズできる内容
index.htmlではタイトル、説明文、各アコーディオンの見出しと本文を変更できます。最初から開いておく項目を変更したい場合は、現在の1つ目からis-openクラスを削除し、開きたい項目へ付け替えてください。
style.cssではアコーディオン全体の横幅、余白、背景色、文字サイズ、枠線、角丸、開閉アイコンの色などを変更できます。FAQ、設定画面、商品説明、ヘルプページなど、用途に合わせて表示内容とデザインを調整できます。
数値調整
style.css
max-width:700px;
アコーディオン全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
アコーディオン全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
アコーディオン全体の内側余白です。値を大きくすると内容と枠線の間隔が広がり、小さくすると詰まった表示になります。
border-radius:18px;
アコーディオン全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
タイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると控えめになります。
margin-bottom:12px;
各アコーディオン項目の下側余白です。値を大きくすると項目同士の間隔が広がり、小さくすると狭くなります。
padding:16px 18px;
見出しボタンの内側余白です。上下の16pxを大きくするとボタンが高くなり、左右の18pxを大きくすると文字と端の間隔が広がります。
border-radius:12px;
各アコーディオン項目の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
line-height:1.8;
説明文とアコーディオン本文の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのmax-width:700pxによって、画面幅が狭い場合はアコーディオン全体が自動的に縮小されます。また、画面幅640px以下ではpadding:24px 18px;へ変更して内側余白を抑えているため、スマートフォン・タブレット・PCで利用できます。
コメント