最近見かけるレイアウト・ナビゲーション・スライダー・フォームなどがどうやって実装されているのかのまとめ
Post on:2017年2月15日
Webページやスマホアプリで見かけるレイアウト、ナビゲーション、ボタン、スライダー、フォーム、タイムライン、ボタンなど、CSSを使って実装されたテクニックがまとめられたコンテンツを紹介します。
デザインのアイデアとして、またそれが実装可能かどうか、実装はどうやっているのか、何かあった時にチェックすると便利です。
![最近見かけるレイアウト・ナビゲーション・フォームなどがどうやって実装されているのか](http://coliss.com/wp-content/uploads-201701/2017021501.png)
HTML/CSSの実装がメインで、必要なものにはJavaScriptが使用されています。
- CSSで実装されたタイムライン
- CSSで実装されたマガジン レイアウト 26種類
- CSSで実装されたフォーム 77種類
- CSSで実装されたミュージック プレイヤー 60種類
- CSSで実装されたスライダー 58種類
- CSSで実装されたテキストエフェクト 61種類
- CSSで実装されたボタン 112種類
- CSSで実装されたナビゲーション 110種類
CSSで実装されたタイムライン 46種類
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201701/2017021502-01.png)
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201701/2017021503-01.png)
CSS V-timeline /w time intervals (by Frontend Tips)
垂直軸のタイムラインを実装するテクニック。各パネルのテキスト量が増えるに合わせて、時間のラインも伸びます。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201701/2017021503-02.png)
Flexboxで実装されたレスポンシブ対応のタイムライン。スマホでは垂直軸でコンテンツが配置されます。
CSSで実装されたマガジン レイアウト 26種類
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201701/2017021502-02.png)
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201701/2017021503-03.png)
大胆なレイアウトが面白いだけでなく、表示サイズによって豊富なバリエーションを備えています。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201701/2017021503-04.png)
最近増えてきた分割レイアウト。スマホでは垂直に配置されます。
CSSで実装されたフォーム 77種類
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201701/2017021502-03.png)
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201701/2017021503-05.png)
ミニマルにデザインされたフォーム。フォーカス時のエフェクトがちょうどよいです。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201701/2017021503-06.png)
一度は挑戦したくなるデザインの凝ったフォーム。入力後にラベルがなくなるのは、使いにくいですね。
CSSで実装されたミュージック プレイヤー 60種類
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201701/2017021502-04.png)
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201701/2017021503-07.png)
キャプチャの画像だけでも面白そうですが、さまざまな操作が楽しめます。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201701/2017021503-08.png)
コンセプトはミュージック プレイヤーですが、カード型のレイアウトとして見ても面白いです。
CSSで実装されたスライダー 58種類
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201701/2017021502-05.png)
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201701/2017021503-09.png)
Responsive Image Comparison Slider
ビフォアフターを表示できるコンパリソンスライダー。中央部をドラッグ操作します。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201701/2017021503-10.png)
左右に写真をドラッグすることで、次々に写真が表示されます。
CSSで実装されたテキストエフェクト 61種類
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201701/2017021502-06.png)
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201701/2017021503-11.png)
波のゆったりとアニメーションがテキストでクリップされた美しいエフェクト。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201701/2017021503-12.png)
SVGのアニメーションでテキストを描画します。
CSSで実装されたボタン 112種類
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201701/2017021502-07.png)
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201701/2017021503-13.png)
シンプルなホバーエフェクトもアイデアが面白いです。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201701/2017021503-14.png)
ボタンのさまざまなホバーエフェクトがまとめられています。
CSSで実装されたナビゲーション 110種類
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201701/2017021502-08.png)
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201701/2017021503-15.png)
アニメーションで開閉するドロップダウン。動きが気持ちいいです。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201701/2017021503-16.png)
Simple PureCSS dropdown menu with following subnav
アイテムをアニメーションで表示するドロップダウンで、ハイライトと連続性のあるアニメーションがうまいです。
sponsors