CSSだけでアコーディオンを作ってみた!|Blog|株式会社トライム
CSSだけでアコーディオンを作ってみた!
2016.11.11
![記事サムネイル](https://contents.try-m.co.jp/wp-content/uploads/2016/11/music_accordion.png)
こんにちわこんばんわ、ちばです。
どうも、社内のAtom使用率9割に含まれてない方の人でーすヽ(゚∀。)ノ
Bracketsとsublimeを使い分けていますが、たまにパッケージの話などが出てくると肩身が狭くなります(笑)
なのでBracketsやsublimeの話が出来るエンジニア募集中です!
さて、本日はCSSだけでアコーディオンを作ったので紹介します。
:targetを使おう
時折見かける:targetですね。
正直今回ブログを書くにあたってサンプルを作るまで仕組みが全くわかっていませんでした。
ですが思いの外簡単な上に、ピュアCSSで様々な事が出来そうです。
以下がサンプルです。
仕組みは単純で、aタグをクリックした際に指定されているIDの要素に:targetとしてフォーカスが当たるので、その箇所だけスタイルが当たるようにCSSを書いてあげるだけです。
まとめ
どうでしょうか?とても簡単にこんな動きが実装できちゃいます。
また、これを応用したらドロワーメニューなども作れたりもします。
このようなセレクタを使って表現の幅が広がって行くのはいいですよね。
Web上での表現の今後が楽しみです。
Contact
お問い合わせ
トライムは常にお客様へ寄りっ沿った提案をさせていただきます。
自社のEC売上の拡大や人材不足などのお客様のデジタル上の課題を、
様々なアプローチにより解決するお手伝いをいたします!
お気軽にお問い合わせください。
03-6403-3259
受付:10:00 - 19:00
![ロゴ](/wp-content/themes/trym/images/top/contact-logo.png)