IE10、IE9、IE8のサポート終了 | マイナビニュース
2016年1月、古いIEのサポートが終了したわけですが、そうなるとWEB制作における影響として、CSS3の積極的な利用促進が挙げられますよね。
納品案件だとブラウザによる差異に対してなかなかご理解いただけないクライアントもいらっしゃるので、css3を利用することにためらいがあったわけですが、これからはcss3の利用が業界全体でぐっと加速するのは間違いないだろうと思います。
ということで、勉強のためにストックしておいたCSS3関連記事をまとめてみました。
Flexbox
現状ではbootstrapを利用してレイアウトを組むことが多いですが、余分なdivが増えてしまうのでhtmlがやや複雑になってしまうのが欠点です。Flexboxを使うとシンプルな記述で柔軟にレイアウトが組めそう。
子要素を横並びにしてくれる、自動的に一番長いボックスに合わせて高さをあわせてくれる、垂直方向の位置も設定できる、など利点がたくさんあります。
参考
- CSS3のFlexboxを基本から理解して、使い倒そう! | 株式会社LIG
- 【CSS】Flexboxのプロパティ(flex-direction、flex-wrap、flex-flow、order)を紹介します
- 【CSS】Flexboxのプロパティ(flex-grow、flex-shrink、flex-basis、flex)を紹介します
- 【CSS】Flexboxのプロパティ(justify-content、align-items、align-self、align-content)を紹介します
- これからのCSSレイアウトはFlexboxで決まり! | Webクリエイターボックス
transition
例えば要素にマウスをhoverした時に、その要素の幅や高さを変えたり、動かしたり、動作に緩急をつけたり、と何らかの変化をつけることができます。
参考
- 【CSS3】CSSで動きが出せるtransitionプロパティの概要を紹介します
- 【ほぼ網羅】CSS3だけでアニメーションを実装する方法のまとめ : アシアルブログ
animation
animationは、@keyframesを使って開始→中間→終了→開始に戻る、などの時間軸を持たせてループできることが特徴的です。
transform
移動、拡大、回転、傾斜など要素を「変形」させることができます。animationと組み合わせると、より複雑なモーフィングも表現可能なようです。
参考
- 【CSS3】CSSのtransformの値を4つ紹介【scale、translate、rotate、skew】
background
css3では、カンマで区切れば複数の色や画像やグラデーションを重ねて指定できますし、画像の開始位置や敷き詰め方、要素に対してのフィッティングも設定可能です。
other
css2.1と比べて表現力が格段に高まりましたが記述方法は複雑になっていますので、まずは先駆者の方々が残してくれたコードをありがたく勉強させてもらいます!
参考
- cssでマウスオーバーした時に画像をゆっくりとフェードイン・アウトさせる|札幌市のWeb製作者YOSHIKIMINATOYA.COM
- CSS3アニメーションを使ったボタンホバーの12種類のかわいいエフェクト | コリス
- CSSで作るシンプルな矢印アイコン29個 | PRESSMAN*Tech
- jQuery/CSS3で雲をゆらゆらさせる | webOpixel
- CSSの@supportsを使ってCSSのみでスタイルの条件分岐をする方法 | Webクリエイターボックス
- CSSの content プロパティーを使いこなそう! | Webクリエイターボックス
- かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技 | Webクリエイターボックス
- 保存版!CSS3で出来る素敵なデザインやアニメーションをまとめてみた