detailsとsummaryのアコーディオン、hover時のアコーディオン

こんにちは！

マーケティング部受託プロダクトチームのインターン生、村高歩夢です！

本日はアコーディオンという機能を実装しました。

アコーディオンとはナビゲーションメニューの一種で、アコーディオンをクリックまたはホバーしていると隠れている詳細部分が展開し表示されるパーツです。

今回はアコーディオンの作り方を紹介いたします。

今回は二つの作り方を紹介したいと思います。

一つ目はdetailsタグとsummaryタグを用いたアコーディオンメニュー

二つ目は:hoverを利用したアコーディオンメニュー

detailsタグとsummaryタグを用いたアコーディオンメニュー

---

See the Pen flexitem-height by 村高歩夢 (@rapeotdu-the-vuer) on CodePen.

WEBデザインで基本的なアコーディオンの作り方になります。

上記のように記述するだけでCSS、JavaScriptいらずでアコーディオンの実装ができるので工数の削減につながります。

もう少し丁寧に書くと

See the Pen flexitem-height by 村高歩夢 (@rapeotdu-the-vuer) on CodePen.

この方法を知るまで僕は、<input>タグを使って実装してました。

<input>タグのアコーディオンはcssもhtmlも割と面倒臭いので、この方法に出会って感動しましたね笑

そしてさらに素晴らしいのは、アクセシビリティ面とユーザビリティ面、ほかの方法で作成するアコーディオンとは違い何もしなくても

・タブフォーカスとエンターキー・スペースキーでの開閉操作が可能

・スクリーンリーダーが開閉状態について適切に読み上げてくれる

・サイト内検索時、検索した単語を含むアコーディオンが開き、中の単語に直接移動できるため、ユーザが目的の単語を見逃すことがない

要するに、いいこと尽くしなんですよ。本当は全部のアコーディオンにこの方法を使いたいんですが、残念ながらそう上手くはいかないんですよね

この方法だとアコーディオンをクリックしないと詳細が展開しないんです。

したがって、ホバー時に展開するアコーディオンを実装したい場合は他の方法で作成する必要があります。

:hoverを利用したアコーディオンメニュー

---

See the Pen ホバーで開くアコーディオン by 村高歩夢 (@rapeotdu-the-vuer) on CodePen.

こちらであればマウスホバー時にも詳細が開くようになりました。

しかし、HTMLタグだけでは作成できないし、上記のコードでは先のアクセシビリティ面、ユーザビリティ面を対策できていないので、物足りなさがありますね。今後、この辺をもう少し勉強していきたいです。

ちょっとhover時のアコーディングのデザインダサいか...

---

■ガーディアン主力ソリューション→OWLet

■新サービスリリースのお知らせ

WEB業界を変える！育てて成果を上げるサブスク型HPサービス

→SCSC (スクスク)

ガーディアンのインターン制度→こちら

村高歩夢の紹介ページ→こちら