2016年に取り入れていきたい、CSSのテクニック・ライブラリのまとめ

2016年は、1月12日に古いバージョンのIEのサポートが終了します。
IE8, 9, 10などの古いブラウザへの対応に時間を割く必要がなくなり、今まで躊躇していたCSSやJavaScriptが多くの人に利用されるようになると思います。

これからどんどん取り入れていきたいCSSのテクニック・ライブラリを紹介します。

2016年に取り入れていきたい、CSSのテクニック・ライブラリのまとめ

イラスト: Girls Design Materials

2016年1月12日からIEの対応は実質IE11に

2016年1月12日(米国時間)に、IEの古いバージョンのサポートが終了します。
各Windows OSごとの対応バージョンは、下記の通り。

サポート対象のIEのバージョン

Internet Explorer サポートポリシー変更の重要なお知らせ

Vistaユーザーはほぼいないし、Serverは関係ないので、実質IE11を考えてWeb制作をすればよいことになります。これによりCSSだと、flexboxやborder-imageなどが利用できるようになります。

IE11の詳しい情報は、下記ページをご覧ください。

IE10, IE9も参考に。

レイアウト関連のCSS

レイアウト関連のCSSの基礎知識を学べるゲームから、flexboxのテクニック、flexboxを使ったさまざまなレイアウトなど。

サイトのキャプチャ

angular interactive box-model diagram

CSSの基本ともいえるボックスモデルの概念をゲーム感覚でしっかりと身につけることができます。

サイトのキャプチャ

CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説

2016年はFlexboxでのレイアウトが主流になるのでしょうね。

サイトのキャプチャ

Flexbox Froggy

flexboxの使い方を楽しみながら、身につけることができるゲーム。
flexboxでカエルをうまいこと導きます。

サイトのキャプチャ

cssPlus
デモページ

flexbox使ったさまざまなレイアウトを簡単に利用できます。

サイトのキャプチャ

Flexbugs

flexboxを使う上で備えておきたいのが、バグ情報。
未解決のものもありますが、解決方法が分かるものもあります。

アニメーション関連のCSS

通常紹介しているアニメーションとは、少し違った動きが面白いものを紹介します。

サイトのキャプチャ

Shift.css

HTMLのさまざまな要素を使って、タイムラインベースのアニメーションを作成できます。

サイトのキャプチャ

Rocket

要素が他の要素に移動する際に、さまざまなアニメーションを適用できます。
名前のように、ロケットが飛ぶようなイメージです。

サイトのキャプチャ

It's Tuesday.

要素の表示・非表示にさまざまなアニメーションを適用できます。

サイトのキャプチャ

Drop.js

ポップアップ・シェアボタン・ホバーカードなどに、ドロップダウンをアニメーションで適用できます。

サイトのキャプチャ

Transformicons

CSSとSVGを使って、アイコンを異なる形状に変形できます。

サイトのキャプチャ

SpinKit

CSSで実装されたアニメーションでくるくる動くスピナー。

ユーティリティ関連のCSS

去年から増えてきたフィルター関連や、素敵なカラーをまとめたもの、フォントサイズの計算機など。

サイトのキャプチャ

Colofilter.css

CSSのblend-modesプロパティを使った、デュオトーンのカラーフィルター。
フィルター関連は、IE11でも非サポートです。

サイトのキャプチャ

CSSGram

こちらは、Instagram風に仕上げるフィルター。写真画像がいい感じになります。

サイトのキャプチャ

Crayon.css

クレヨンのようなかわいいカラーが用意されたスタイルシート。

サイトのキャプチャ

CSS Cursor

cursorプロパティの各値の見え方とブラウザの対応状況。

サイトのキャプチャ

CSS Ruler

文字のサイズを設定する時の単位をどうすればいいか教えてくれるサイト。
下記ページも参考に。

top of page

©2016 coliss