2020年のCSSのまとめ、FlexboxやCSS Gridの使用状況、よく使用するプロパティや単位、人気のフレームワークやツールなど
Post on:2020年12月7日
sponsors
CSSを10年以上書いてきた人にとって、この2020年は今までとは全く違ったCSSになったと感じた人も多いと思います。
レスポンシブはブレークポイントの代わりにCSS Gridでより簡単に実装できるようになり、グローバルなスタイルシートに頼るのではなく、CSS-in-JSでスタイルをコンポーネントに配置してテーマ性のあるデザインシステムを構築できます。
フレームワークではTailwind CSSが浸透し、ユーティリティ・ファーストのCSSが使用されるようになりました。2020年現在、CSSの使用状況を調査した「The State of CSS 2020」を紹介します。
The State of CSS 2020は、The State of CSS Surveyでアンケートを行った調査結果をまとめたものです。私も1票分参加しました。
ちなみに、代表者はフランスの方で、現在は東京に住んでいるそうです。「日本のデベロッパーにも楽しんでもらえたら、嬉しいです」とメッセージを頂きました。
下記は、特に気になった調査をピックアップしたものです。
The State of CSSは102ヵ国、11,492人のデベロッパーを対象にした調査されました。日本人がまだまだ少ないのが、残念です。
CSSの経験年数は5-10年、10-20年が多く、私の周りもその層が多いですね。
- 5-10年: 30%
- 10-20年: 28.6%
- 2-5年: 25%
では、2020年のCSSの使用状況を見てましょう。
CSSのレイアウトはFlexboxが主流となり、CSS Gridも少しずつ浸透してきました。2019年では、CSS Gridはまだ約半数くらいでしたが、2020年では73.3%の使用率となっています。
- CSS Gridを使用している: 73.3%
- CSS Gridを知っている: 25.6%
- CSS Gridを知らない: 1.4%
参考
- 5分で完璧に分かる！CSS Gridの基本的な使い方を解説
- CSS Gridでレスポンシブ対応の代表的な5つのレイアウトを実装するテクニック
- CSS Gridが適しているレイアウト、Flexboxが適してるレイアウトを詳しく解説
2019年の時点でも94.7%と高い数字でしたが、2020年では97.5%とさらに高い数字になっています。ほとんどのプロジェクトで使用されていると判断できます。
- Flexboxを使用している: 97.5%
- Flexboxを知っている: 2%
- Flexboxを知らない: 0.5%
参考
- CSS Flexbox の各プロパティの使い方を詳しく解説
- 独学の人にオススメ！CSS Flexboxの基礎を一通り学べるチュートリアル
- CSS Flexboxの使い方・バグ情報・グリッドの実装など、有用なリソースのまとめ
2020年ではCSSの新しいプロパティも多く使用されています。position:sticky;も現在では普通に見かけるようになりました。
- position:sticky;を使用している: 75.9%
- position:sticky;を知っている: 17.3%
- position:sticky;を知らない: 6.9%
参考
aspect-ratioプロパティやcontent-visibilityプロパティなど、来年には間違いなく増えるでしょう。
- content-visibilityを使用している: 23.3%
- content-visibilityを知っている: 35.9%
- content-visibilityを知らない: 40.7%
最近ではあらかじめPhotoshopなどでグラフィックを作成するのではなく、Web上でグラフィック効果を実装することも増えてきました。中でも、object-fit, clip-pathの人気が高いです。
- object-fitを使用している: 60.4%
- object-fitを知っている: 15.0%
- object-fitを知らない: 24.5%
参考
一昔前まではJavaScriptでないと実装できなかったインタラクションも、最近ではCSSだけで実装できるものが増えてきました。スクロールのスナップが可能になるscroll-snapプロパティなど、これから利用する機会が増えてくるでしょう。
- scroll-snapを使用している: 21.1%
- scroll-snapを知っている: 33.1%
- scroll-snapを知らない: 45.8%
参考
このジャンルは2020年は大きな動きがありませんでした。文字の余白をカットできるleading-trimプロパティが使用できるようになると、動きがあるかもしれません。
CSSアニメーションは認知度も使用度も非常に高い結果になっています。回答者のほぼ全員がアニメーション、トランジション、トランスフォームを使用しています。
- トランジションを使用している: 94.1%
- トランジションを知っている: 4.4%
- トランジションを知らない: 1.5%
参考
メディアクエリはサイズ（スクリーンの幅）だけではありません。ユーザーのデバイスや好みに適合させることができます。
- prefers-color-schemeを使用している: 18.7%
- prefers-color-schemeを知っている: 34.4%
- prefers-color-schemeを知らない: 46.9%
参考
人気が高いのは、calc()関数、変数、will-change、@supportsです。どれも一昔前のCSSでは考えられないほど、便利です。一度使うと、手放せない機能ですね。
- clac()関数を使用している: 91.5%
- 変数を使用している: 74.7%
- will-changeを使用している: 28.8%
- @supportsを使用している: 40.5%
参考
- CSSのcalc()関数の使い方のまとめ -レイアウト・要素の配置・フォントサイズの定義など
- CSSの変数（カスタムプロパティ）便利な使い方を詳しく解説
- CSSアニメーションは確実に進化している！キーフレームを使ったCSSアニメーションの実装ポイントまとめ
- CSS @supportsの知っていると便利な使い方のまとめ
CSSの難しいところの一つが、小さな決定が大きな影響を与えることです。フォントのサイズ指定の単位に何を使うか、px, %, em そして最近ではremなどもあります。2020年になり、vh, vwの使用が増えてきました。
- px: 99.1%
- %: 96.1%
- vh, vw: 94.7%
- em: 91.6%
- rem: 91.6%
よく使用するは、便利なと置き換えてもいいですね。
- div span: 97.8%
- div > span: 97.4%
- div + div: 81.9%
- div ~ div: 68.1%
:focus-withinなど、疑似クラスや疑似要素についても集計されています。
参考
フレームワークは2020年で大きな変動がありました。Tailwind CSSが1位になり、Bootstrapは大きく順位を落としています。
- Tailwind CSS: 87%
- PureCSS: 71%
- Bulma: 61%
- Ant Design: 60%
- Materialize CSS: 53%
ちなみに、Bootstrapは48%、Foundationは31%です。
参考
- Tailwind CSSの便利な使い方、レイアウトやUIコンポーネント用のスタイルシートが簡単にまとめて利用できる
- 外部CSSを一つ加えるだけで今時のコンポーネントやエレメント、レイアウトが簡単に利用できる -Bulma
エディタはVS Codeが一強ですね、他にも便利なツールが掲載されています。
- VS Code: 84.3%
- WebStorm: 18.9%
- Sublime Text: 18.4%
- Vim: 13.5%
- Atom: 8.6%
このジャンルでは、テストに使用するブラウザ、デバイス、印刷の確認をするかなどです。ブラウザは最近では、Safariが一昔前のIEのような感じがします。
- Chrome: 97.2%
- Firefox: 83.2%
- Safari: 64.3%
- Edge: 53.2%
- Safari iOS: 44.5%
sponsors
