2018.11.06

表現力を上げるCSSアコーディオン15選

CSSを使ったアコーディオンと言ってもシンプルなものもあれば、ちょっとした動きを取り入れることでまったくもって違ったものになり、表現力が増します。そんなわけで今回はCSSアコーディオンで表現力をあげるためのサンプルをまとめてみました。

目次
ファンキーなFunky Pure CSS Accordion
多段構造によるMulti-level Accordion
動きがオシャレCSS + HTML only Accordion Element
シンプル＆安定なAccordion Menu
キレのある動きAccordion – React
ハンバーガーメニューhamburger slide accordion menu
明暗差で読ませるAccordion Profile
サイドメニューAccordion Menu
横に開くPure CSS Horizontal Accordion
横型アコーディオンAccordion Image Gallery
クリックで開く横型アコーディオンExpanding Horizontal Accordion in React
動きに注目したいSimple Flat UI CSS Accordion
立体感があるPure HTML and CSS Accordion
光るAmazing Accordion
見た目が一味違うCSS Accordion

ファンキーなFunky Pure CSS Accordion
多段構造によるMulti-level Accordion
動きがオシャレCSS + HTML only Accordion Element
シンプル＆安定なAccordion Menu
キレのある動きAccordion – React
ハンバーガーメニューhamburger slide accordion menu
明暗差で読ませるAccordion Profile
サイドメニューAccordion Menu
横に開くPure CSS Horizontal Accordion
横型アコーディオンAccordion Image Gallery
クリックで開く横型アコーディオンExpanding Horizontal Accordion in Reactt
動きに注目したいSimple Flat UI CSS Accordion
立体感があるPure HTML and CSS Accordion
光るAmazing Accordion
見た目が一味違うCSS Accordion

ファンキーなFunky Pure CSS Accordion

アニメーションがファンキーなアコーディオンです。この画面で見づらい場合はリンク先にアクセスしてみてください。
See the Pen <a href='https://codepen.io/jcoulterdesign/pen/OMmZPd/'>Funky Pure CSS Accordion</a> by Jamie Coulter (<a href='https://codepen.io/jcoulterdesign'>@jcoulterdesign</a>) on <a href='https://codepen.io'>CodePen</a>.

多段構造によるMulti-level Accordion

多段構造によるアコーディオンメニューです。
See the Pen <a href='https://codepen.io/rbobrowski/pen/likvA/'>Multi-level Accordion</a> by Ryan Bobrowski (<a href='https://codepen.io/rbobrowski'>@rbobrowski</a>) on <a href='https://codepen.io'>CodePen</a>.

動きがオシャレCSS + HTML only Accordion Element

シンプルですが、全体的に動きがオシャレな印象を受けます。
See the Pen <a href='https://codepen.io/abergin/pen/ihlDf/'>CSS + HTML only Accordion Element</a> by Alex Bergin (<a href='https://codepen.io/abergin'>@abergin</a>) on <a href='https://codepen.io'>CodePen</a>.

シンプル＆安定なAccordion Menu

左サイドにアイコン、右サイドには開閉のための矢印でナビゲーションしているシンプル＆安定のアコーディオンです。
See the Pen <a href='https://codepen.io/Creaticode/pen/ecAmo/'>Menú despegable estilo acordeón | Accordion Menu</a> by Agustin Ortiz (<a href='https://codepen.io/Creaticode'>@Creaticode</a>) on <a href='https://codepen.io'>CodePen</a>.

キレのある動きAccordion – React

動きにキレがあるのと、よく見ると右サイドの矢印の動きがオーバー気味に回って反動で戻るあたりにもこだわりを感じさせます。
See the Pen <a href='https://codepen.io/matthewvincent/pen/EKKeyX/'>Accordion – React</a> by Matthew Vincent (<a href='https://codepen.io/matthewvincent'>@matthewvincent</a>) on <a href='https://codepen.io'>CodePen</a>.

ハンバーガーメニューhamburger slide accordion menu

