2015年、Web制作者が押さえておきたいCSSの各種リセット、アニメーション、フレームワーク、アイコンのまとめ
Post on:2015年4月22日
sponsors
制作時に欠かせないリセット用のCSS、ページのグリッドやレイアウト・コンポーネントが用意されたフレームワーク、クリック・タップやホバーやスクロールを楽しませるアニメーション、モバイルにもフレンドリーなCSSでつくられたアイコンなど、ゼロから用意するのはかなり大変なCSSの便利なフレームワークを紹介します。
- リセット用のCSSはこの3種類
- レスポンシブ対応の定番フレームワーク
- Material Designに対応したフレームワーク
- さまざまなアニメーションが簡単に実装できるCSS
- かわいいアニメーションを使ったローダー
- 使いやすいアイコンフォント・Pure CSSのアイコン
リセット用のCSSはこの3種類
HTMLの各要素のブラウザごとに異なる差異をなくし、意図した通りに実装できるようスタイルをリセットするスタイルシート。
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 4ではグリッドシステムがより柔軟になり、アニメーションを伴ったコンポーネントも多数用意される予定です。「Bootstrap docs」らへんを見ていると情報がつかめると思います。
フレームワークを使うと似たデザインになってしまうのでは？ Bootstrapを上手く使っているサイトもたくさんあります。
参考：Bootstrapで作られたとは思えないほど洗練されたデザインのWebサイトのまとめ
Semantic UI
Semantic UI -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
ぷるぷるするアニメーションが気持ちいいので、お試しあれ！
かわいいアニメーションを使ったローダー
同じ動きを繰り返すローダーやスピナーもさまざまな楽しくてかわいいアニメーションが揃っています。
使いやすいアイコンフォント・Pure CSSのアイコン
フォントやPure CSSのアイコンはカラーやサイズを自由に設定でき、レスポンシブに非常に相性がよいです。
Font Awesome
Font Awesome -GitHub
参考：アイコンのデザインに合ったかわいい動きをclassを加えるだけで実装できるスタイルシート -Font Awesome Animation
職人芸のような見事な作品は、すべてdiv一つで実装されています。
sponsors
