【コピペで簡単！】HTMLのみで作れる！クリックで開閉するアコーディオン【details＆summary】
クリックで開閉するアコーディオンをJavaScriptなどを使わずに、HTMLの<details>タグと<summary>タグを利用して作る方法をご紹介します。
早速ですが、今回作るアコーディオンの完成品から見ていきます。
タイトル部分を押すと開閉します。
↓完成品はこちら↓
タイトル1
ここに文章を書いて下さい。
タイトル２
- ・リストも使えます。
- ・リストも使えます。
↓これを作っているHTMLはこちら↓
<details>
<summary style="cursor: pointer; transition: 0.2s; background:#c4bdb2; margin-top:20px; padding: 10px;" onmouseout="this.style.background='#c4bdb2';" onmouseover="this.style.background='#ede4d8';">タイトル１</summary>
<p style="background:#f3eddb; margin-top: 0; padding: 10px;">ここに文章を書いて下さい。</p>
</details>
<details>
<summary style="cursor: pointer; transition: 0.2s; background:#c4bdb2; margin-top: 20px; padding: 10px;" onmouseout="this.style.background='#c4bdb2';" onmouseover="this.style.background='#ede4d8';">タイトル２</summary>
<ul style="list-style: none; background:#f3eddb; margin-top: 0; padding: 10px;">
<li>・リストも使えます。</li>
<li>・リストも使えます。</li>
</ul>
</details>本来CSSはCSSファイルに記述するのですが、上記HTMLでは直接 CSSを記述しました。
HTMLのみで書かれているため、ワードプレスなどで記事を書く際もCSSファイルを触る事なく「カスタムHTML」にコピペするだけで簡単にご利用いただけます。
ここから先は、detailsとsummaryタグの基本と、CSSでどのようなカスタマイズができるのかを順追ってご紹介していきます。
- detailsとsummaryタグの基本的な使い方
- CSSでカスタマイズしてみよう
detailsとsummaryタグの基本的な使い方
HTMLの<details>タグと<summary>タグを組み合わせることで、クリックによって開閉するアコーディオンを簡単に作成することが出来ます。
以下がタグの説明です。
以下HTMLのサンプルコードになります。
<details>
<summary>HTMLとは？</summary>
<p>HTMLとは「Hyper Text Markup Language」のことで、WEBページを作成するための言語です。</p>
</details>
<details>
<summary>HTMLの基本</summary>
<ul>
<li>HTMLの構造</li>
<li>HTMLのタグ一覧</li>
</ul>
</details>詳細文の中には、段落やリストなどのタグも利用できます。
実行結果は以下のようになり、クリックすると詳細文が表示されます。
HTMLとは？
HTMLとは「Hyper Text Markup Language」のことで、WEBページを作成するための言語です。
HTMLの基本
- ・HTMLの構造
- ・HTMLのタグ一覧
シンプルな構造のHTMLで簡単に実装出来ますね。
また、はじめから詳細文を表示させたい時は details タグに open 属性を指定しましょう。
サンプルでは１行目の <details open> 部分です。
<details open>
<summary>HTMLとは？</summary>
<p>HTMLとは「Hyper Text Markup Language」のことで、WEBページを作成するための言語です。</p>
</details>
<details>
<summary>HTMLの基本</summary>
<ul>
<li>HTMLの構造</li>
<li>HTMLのタグ一覧</li>
</ul>
</details>HTMLとは？
HTMLとは「Hyper Text Markup Language」のことで、WEBページを作成するための言語です。
HTMLの基本
- ・HTMLの構造
- ・HTMLのタグ一覧
CSSでカスタマイズしてみよう
デフォルトのスタイルでは、タイトル部分にマウスオーバーした際、テキスト選択時のカーソルなのでちょっと分かりにくいです。
そこでCSSを使い、通常のリンクをクリックする時と同じように指マークのものに変更する事で、直感的に「あ！ここはクリックできるんだな」と、分かりやすくなります。
以下をCSSに指定します。
summary {
cursor: pointer;
}デフォルトで表示される三角の矢印（ ▶︎ ）ではなく、違うリストマークにしたい場合は画像を読み込むことで変更可能です。
Firefoxの場合は、「list-style-image」を使って画像表示できます。
ChromeやSafariの場合は、ベンダープレフィックス「-webkit- 」を使って、まずデフォルトの三角（ ▶︎ ）を「color: transparent;」で非表示（透明）にしてから背景画像として表示させます。
必要に応じて位置やサイズの設定も可能です。
/* Firefoxの場合 */
summary {
list-style-image: url(画像パス);
}
/* Chrome・Safariの場合 */
summary::-webkit-details-marker {
color: transparent;
background: url(画像パス) no-repeat center;
}ホバー時に背景色が変わると、クリックできると予測しやすいです。
summary {
cursor: pointer;
transition: 0.3s;
}
/* ホバー時*/
summary:hover {
cursor: pointer;
background-color: #c4bdb2;
}HTMLとは？
HTMLとは「Hyper Text Markup Language」のことで、WEBページを作成するための言語です。
HTMLの基本
- HTMLの構造
- HTMLのタグ一覧
また、開いたときの背景色を変えたい場合は、details要素に対しopen属性を指定することで可能です。
details[open] {
background: #ede4d8;
}
※IEに関しては、2022年6月16日（日本時間）サポート終了の発表がありました。一般ユーザーが利用するWindows10のInternet Explorerはこれによりサポート対象外になったので気兼ねなく利用できます。
まとめ
Webサイトやブログを制作していると、長文や補足説明などはアコーディオンにし、見た目をスッキリさせたい事があるかと思います。そんな時に使えるHTMLの details と summary タグ。CSSなしでも実装可能ですが、CSSを加える事でユーザーにとってより分かりやすく、見た目にも素敵な表現ができるかと思います。
↓おすすめ記事↓
【コピペで簡単！】HTMLのみで作った素材♪