ハンバーガーメニューとアコーディオンのコンボメニューです。クリック後の見出し色の変化により現在位置を把握できたり、右サイドの開閉アイコンの細かい動きもチェックしておきたい一品です。
See the Pen <a href='https://codepen.io/slyka85/pen/LbXYKQ/'>hamburger slide accordion menu</a> by Anya Melnyk (<a href='https://codepen.io/slyka85'>@slyka85</a>) on <a href='https://codepen.io'>CodePen</a>.

明暗差で読ませるAccordion Profile

明暗差で読ませる箇所に集中できるデザインに仕上がっていて、思わず使いたくなります。
See the Pen <a href='https://codepen.io/khadkamhn/pen/oXORGZ/'>Accordion Profile</a> by Mohan Khadka (<a href='https://codepen.io/khadkamhn'>@khadkamhn</a>) on <a href='https://codepen.io'>CodePen</a>.

サイドメニューAccordion Menu

ポピュラーな使い方の1つではないでしょうか。
See the Pen <a href='https://codepen.io/maggiben/pen/rCIFu/'>Accordion Menu</a> by Benjamin (<a href='https://codepen.io/maggiben'>@maggiben</a>) on <a href='https://codepen.io'>CodePen</a>.

横に開くPure CSS Horizontal Accordion

横型に開くアコーディオンメニューですが、画面サイズやマウスオーバー時のカーソルの位置によっては使いづらい場合があります。
See the Pen <a href='https://codepen.io/rrenula/pen/DGrhf/'>Pure CSS Horizontal Accordion</a> by Aysha Anggraini (<a href='https://codepen.io/rrenula'>@rrenula</a>) on <a href='https://codepen.io'>CodePen</a>.

横型アコーディオンAccordion Image Gallery

マウスオーバーした画像をさらに拡大表示させる動きを見せています。
See the Pen <a href='https://codepen.io/stefcharle/pen/Gydvbx/'>Accordion Image Gallery</a> by Stefan C. (<a href='https://codepen.io/stefcharle'>@stefcharle</a>) on <a href='https://codepen.io'>CodePen</a>.

クリックで開く横型アコーディオンExpanding Horizontal Accordion in React

マウスオーバー時の誤作動を防ぐという意味では、クリックを採用するのも一つの手かもしれません。
See the Pen <a href='https://codepen.io/nevernotsean/pen/YpmWoM/'>Expanding Horizontal Accordion in React</a> by Sean (<a href='https://codepen.io/nevernotsean'>@nevernotsean</a>) on <a href='https://codepen.io'>CodePen</a>.

動きに注目したいSimple Flat UI CSS Accordion

十字のアイコンの動き、メニューを開いたあとの中の要素の動きに変化があります。
See the Pen <a href='https://codepen.io/samsurysites/pen/qxHJK/'>Simple Flat UI CSS Accordion</a> by Virlyz ID (<a href='https://codepen.io/samsurysites'>@samsurysites</a>) on <a href='https://codepen.io'>CodePen</a>.

立体感があるPure HTML and CSS Accordion

メニュークリック後の要素に立体感があり、あまり例を見ない使い方です。
See the Pen <a href='https://codepen.io/chrisota/pen/qbVMva/'>Pure HTML and CSS Accordion</a> by Chris Ota (<a href='https://codepen.io/chrisota'>@chrisota</a>) on <a href='https://codepen.io'>CodePen</a>.

光るAmazing Accordion

開閉が右サイドの十字アイコンのクリックでしかできないため、UI的には使いづらいのでもう少しアレンジが必要になるかと思いますが、使い所によっては影と光をうまく使ったアコーディオンの面白い表現ではないかと思います。
See the Pen <a href='https://codepen.io/Siddharth11/pen/GgmgvP/'>Amazing Accordion</a> by Siddharth Parmar (<a href='https://codepen.io/Siddharth11'>@Siddharth11</a>) on <a href='https://codepen.io'>CodePen</a>.

見た目が一味違うCSS Accordion

アコーディオンと言えば連なっているものを連想しがちですが、このサンプルでは連なりを切り離すことで一味違った見せ方をしています。上記のサンプルとうまく組み合わせるとまた違うものができそうですね。
See the Pen <a href='https://codepen.io/villa7/pen/grPddp/'>CSS Accordion</a> by Theodore Kluge (<a href='https://codepen.io/villa7'>@villa7</a>) on <a href='https://codepen.io'>CodePen</a>.