上方向に開くアコーディオンの作り方
上方向に開くアコーディオンの作り方を紹介します。このサンプルでは、見出しをクリックすると通常のアコーディオンとは反対に、内容が見出しの上側へ表示されるUIをHTML・CSS・JavaScriptで作成します。もう一度見出しをクリックすると内容が閉じるため、必要な情報だけを開閉しながら確認できます。
画面下部に配置するメニューや、見出しより下側のスペースを使わずに内容を表示したい場所などに利用できます。各項目は個別に開閉できるため、複数のアコーディオンを並べた場合でも確認したい項目だけを表示できます。開いている項目では右側の「＋」が「－」へ切り替わり、現在の開閉状態も分かりやすく確認できます。
HTMLでは見出しや表示内容を変更でき、CSSでは横幅、余白、背景色、枠線、角丸、文字色などを調整できます。JavaScriptではクリックした項目へクラスを付け外しするシンプルな構成になっています。画面幅に合わせて横幅が調整されるため、スマートフォン・タブレット・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="accordion-open-upward_wrap">
<!-- タイトル -->
<div class="accordion-open-upward_title">
上方向に開くアコーディオン
</div>
<!-- 説明文 -->
<p class="accordion-open-upward_text">
見出しをクリックすると、内容が見出しの上側に表示されます。
</p>
<!-- 1つ目の項目 -->
<div class="accordion-open-upward_item">
<button class="accordion-open-upward_button" type="button">
アコーディオンとは？
</button>
<div class="accordion-open-upward_content">
クリックした項目の内容を、見出しの上側に表示できるUIです。
</div>
</div>
<!-- 2つ目の項目 -->
<div class="accordion-open-upward_item">
<button class="accordion-open-upward_button" type="button">
どんな場面で使う？
</button>
<div class="accordion-open-upward_content">
画面下部のメニューや、下側のスペースを使わずに内容を表示したい場所で使えます。
</div>
</div>
<!-- 3つ目の項目 -->
<div class="accordion-open-upward_item">
<button class="accordion-open-upward_button" type="button">
必要なファイルは？
</button>
<div class="accordion-open-upward_content">
HTML、CSS、JavaScriptの3つのファイルで作成できます。
</div>
</div>
</div>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでアコーディオンの見出しと内容を配置し、CSSのflex-direction:column-reverse;を使って内容が見出しの上側へ表示される構成にしています。JavaScriptでは見出しをクリックしたときにis-openクラスを切り替え、各項目を個別に開閉します。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはアコーディオン全体を構成するファイルです。「上方向に開くアコーディオン」のタイトル、説明文、各項目の見出し、開いたときに表示する内容を変更できます。項目を追加する場合は、accordion-open-upward_itemのまとまりを追加します。
style.cssはアコーディオンのデザインと上方向へ開く配置を設定するファイルです。全体の横幅、余白、背景色、枠線、角丸、文字色などを変更できます。各項目に設定したflex-direction:column-reverse;によって、内容が見出しの上側へ配置されます。閉じているときは内容を非表示にし、is-openクラスが付いた項目だけを表示します。
script.jsはアコーディオンの開閉を行うファイルです。すべての見出しボタンを取得し、クリックされた項目のis-openクラスを付け外しします。各項目は独立しているため、開きたい項目だけを個別に操作できます。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを同じ階層で配置します。その後、sample/index.htmlをブラウザで開いてください。アコーディオンの見出しをクリックすると、その項目の内容が見出しの上側へ表示されます。もう一度同じ見出しをクリックすると内容が閉じます。開いている項目では右側の記号が「＋」から「－」へ切り替わります。
カスタマイズできる内容
index.htmlではタイトル、説明文、各アコーディオンの見出し、開いたときに表示する文章を変更できます。用途に合わせてFAQ、説明項目、案内メニューなどの内容へ変更できます。
style.cssではアコーディオン全体の横幅、余白、背景色、枠線、角丸、文字色、項目同士の間隔などを変更できます。また、「＋」「－」の記号や色もCSSから変更できます。上方向へ表示する配置はflex-direction:column-reverse;で設定されています。
数値調整
style.css
max-width:700px;
アコーディオン全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
アコーディオン全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
アコーディオン全体の内側余白です。値を大きくすると内容と外枠の間隔が広がります。
border-radius:18px;
アコーディオン全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
タイトルの文字サイズです。値を大きくするとタイトルが大きく表示されます。
margin:0 0 24px;
説明文の下側余白です。24pxを大きくすると最初のアコーディオンとの間隔が広がります。
margin-bottom:12px;
各アコーディオン項目の下側余白です。値を大きくすると項目同士の間隔が広がります。
border-radius:12px;
各アコーディオン項目の角丸です。値を大きくすると丸みが強くなります。
padding:16px 18px;
見出しボタンの内側余白です。上下の16pxを大きくするとボタンが高くなり、左右の18pxを大きくすると文字と端の間隔が広がります。
padding:18px 18px 0;
開いた内容部分の内側余白です。最初の18pxは上側、2つ目の18pxは左右の余白を設定しています。値を大きくすると内容周辺の間隔が広がります。
line-height:1.8;
説明文とアコーディオン内容の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxによって、画面幅に合わせてアコーディオン全体が縮小されます。また、画面幅640px以下ではpadding:24px 18px;へ変更して内側の余白を小さくしているため、スマートフォン・タブレット・PCで利用できます。
コメント