東京都新宿区のWeb制作会社 ウェブラボ株式会社

クリエイターブログ

HTML・CSSだけでアコーディオンを作る

2020.09.18 Posted by

tecmemo2009
こんにちは、クリエイターズメモです。

 

ページが長くなりそうなとき、開閉できるコンテンツ(以下、アコーディオン)を作りたいと思うときってありますよね。

 

ですが「作るの大変そう」、「作れるけど面倒」、「そもそもjavascriptとかよくわからない」などと思ってしまう方も多いかと思います。

 

なので今回はjavascriptを使用しないでさくっとHTML・CSSだけでアコーディオンを作る方法を紹介します。

 

方法は他にもありますが、これが一番簡単な方法だと思います。

 

まず注意点としてこの方法はIEに対応していません、IEでは最初から開いている状態となってしまいます。
以下、対応ブラウザをご確認ください。

 

対応ブラウザ(Can I use…)

 

現状ではIE以外のブラウザはほぼサポートされています。

 

では実装していきます。まずは完成したDEMOをご覧ください。

 

DEMO

 

必要な部分のソースは以下となります。

 

■HTML

アコーディオンにしたい部分を<details>で囲います。
そして、閉じているときに見せたい部分を<summary>で囲います。

 

なんとこれだけ!あとは簡単にCSSで装飾してみたいと思います。

 

■CSS

 

このような感じにしてみました。IEさえ無視してしまえばこんな簡単な方法でも実装できます。
ただ、IE11のサポートがすべて終わるのはかなり先の話ですね。

 

IEに対応させるためのプラグインもいくつかあるみたいなので、必要な方はそちらも合わせてご利用ください。

 

以上、クリエイターズメモでした。

オリエンシートダウンロード

オリエンシートダウンロード

PAGETOP

お問い合わせContact

まずはお気軽にご相談ください。

Web制作・コンサルティング・システム開発に関するお問い合わせ・お見積もり依頼は、
電話・問い合わせフォームより受け付けております。(受付時間:平日9:30〜18:30)

〒160-0004 東京都新宿区四谷4丁目33-2
マーキュリースクエア4F

TEL:03-5366-3277 FAX:03-5366-3278