2016年以降、納品案件でもガンガン使いたいCSS3関連記事まとめ

IE10、IE9、IE8のサポート終了 | マイナビニュース
2016年1月、古いIEのサポートが終了したわけですが、そうなるとWEB制作における影響として、CSS3の積極的な利用促進が挙げられますよね。

納品案件だとブラウザによる差異に対してなかなかご理解いただけないクライアントもいらっしゃるので、css3を利用することにためらいがあったわけですが、これからはcss3の利用が業界全体でぐっと加速するのは間違いないだろうと思います。

ということで、勉強のためにストックしておいたCSS3関連記事をまとめてみました。

Flexbox

現状ではbootstrapを利用してレイアウトを組むことが多いですが、余分なdivが増えてしまうのでhtmlがやや複雑になってしまうのが欠点です。Flexboxを使うとシンプルな記述で柔軟にレイアウトが組めそう。

子要素を横並びにしてくれる、自動的に一番長いボックスに合わせて高さをあわせてくれる、垂直方向の位置も設定できる、など利点がたくさんあります。

参考

transition

例えば要素にマウスをhoverした時に、その要素の幅や高さを変えたり、動かしたり、動作に緩急をつけたり、と何らかの変化をつけることができます。

参考

animation

animationは、@keyframesを使って開始→中間→終了→開始に戻る、などの時間軸を持たせてループできることが特徴的です。

参考

transform

移動、拡大、回転、傾斜など要素を「変形」させることができます。animationと組み合わせると、より複雑なモーフィングも表現可能なようです。

参考

  • 【CSS3】CSSのtransformの値を４つ紹介【scale、translate、rotate、skew】

background

css3では、カンマで区切れば複数の色や画像やグラデーションを重ねて指定できますし、画像の開始位置や敷き詰め方、要素に対してのフィッティングも設定可能です。

参考

other

css2.1と比べて表現力が格段に高まりましたが記述方法は複雑になっていますので、まずは先駆者の方々が残してくれたコードをありがたく勉強させてもらいます！

参考

コメントをどうぞ！