#9「State of CSS 2020の結果から今後注目されるであろうCSSを探る」
去年の暮れに公開されたState of CSS 2020の結果から、現在CSSではどのような技術が注目されているのか、また、今後はどのような技術が流行りそうかを話しました。
※ オフラインのため、音声ファイルを再生できません。ネットワーク状況をご確認の上、再度アクセスしてください。
- 橋本
- こんにちは！
- 板垣
- こんにちは！
- 橋本
- ミツエーテックラジオは株式会社ミツエーリンクスのスタッフが、Webデザイン、WebフロントエンドなどのWeb技術に関するニュースやツールなどをシェアしたりするためのポッドキャストです。今回は板垣さんと去年の暮れに公開されたState of CSS2020の結果から今後注目されるであろうCSSについてお話ししていこうと思います。よろしくお願いします！
- 板垣
- はい。よろしくお願いします。
- 橋本
- さて、まずは今回のテーマであるState of CSSについて軽く説明しておくと、毎年CSSプロパティや、新し目の機能などの使用状況だったりとか、認知率調査を行って、その結果をグラフ化して公開しているサイトになります。
その年に人気だったCSSフレームワークやデザインパターン、またその開発環境など、その他CSSに関するいろいろな調査結果をこのサイトで見ることができます。 - 板垣
- はい。あの公式のイントロダクションにも書いてあったんですけど、この結果を見ながらですね、自分のCSSスキルと業界の傾向とを照らし合わせて、これまでを振り返ったりだとか、これからを考えたりすることができるわけですね。
- 橋本
- はい。
- 板垣
- あの今回の調査ではですね102の国から11,492票集まったようなんですけど、票数的にはですねアメリカが圧倒的でして、ついでイギリスが多かったみたいです。ちなみに日本の投票が39っていう風に書いてあって、まだまだ日本では認知されてないのかなーとは感じましたね。
- 橋本
- そうですね。アンケート自体けっこうその個人が感覚で回答するものだと思うので、そこの結果が絶対に正しいとはもちろん言えないんですけど、回答者の半数が自らをエキスパートと位置づけているので、調査結果は比較的実用的なものにはなっていると思います。
- 板垣
- なるほど。
- 橋本
- ちなみにState of CSSにおけるこのエキスパートっていうのはフロントエンド領域全体を最初からスタイリングできる人のことを指しています。
- 板垣
- 要するにBEMみたいな命名規則を理解していたりだとか、あとはアトミックデザインを意識した構築を1からできる人みたいな事ですよね？
- 橋本
- そうですね。そういう認識でいいと思います。
では早速中身の話に移りたいと思います。 - 板垣
- お願いします。
- 橋本
- 板垣さんにはFeaturesとUnits & Selectorsっていう章を中心に見てもらったんですけど、こちらで何か発見はありましたか？
- 板垣
- そうですね…あのスクロールスナップだとかあとは::marker疑似要素とかあのIEでは使えないような機能も結構使われているなーっていう第一印象を受けましたね。
もしかしたらなんですけどポリフィルとか入れて対応してるのかもしれないんですけど、それにしてもそれらの機能の使用率が高いっていうのには驚きましたね。 - 橋本
- そうですね。Microsoft自体がEdgeの利用を推奨していたりだとか、その自分の体感的なんですけど、IE 11をサポートしない流れができつつあるような気がしていて。
- 板垣
- なるほど。
- 橋本
- それっていうのも情報が得られればある程度表示が崩れててもいいくらいの切り分けがされてるのかなっていう風に感じますね。
いずれにせよブラウザベンダーがどれだけ頑張ってその機能を実装してもIEで使えないからな～となって結局活用されなかったらのWebの発展を妨げることになってしまうので、そういう機能ってのは積極的に使っていきたいですね。 - 板垣
- そうですね～早く何も気にしないでいろんな機能が使えるようになるといいですよね。
- 橋本
- ですね。
- 板垣
- ちょっと話を戻しますけど、ここ1、2年だと業界的に表示パフォーマンスに関する情報っていうのが多く公開されていたと思うんですね。
- 橋本
- はい
- 板垣
- content-visibilityみたいな、新し目のプロパティも認知率自体は結構高いのかなーっていう印象を受けましたね。さっきも言ったスクロールスナップなんかのこれまではJSを使って制御していたものを、CSSだけである程度再現できるようになったっていうのも注目するところなのかなと思ってますね。
- 橋本
- なるほど。まあ確かにそのLighthouseとかそういったパフォーマンスの計測ツールが充実してきたことによって、パフォーマンスに対する意識みたいなものがけっこう業界的にも染み付いてきた気がするので、そのあたりの情報を求める人っていうのは多そうですよね。
- 板垣
- そうですね。
- 橋本
- あと自分とギャップがあったところで言うと、prefers-color-scheme特性ですね。弊社サイトもそうなんですけど、近年ダークモード対応のサイトの数が増えている気がしていて、そんな状況で今回このサイトでprefers-color-schemeの使用率っていうのが18%にとどまっていたっていうのはちょっと意外でしたね。
- 板垣
- そうですね。もしかしたらDarkmode.jsみたいなJSライブラリとかもあるので、そこら辺の別の方法を使ってあのダークモード実装していたりする人がもしかしたらですけど多いのかもしれないですね。
- 橋本
- なるほどそっちもあるって事ですね。
他で言うと私の方でそのTechnologies以降の章もざっと見てみたりしたんですけど、フレームワークで言うとやはりTailwind CSSが目立ちますね。 - 板垣
- そうですよね。
- 橋本
- 使用率こそはまだ高くはないんですけども、その満足度っていう所だとかと興味があるかどうかっていうところで言うとは非常に高い結果がありました。
- 板垣
- 確かにこう去年からの伸び率とかを見ると圧倒的でしたよね。自分の所感なんですけど、JSフレームワークと合わせてTailwind CSS使ってる人が多い気がするんですけど、その周辺の人たちの使用率とかを合わせてみるともう少し多分割合っていうのが伸びてくるんじゃないのかなーと思ってますね。
- 橋本
- あーなるほどそうですね。まあ後はそのCSS in JSのページだと2020年から新たにそのState of CSSに登場したライブラリっていうのが合計6つも出てきていたんですよ。
- 板垣
- はい。
- 橋本
- やっぱこれって言うのもそのJSフレームワークの影響が色濃く出ているんじゃないかなって感じました。
- 板垣
- と言うとどういうことですかね？
- 橋本
- というのも業界的にフレームワークを使ったサイト構築っていうのがやっぱその一般的になってきているのでフレームワーク上でどうCSSを効率よく書くかっていう議論が増えていたりだとか、そういう方向性を持ったツールが増えてきているのではないかなって感じますね。
- 板垣
- なるほど確かにCSSを書くツールとしてvue.jsって回答してる方が何人かいたのも面白いところかなと思ってました。
- 橋本
- そうなんですよね。vue.jsのscoped CSSは便利ですし、コンポーネントベースでVueはなってると思うんですけど、それでしっかり作れればあれで十分だったりしますよね。
- 板垣
- そうですね。
- 橋本
- とはいえそのすべてのツールを追うのは大変なので、もう少しトレンドは追ってみようと思います。
- 板垣
- はい。あとこれに関してちょっとアンケートの結果内容とは逸れてしまうんですけど、橋本君は「Container Queries」って知ってたりします？
- 橋本
- 名前は聞いたことありますね。
- 板垣
- 簡単に言うとこれまでのメディアクエリみたいな、デバイスのビューポートじゃなくて要素自身を基準に要素のレイアウト変更したりできる考え方なんですけど、そのContainer Queriesの実装がですね、去年の11月にBlinkのメーリスに提案されたっぽいんですよ。で、これが使えるようになるとビューポートとそのコンポーネントを疎結合にできるんで、今のコンポーネントを主とする設計手法っていうのが結構やりやすくなるのかなと思っていて、すごい期待しているものになりますね。
- 橋本
- なるほど、確かにそうですよね。
mediaでスタイルを分けるのかっていうのと、containerでスタイルを分けるのかっていうのが状況に応じて使えるようになりそうだなって思いますね。 - 板垣
- はい。これに関して面白い点がもう一つあって、メーリスを見てもらうと分かるんですけど、2019年のState of CSSの結果をもろに影響を受けている機能の一つなんですよね。
- 橋本
- そうなんですか？
- 板垣
- そうなんですよ。実は去年のState of CSSのMissing featureっていう、ユーザーがCSSに足りていないと思ってる機能の項目で1位だったのが、今言っているContainer Queriesだったんですね。今回のメーリスのモチベーションのところにその旨が書いてあったんですよ。
- 橋本
- なるほど…自分は今回State of CSSで回答は特にしなかったんですけど、そういう影響力があるなら、こういうところどんどん積極的にアピールしていった方が良さそうな感じはしますね。
- 板垣
- そうですね。本当にそう思います。
- 橋本
- はい、というわけではここまでざっとState Of SSS の調査結果を見てきました。今回の調査結果でCSSの知識っていうのがだいぶアップデートされましたね。
- 板垣
- そうですね。おそらくなんですけど今回の結果に書かれてる情報っていうのを全て知ってる人っていうのは本当に一握りだと思っていて、フロントエンドエンジニアだとか、WebデザイナーみたいなWebフロントエンドに関わっている人たちにはぜひぜひ、ご一読してもらいたい内容だなと感じております。
- 橋本
- そうですね。あとその一点板垣さんにまた聞きたいことなんですけど、板垣さん的には2021年のCSSはどうなりそうでしょうか？
- 板垣
- そうですね…最近でいうと「Glassmorphism」っていうぼかしを活用した見せ方が少しトレンドになりつつあるんですね。
- 橋本
- はい。
- 板垣
- なのでその今までIEとかを気にして、それらのデザインを実現するための
filterプロパティみたいな新し目のプロパティって結構使いづらかったんですけど、最初にも橋本君が言ってくれた通りそのIEを気にしないような流れが醸成されてきている気がするので、そういったグラフィック系のプロパティの使用率が結構上がってくるんじゃないのかなと予想してます。 - 橋本
- あーなるほど、たしかにその
blendとかfilter系っていうのは存在自体は知ってるけど、そこまで使う機会っていうのは多くなかったですよね、今までだと。 - 板垣
- そうですね。
- 橋本
- それが上がるといいですね。
- 板垣
- はい。
- 橋本
- 最後にミツエーリンクスではスマートなコミュニケーションをデザインしたいUIデザイナー、UI開発者を募集しています。採用サイトではオンライン説明会やオンライン面接なども行なっていますので、チェックしてみてください。またこのポッドキャストはApple Podcast、Google Podcast、Spotifyで配信していますのでお好みのプラットフォームでフォローいただけると最新のエピソードをすぐ視聴できます。こちらも是非ご活用ください。
それでは今日はこの辺で！ありがとうございました！ - 板垣
- ありがとうございました！