2015年、Web制作者が押さえておきたいCSSの各種リセット、アニメーション、フレームワーク、アイコンのまとめ

制作時に欠かせないリセット用のCSS、ページのグリッドやレイアウト・コンポーネントが用意されたフレームワーク、クリック・タップやホバーやスクロールを楽しませるアニメーション、モバイルにもフレンドリーなCSSでつくられたアイコンなど、ゼロから用意するのはかなり大変なCSSの便利なフレームワークを紹介します。

リセット用のCSSはこの3種類

HTMLの各要素のブラウザごとに異なる差異をなくし、意図した通りに実装できるようスタイルをリセットするスタイルシート。

サイトのキャプチャ

Reset CSS 2.0

HTMLの各要素のmarginやpaddingやborderなどをリセットし、各要素のスタイルを消去するスタイルシート。v2.0はHTML5対応。リリースからけっこう経ちますが、人気のリセット用CSS。
参考:2012年最も人気のあったCSSリセットとどれを使えばいいかの指針、と上手に使うポイント

サイトのキャプチャ

normalilze.css
normalize.css -GitHub

リセットとは異なり、スタイルを消去するよりむしろ有用なデフォルトのスタイルを利用するスタイルシート。後述するさまざまなフレームワークにも利用されており、最も人気が高いスタイルシートです。
参考:CSSリセットとは異なる、Normalize.cssの特徴や使い方などの解説 -About normalize.css

サイトのキャプチャ

sanitize.css
sanitize.css -GitHub

上記二つはリリースからけっこう経つため、モバイル対応など最近の実装スタイルに合わない面もあります。normalize.cssの共同開発者が2015年新たにリリースしたスタイルシートです。
参考:reset.cssとnormalize.cssに続く新しいリセット用CSS、モバイル対応・最近の実装スタイルを考慮したスタイルシート -sanitize.css

レスポンシブ対応の定番フレームワーク

2015年には4がリリース予定のBootstrapをはじめ、Foundationなど、多くのユーザーが利用している人気の高い定番ともいえるフレームワーク。

サイトのキャプチャ

Bootstrap
Bootstrap -GitHub

Bootstrap 4ではグリッドシステムがより柔軟になり、アニメーションを伴ったコンポーネントも多数用意される予定です。「Bootstrap docs」らへんを見ていると情報がつかめると思います。

フレームワークを使うと似たデザインになってしまうのでは? Bootstrapを上手く使っているサイトもたくさんあります。
参考:Bootstrapで作られたとは思えないほど洗練されたデザインのWebサイトのまとめ

サイトのキャプチャ

Foundation
Foundation -GitHub

サイトのキャプチャ

Semantic UI
Semantic UI -GitHub

サイトのキャプチャ

Pure.css
Pure.css -GitHub

サイトのキャプチャ

Primer
Primer -GitHub

Bootstrapを手がけたMark Otto氏の2015年の新しいGitHub製のフレームワーク。Bootstrapのようなフロントエンド用のフレームワークで、デザインはGitHubライクです。

Material Designに対応したフレームワーク

Material Designを使用したさまざまなコンポーネントが利用できるフレームワーク。

サイトのキャプチャ

material ui
material ui -GitHub

サイトのキャプチャ

Materialize
Materialize -GitHub
参考:Webページでよく使うさまざまなコンポーネントが簡単に利用できるCSSベースのフレームワーク -Materialize

さまざまなアニメーションが簡単に実装できるCSS

要素にclassを付与するだけでさまざまなアニメーションが簡単に実装でき、スクリプトを併用するとスクロールをトリガーにした縦長ページのインタラクションも実装できます。

サイトのキャプチャ

Animate.css
Animate.css -GitHub

このスタイルシートをインクルードしているスクリプトは、非常に多いですね。
参考:classを加えるだけで多彩なアニメーションが簡単に使用できるスタイルシート -Animate.css

サイトのキャプチャ

Effeckt.css
Effeckt.css -GitHub

サイトのキャプチャ

Hover.css
Hover.css -GitHub
参考:楽しい動きが満載!ボタンや画像用の40種類以上のホバーエフェクトがまとめられたスタイルシート -Hover.css

サイトのキャプチャ

CSShake
CSShake -GitHub

ぷるぷるするアニメーションが気持ちいいので、お試しあれ!

かわいいアニメーションを使ったローダー

同じ動きを繰り返すローダーやスピナーもさまざまな楽しくてかわいいアニメーションが揃っています。

サイトのキャプチャ

SpinKit
SpinKit -GitHub

サイトのキャプチャ

Loader.css
loader.css -GitHub

使いやすいアイコンフォント・Pure CSSのアイコン

フォントやPure CSSのアイコンはカラーやサイズを自由に設定でき、レスポンシブに非常に相性がよいです。

サイトのキャプチャ

Font Awesome
Font Awesome -GitHub
参考:アイコンのデザインに合ったかわいい動きをclassを加えるだけで実装できるスタイルシート -Font Awesome Animation

サイトのキャプチャ

Icono
Icono -GitHub

サイトのキャプチャ

Pure CSS GUI Icons

サイトのキャプチャ

CSS3 Icons

サイトのキャプチャ

One div

職人芸のような見事な作品は、すべてdiv一つで実装されています。

sponsors

top of page

©2018 coliss