最初から全て開いたアコーディオンを作る方法
最初から全て開いたアコーディオンを作る方法を紹介します。このサンプルでは、ページを表示した時点ですべてのアコーディオンが開いた状態になり、必要に応じて各項目をクリックして個別に開閉できます。通常のアコーディオンのように最初は閉じた状態ではなく、最初から内容を見せたい場面に適したレイアウトです。
FAQページで最初からすべての回答を表示したい場合や、サービス内容や利用方法、設定項目などを一覧で見せたい場面に利用できます。利用者はページを開いた瞬間にすべての情報を確認でき、必要な項目だけを閉じることもできるため、閲覧性と操作性を両立できます。HTML・CSS・JavaScriptのみで実装できるため、さまざまなWebサイトへ導入しやすい構成です。
タイトルや説明文、各アコーディオンの見出しや本文はHTMLから変更でき、CSSでは横幅、余白、色、角丸、枠線などのデザインを自由に調整できます。レスポンシブにも対応しているため、スマートフォン・タブレット・PCでも見やすく表示され、最初から内容を表示したいアコーディオンのサンプルとして活用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
ページを表示した時点ですべての項目が開いています。クリックすると個別に開閉できます。
ページを開くとすべての項目が開いた状態で表示されます。各見出しをクリックすると個別に開閉できます。
コードをコピーして使おう！
<!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="initial-open-all-accordion_wrap">
<!-- タイトル -->
<div class="initial-open-all-accordion_title">
全て開いた状態のアコーディオン
</div>
<!-- 説明文 -->
<p class="initial-open-all-accordion_text">
ページを開いた時点で、すべての項目が開いた状態になります。
</p>
<!-- アコーディオン項目 -->
<div class="initial-open-all-accordion_item is-open">
<button class="initial-open-all-accordion_button" type="button">
アコーディオンとは？
</button>
<div class="initial-open-all-accordion_content">
クリックした項目の内容を開閉できるUIです。
</div>
</div>
<!-- アコーディオン項目 -->
<div class="initial-open-all-accordion_item is-open">
<button class="initial-open-all-accordion_button" type="button">
どんな場面で使う？
</button>
<div class="initial-open-all-accordion_content">
FAQや設定画面など、最初から内容を見せたい場面に利用できます。
</div>
</div>
<!-- アコーディオン項目 -->
<div class="initial-open-all-accordion_item is-open">
<button class="initial-open-all-accordion_button" type="button">
使用ファイル
</button>
<div class="initial-open-all-accordion_content">
HTML・CSS・JavaScriptの3ファイルで動作します。
</div>
</div>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。ページを開いた時点ですべてのアコーディオンが開いた状態で表示され、各見出しをクリックすると個別に開閉できます。HTMLではアコーディオンの構造と表示内容を定義し、CSSではデザインや開閉状態の見た目を設定します。JavaScriptではクリックした項目へis-openクラスを付け外しして開閉動作を実現しています。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはアコーディオン全体の構造を作成するファイルです。タイトル、説明文、各項目の見出しと内容を編集できます。初期状態で開きたい項目にはis-openクラスを付けています。
style.cssはアコーディオン全体のデザインを設定するファイルです。横幅、余白、背景色、文字色、枠線、角丸、開閉アイコンなどの見た目を変更できます。
script.jsはアコーディオンの開閉処理を行うファイルです。見出しをクリックするとis-openクラスを切り替え、各項目を開閉します。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置してください。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開くと、すべての項目が開いた状態で表示されます。各見出しをクリックすると、それぞれの項目を自由に開閉できます。
カスタマイズできる内容
index.htmlではタイトル、説明文、各アコーディオンの見出しと本文を自由に変更できます。また、初期状態で閉じたい項目は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;
ボタンの内側余白です。値を大きくするとクリックできる範囲も広がります。
border-radius:12px;
各アコーディオン項目の角丸です。値を変更すると項目の丸みが変わります。
line-height:1.8;
本文の行間です。値を大きくすると文章の間隔が広がり、小さくすると詰まった表示になります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのmax-width:700pxによって画面幅に応じてレイアウトが縮小されます。また、640px以下ではpadding:24px 18px;へ変更して余白を調整しているため、スマートフォン・タブレット・PCでも見やすく利用できます。
コメント