CSSだけでアコーディオンを作ってみた！｜Blog｜株式会社トライム

こんにちわこんばんわ、ちばです。

どうも、社内のAtom使用率9割に含まれてない方の人でーすヽ(ﾟ∀｡)ﾉ
Bracketsとsublimeを使い分けていますが、たまにパッケージの話などが出てくると肩身が狭くなります（笑）

なのでBracketsやsublimeの話が出来るエンジニア募集中です！

さて、本日はCSSだけでアコーディオンを作ったので紹介します。

:targetを使おう

時折見かける:targetですね。

正直今回ブログを書くにあたってサンプルを作るまで仕組みが全くわかっていませんでした。

ですが思いの外簡単な上に、ピュアCSSで様々な事が出来そうです。
以下がサンプルです。

仕組みは単純で、aタグをクリックした際に指定されているIDの要素に:targetとしてフォーカスが当たるので、その箇所だけスタイルが当たるようにCSSを書いてあげるだけです。

まとめ

どうでしょうか？とても簡単にこんな動きが実装できちゃいます。

また、これを応用したらドロワーメニューなども作れたりもします。

このようなセレクタを使って表現の幅が広がって行くのはいいですよね。

Web上での表現の今後が楽しみです。