Light TALK Plus+ vol.30「簡易アコーディオン」

「Light TALK Plus+」とは…

アルバイトが気になった今ホットなWEBニュースやティップスをお届けするコーナーです。
今回のテーマは「簡易アコーディオン」です!

Webデザインでアコーディオンを実装する際、以前はCSSやJavaScriptを用いていました。
しかし、HTML5では新しく追加されたタグ「details」「summary」で簡単にアコーディオンを実装することができます。

「details」と「summary」

「details」と「summary」は以下の意味を示すタグになります。

「details」

備考や操作手段などの詳細情報を示すさいに使用します。

「summary」

親要素となる「details」の要素内容の説明を表します。

サンプル

実際に「details」と「summary」を用いたコード実装したものを以下に表示させます。

コード

<details>
<summary>タイトル1</summary>
タイトル1の要素内容を表します。
</details>

<details>
<summary>タイトル2</summary>
タイトル2の要素内容を表します。
</details>

<details>
<summary>タイトル3</summary>
タイトル3の要素内容を表します。
</details>

実際の画面

タイトル1 タイトル1の要素内容を表します。
タイトル2 タイトル2の要素内容を表します。
タイトル3 タイトル3の要素内容を表します。

このようにHTML5だけでアコーディオンを実装することができました。

CSSでカスタマイズ

CSSでカスタマイズすることも可能です。

タイトル1

タイトル1の要素内容を表します。

タイトル2

タイトル2の要素内容を表します。

タイトル3

タイトル3の要素内容を表します。

開閉時のアイコンの切り替えもCSSで制御することが可能です。

.custom-accordion details summary::before {
content: ‘閉じている状態のアイコン’;
}

.custom-accordion details[open] summary::before {
content: ‘開いている状態のアイコン’;
}

※注意

「details」と「summary」はブラウザ「Internet Explorer」には対応していないので使用する際には注意が必要です。

いかがだったでしょうか?
「details」と「summary」はhtml5だけで実装でき、難しいコードの記述もないので気軽に使うことができます。
サイト制作に生かしていくことができれば、制作時間の短縮にもつながるので注目のタグだと思います。

Light Webからのお知らせ

ライトウェブはプライバシーマークを取得しました!
今までも個人情報を取り扱う案件に携わって参りましたが、
より安心してお任せいただけるようになりました。
今後ともライトウェブをよろしくお願い致します!