STUDY

CSS 2020

こんにちは。エンジニアの木下です。
新型コロナウィルスの影響でいろんな問題がありますが、リモートワークの環境が進んだ会社も多いのでしょうか。オリンピックも延期になってしまいそうですが、いつか開催されたときは楽しめたら良いですね!

年があけてからもう4か月経っていますが、2020も毎日コードを書いています。

UIトレンドが変わって作るのが複雑になっていたり、レイアウト手法も混沌としてきているので、スマートな構築のためにCSSのエキスパートが再び脚光を浴びてもいいのでは!とおもいます。
とは言え、イチからジュウまで一人の力でなんて無理なので、便利なツールがたくさん出てきては廃れていますよね。
今回は今でもまさに多用している便利なサイトを紹介したいとおもいます。

レイアウト

CSS Grid Generator


CSS Gridでのレイアウトは慣れるまではこんがらがる事が多いので、このサイトをもとに練習していくと良いとおもいます。


Flexulator


こちらはFlexbox。growやshurinkなど最初はとっつきにくのでイメージするにはもってこいです。


CSS3 Perspective Playground


perspectiveの調整用。通常のWebサイトではあまりperspective自体使うことのないプロパティなので、いざというときに「どういう挙動だったっけ…」となりがち。
イメージを再確認したり実際に実装するときはオススメです。


アニメーション

Epic Spinners


ローディングのアニメーションや、最近だとマイクロインタラクションの作成時の参考になります。
アニメーション関連は自分でストックしていくとパッと使えて便利です。


CSS ANIMO


こちらも同様。ホバーアニメーションは簡単なようで難しいなと最近痛感することが多いので、まずシンプルめなもののイージングを研究したり他アニメーションとの調和はとれているかをじっくりみてみると良いとおもいます。


SVG ARTISTA


SVG、正直いつまで経っても苦手意識がなくなりませんが、仕組みがわかると簡単に「おっ!」と印象付くものが作れるので良いですよね。
ジェネレーターですが、勉強にも良いかもしれません。


グラデーション/シャドウ/ほか

Mycolorpanda


めちゃくちゃ多用しています。グラデーションのジェネレーターはたくさんある中、背面に指定した色が、がっつり見れるのがお気に入りです。


BOX-SHDOWS.CSS


box-shadowのジェネレーター。最近トレンドとなってるニューモーフィズムを再現するときも調子が良いかもしれません。
重ねがけしたりして多彩な表現ができるものの下手に使うと野暮ったくもなるので研究あるのみですね。


Screen Size Map


端末の解像度が端末名・シェア率とともに一覧でみられます。たまにど忘れしたとき、突然ブレイクポイントで悩んだときに眺めていると、頭の中が整理されるというよりは、どれだけ対応せねばいかんのだという恐怖と怒りに駆られます…。



色々なツールがありますが、これらがちゃんと扱える、鬼に金棒!になるよう日々精進していきましょう。