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