CSSの参考になるアイデアが満載!2016年スタイルシートを使ったテクニックのまとめ

2016年も、CSSの進化がすごかったですね。
CSSを使ったアニメーション、レスポンシブ対応のレイアウトや配置が簡単にできるFlexbox、ナビゲーションやメニュー、パネルやカードなど、さまざまな素晴らしいアイデアを取り入れたスタイルシートを使ったテクニックを紹介します。

2016年スタイルシートを使ったテクニックのまとめ


各デモは「Run Pen」をクリックすると、動作します。
大きいサイズで楽しみたい時は、その下のリンクをクリックしてください。

See the Pen Puzzle Grid Gallery by Goran Rakic (@golle404) on CodePen.

Puzzle Grid Gallery
ジグソーパズルのピースのようにデザインされた画像ギャラリー。ホバーすると組み合わさって画像が生成されます。

See the Pen CSS responsive grid of hexagons by web-tiki (@web-tiki) on CodePen.

CSS responsive grid of hexagons
レスポンシブ対応の六角形・ヘキサゴンのレイアウト。各パネルのホバーエフェクトも気持ちいいです。

See the Pen Ken Burns Effect fullscreen without js by Nicola Pressi (@ibanez182) on CodePen.

Ken Burns Effect fullscreen without js
画像をフルスクリーンで次々にズームアウトして表示させます。

See the Pen Animation & Layers by Anaislab (@Haru89ka) on CodePen.

Animation & Layers
レイヤーをアニメーションさせ、幻想的なデザインを作り出します。

SUPER BEST 🙀 FLEXBOX GRID 🌭 MIXIN EVR! 🔥
Flexboxのグリッドを使ったカード型レイアウト。それぞれのカードには楽しいアニメーションが実装されています。

See the Pen Flexbox playground by Gabi (@enxaneta) on CodePen.

Flexbox playground
Flexboxでどういうレイアウトができるのか、各プロパティはどのように挙動するのかが分かる遊び場。

See the Pen Responsive Comic Book Layout by Chris Smith (@chris22smith) on CodePen.

Responsive Comic Book Layout
Flexboxで実装されたマンガのコマ割り風にデザインされたカード型レイアウト。

Responsive flexbox grid without media query
Flexboxを使い、Media Queries無しで実装されたレスポンシブ対応の画像ギャラリー。

Using flexbox to make responsive widgets without media queries.
解説記事: Flexboxの特性をうまく使い、Media Queries無しでレスポンシブ対応のレイアウトを作成するCSSのテクニック

CSS-only Sliding Panels using transforms
中央分割のレイアウト。各コンテンツをホバーする時のトランフォームのアイデアが面白いです。

See the Pen SVG background by Tom Carrington (@visualunderground) on CodePen.

SVG Background
コンテンツの区切り線として、折れ線グラフのようなラインを配置します。

See the Pen image hover 63 effects by Mahesh (@maheshambure21) on CodePen.

image hover 63 effects
画像をホバーすると、テキストをアニメーションで表示されるエフェクトが63種類用意された超軽量のスタイルシート。

See the Pen z-index playground by Hornebom (@Hornebom) on CodePen.

z-index playground
プロダクト写真にz-indexを変更して、詳細情報をアニメーションで表示します。

image zoom on hover
シンプルなHTMLで実装、パネルをホバーすると画像だけがズームするエフェクト。
解説記事: シンプルなHTMLで実装できる!パネルの背景画像だけをズームさせるテクニック

See the Pen cube service box by RahulDhiman (@rahuldhiman) on CodePen.

cube service box
軽快なアニメーションで3Dのボックスが回転します。

See the Pen Slider Parallax Effect by Manuel Madeira (@mmadeira) on CodePen.

Slider Parallax Effect
プロダクトの写真にシャドウを与えた、パララックスのエフェクトがかっこいいスライダー。

See the Pen Card by Helen (@semenchenko) on CodePen.

Card
ふわふわしたアニメーションが楽しい、斜めにデザインされたパネル。

