最近見かけるレイアウト・ナビゲーション・スライダー・フォームなどがどうやって実装されているのかのまとめ

Webページやスマホアプリで見かけるレイアウト、ナビゲーション、ボタン、スライダー、フォーム、タイムライン、ボタンなど、CSSを使って実装されたテクニックがまとめられたコンテンツを紹介します。

デザインのアイデアとして、またそれが実装可能かどうか、実装はどうやっているのか、何かあった時にチェックすると便利です。

最近見かけるレイアウト・ナビゲーション・フォームなどがどうやって実装されているのか

HTML/CSSの実装がメインで、必要なものにはJavaScriptが使用されています。

CSSで実装されたタイムライン 46種類

サイトのキャプチャ

CSSで実装されたタイムライン 46種類

デモのキャプチャ

CSS V-timeline /w time intervals (by Frontend Tips)

垂直軸のタイムラインを実装するテクニック。各パネルのテキスト量が増えるに合わせて、時間のラインも伸びます。

デモのキャプチャ

Flexbox Timeline Layout

Flexboxで実装されたレスポンシブ対応のタイムライン。スマホでは垂直軸でコンテンツが配置されます。

CSSで実装されたマガジン レイアウト 26種類

サイトのキャプチャ

CSSで実装されたマガジン レイアウト 26種類

デモのキャプチャ

Magazine Layout

大胆なレイアウトが面白いだけでなく、表示サイズによって豊富なバリエーションを備えています。

デモのキャプチャ

Magazine Layout 1

最近増えてきた分割レイアウト。スマホでは垂直に配置されます。

CSSで実装されたフォーム 77種類

サイトのキャプチャ

CSSで実装されたフォーム 77種類

デモのキャプチャ

Minimalistic Form

ミニマルにデザインされたフォーム。フォーカス時のエフェクトがちょうどよいです。

デモのキャプチャ

Vintage Inspired Contact Form

一度は挑戦したくなるデザインの凝ったフォーム。入力後にラベルがなくなるのは、使いにくいですね。

CSSで実装されたミュージック プレイヤー 60種類

サイトのキャプチャ

CSSで実装されたミュージック プレイヤー 60種類

デモのキャプチャ

Music app

キャプチャの画像だけでも面白そうですが、さまざまな操作が楽しめます。

デモのキャプチャ

Music Player Design In CSS

コンセプトはミュージック プレイヤーですが、カード型のレイアウトとして見ても面白いです。

CSSで実装されたスライダー 58種類

サイトのキャプチャ

CSSで実装されたスライダー 58種類

デモのキャプチャ

Responsive Image Comparison Slider

ビフォアフターを表示できるコンパリソンスライダー。中央部をドラッグ操作します。

デモのキャプチャ

Elastic Slider

左右に写真をドラッグすることで、次々に写真が表示されます。

CSSで実装されたテキストエフェクト 61種類

サイトのキャプチャ

CSSで実装されたテキストエフェクト 61種類

デモのキャプチャ

Animated wave clipped by text

波のゆったりとアニメーションがテキストでクリップされた美しいエフェクト。

デモのキャプチャ

Animating SVG text

SVGのアニメーションでテキストを描画します。

CSSで実装されたボタン 112種類

サイトのキャプチャ

CSSで実装されたボタン 112種類

デモのキャプチャ

Fancy Button Menu

シンプルなホバーエフェクトもアイデアが面白いです。

デモのキャプチャ

Button Hover Effect

ボタンのさまざまなホバーエフェクトがまとめられています。

CSSで実装されたナビゲーション 110種類

サイトのキャプチャ

CSSで実装されたナビゲーション 110種類

デモのキャプチャ

Swanky Pure CSS Drop Down

アニメーションで開閉するドロップダウン。動きが気持ちいいです。

デモのキャプチャ

Simple PureCSS dropdown menu with following subnav

アイテムをアニメーションで表示するドロップダウンで、ハイライトと連続性のあるアニメーションがうまいです。

sponsors

top of page

©2018 coliss