2016年に取り入れていきたい、CSSのテクニック・ライブラリのまとめ
Post on:2016年1月5日
sponsors
2016年は、1月12日に古いバージョンのIEのサポートが終了します。
IE8, 9, 10などの古いブラウザへの対応に時間を割く必要がなくなり、今まで躊躇していたCSSやJavaScriptが多くの人に利用されるようになると思います。
これからどんどん取り入れていきたいCSSのテクニック・ライブラリを紹介します。
イラスト: Girls Design Materials
2016年1月12日からIEの対応は実質IE11に
2016年1月12日(米国時間)に、IEの古いバージョンのサポートが終了します。
各Windows OSごとの対応バージョンは、下記の通り。
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の使い方を楽しみながら、身につけることができるゲーム。
flexboxでカエルをうまいこと導きます。
flexbox使ったさまざまなレイアウトを簡単に利用できます。
flexboxを使う上で備えておきたいのが、バグ情報。
未解決のものもありますが、解決方法が分かるものもあります。
アニメーション関連のCSS
通常紹介しているアニメーションとは、少し違った動きが面白いものを紹介します。
HTMLのさまざまな要素を使って、タイムラインベースのアニメーションを作成できます。
要素が他の要素に移動する際に、さまざまなアニメーションを適用できます。
名前のように、ロケットが飛ぶようなイメージです。
要素の表示・非表示にさまざまなアニメーションを適用できます。
ポップアップ・シェアボタン・ホバーカードなどに、ドロップダウンをアニメーションで適用できます。
CSSとSVGを使って、アイコンを異なる形状に変形できます。
CSSで実装されたアニメーションでくるくる動くスピナー。
ユーティリティ関連のCSS
去年から増えてきたフィルター関連や、素敵なカラーをまとめたもの、フォントサイズの計算機など。
CSSのblend-modesプロパティを使った、デュオトーンのカラーフィルター。
フィルター関連は、IE11でも非サポートです。
こちらは、Instagram風に仕上げるフィルター。写真画像がいい感じになります。
クレヨンのようなかわいいカラーが用意されたスタイルシート。
cursorプロパティの各値の見え方とブラウザの対応状況。
文字のサイズを設定する時の単位をどうすればいいか教えてくれるサイト。
下記ページも参考に。
sponsors