See the Pen Pure CSS Responsive Square by James Thomas Almond (@jamestalmond) on CodePen.

Pure CSS Responsive Square
レスポンシブ対応の1:1の正方形を天地左右の中央に配置します。

CSS Responsive Circles with Vertically-Centered Text
レスポンシブ対応のサークルを描き、テキストを天地左右の中央に配置します。

See the Pen Text in a border by Rico Sta. Cruz (@rstacruz) on CodePen.

Text in border
ボーダーの途中にテキストを配置します。

See the Pen Expanding Column Layout by Ettrics (@ettrics) on CodePen.

Expanding Column Layout
ロード時も、ホバー時も、クリック時もアニメーションがかっこいいパネル型レイアウト。

CSS only vertical accordion layout
アニメーションで開閉する水平型のアコーディオン。レスポンシブ対応で、狭い時はナビゲーションが縦になります。

See the Pen css tabs by massimo (@_massimo) on CodePen.

css tabs
デザインも、アニメーションもかわいいタブ型コンテンツ。

See the Pen Sticky Pointers by Utku (@TeorikDeli) on CodePen.

Sticky Pointers
かわいいポインターをナビゲーションに使った省スペースコンテンツ。

See the Pen CSS Accordion by Matthew Scott (@matthewsco1_) on CodePen.

CSS Accordion
パネル全体の高さは可変、幅はレスポンシブ対応、各アイテムの中身は少なかったり多かったり、開閉はアニメーション、そんなアコーディオンをピュアCSSで実装。

See the Pen Rotating menu by Oleg Frolov (@Volorf) on CodePen.

Rotating menu
ナビゲーションの各アイテムをホバーすると、くるくるっと気持ちいいアニメーションで回転させます。

See the Pen CSS Only Expanding Menu by Rab Rennie (@Rabrennie) on CodePen.

CSS Only Expanding Menu
ハンバーガーアイコンをタップすると、コンテンツを押し出すようにナビゲーションが表示されます。

See the Pen Dropdown Menus by Kevin (@kkrueger) on CodePen.

Dropdown Menus
うねうねしたラインが面白いドロップダウン型のナビゲーション。

See the Pen luxury buttons by Daniel Box (@dbox) on CodePen.

luxury buttons
美しいホバーエフェクトを備えたボタン。

See the Pen Three Simple CSS Button Hover Effects by Dronca Raul (@rauldronca) on CodePen.

Three Simple CSS Button Hover Effects
半透明の美しいエフェクトを備えたボタン。

See the Pen Micro Interaction Button by Phil Hoyt (@philhoyt) on CodePen.

Micro Interaction Button
微細な動きを取り入れた、アニメーションが気持ちいいボタン。

See the Pen Buttons css hover effect by deineko (@deineko) on CodePen.

Buttons css hover effect
落書き風デザインのボタンにあった楽しいホバーエフェクト。

See the Pen Adaptive Pricing Table by Alex (@VoloshchenkoAl) on CodePen.

Adaptive Pricing Table
各アイテムをホバーすると、拡大表示される価格表のテーブル。

See the Pen Simple Responsive Table in CSS by Matt Smith (@AllThingsSmitty) on CodePen.

Simple Responsive Table
シンプルなHTMLで実装された、レスポンシブ対応のテーブル。

See the Pen Styling <ol> numbers by Charley Pugmire (@puglyfe) on CodePen.

Styling <ol> numbers
クリーンなHTMLで数値文字参照を使わずに、丸数字を実装するスタイルシートのテクニック。
解説記事: 順序付きリスト、ol要素を丸数字で実装するスタイルシートのテクニック -spanや①は無し

See the Pen CSS only scroll indicator by Mike (@MadeByMike) on CodePen.

CSS only scroll indicator
CSSのみで実装するスクロールのインジケーター。JavaScriptとか使わないと無理だと思っていましたが、できるんですね。

Flat design amusement park svg by Lina (animation powered by CSS)
最後はCSSアニメーションの力作。イラストはSVGで描画されています。

top of page

©2017 coliss