CSSはやっぱり便利!最近のWebページでよく使うさまざまなコンポーネントを実装するスタイルシートのまとめ
Post on:2016年7月8日
ここ数年でCSSは加速度的に進化し、ひと昔前まではJavaScriptを使用しないと実装できなかったのが、CSSのみで実装できるようになりました。また、サポートすべきブラウザもIE8が除かれるようになり、今まで躊躇していたテクニックも数多く利用できます。
アコーディオンやカルーセル、モーダルボックス、ポップオーバー、フリップ コンテンツなど、JavaScript無しのCSSで実装するテクニックを紹介します。
![最近のWebページでよく使うさまざまなコンポーネントを実装するスタイルシートのまとめ](http://coliss.com/wp-content/uploads-201603/2016070813.png)
You Don't Need Javascript
イラスト: Girls Design Materials
トリガーにはフォーム要素のラジオボタンやチェックボックスが使われており、そのチェックの有無でさまざまなインタラクションを実現しています。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201603/2016070814-01.png)
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201603/2016070814-02.png)
CSSで実装されたカルーセル その1
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201603/2016070814-03.png)
CSSで実装されたカルーセル その2
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201603/2016070814-04.png)
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201603/2016070814-05.png)
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201603/2016070814-06.png)
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201603/2016070814-07.png)
CSSで実装されたゲーム その1
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201603/2016070814-08.png)
CSSで実装されたゲーム その2
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201603/2016070814-09.png)
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201603/2016070814-10.png)
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201603/2016070814-11.png)
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201603/2016070814-12.png)
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201603/2016070814-13.png)
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201603/2016070814-14.png)
sponsors