2020年のCSSのまとめ、FlexboxやCSS Gridの使用状況、よく使用するプロパティや単位、人気のフレームワークやツールなど

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 2020

The State of CSS 2020は、The State of CSS Surveyでアンケートを行った調査結果をまとめたものです。私も1票分参加しました。
ちなみに、代表者はフランスの方で、現在は東京に住んでいるそうです。「日本のデベロッパーにも楽しんでもらえたら、嬉しいです」とメッセージを頂きました。

下記は、特に気になった調査をピックアップしたものです。

サイトのキャプチャ

アンケートの調査対象

The State of CSSは102ヵ国、11,492人のデベロッパーを対象にした調査されました。日本人がまだまだ少ないのが、残念です。

サイトのキャプチャ

調査対象の経験年数

CSSの経験年数は5-10年、10-20年が多く、私の周りもその層が多いですね。

  1. 5-10年: 30%
  2. 10-20年: 28.6%
  3. 2-5年: 25%

では、2020年のCSSの使用状況を見てましょう。

サイトのキャプチャ

レイアウトに使用するCSSのプロパティ

CSSのレイアウトはFlexboxが主流となり、CSS Gridも少しずつ浸透してきました。2019年では、CSS Gridはまだ約半数くらいでしたが、2020年では73.3%の使用率となっています。

  1. CSS Gridを使用している: 73.3%
  2. CSS Gridを知っている: 25.6%
  3. CSS Gridを知らない: 1.4%

参考

サイトのキャプチャ

Flexboxの使用状況

2019年の時点でも94.7%と高い数字でしたが、2020年では97.5%とさらに高い数字になっています。ほとんどのプロジェクトで使用されていると判断できます。

  1. Flexboxを使用している: 97.5%
  2. Flexboxを知っている: 2%
  3. Flexboxを知らない: 0.5%

参考

サイトのキャプチャ

position:sticky;の使用状況

2020年ではCSSの新しいプロパティも多く使用されています。position:sticky;も現在では普通に見かけるようになりました。

  1. position:sticky;を使用している: 75.9%
  2. position:sticky;を知っている: 17.3%
  3. position:sticky;を知らない: 6.9%

参考

サイトのキャプチャ

aspect-ratioの使用状況

aspect-ratioプロパティやcontent-visibilityプロパティなど、来年には間違いなく増えるでしょう。

  1. content-visibilityを使用している: 23.3%
  2. content-visibilityを知っている: 35.9%
  3. content-visibilityを知らない: 40.7%
サイトのキャプチャ

シェイプやグラフィックに使用するCSSのプロパティ

最近ではあらかじめPhotoshopなどでグラフィックを作成するのではなく、Web上でグラフィック効果を実装することも増えてきました。中でも、object-fit, clip-pathの人気が高いです。

  1. object-fitを使用している: 60.4%
  2. object-fitを知っている: 15.0%
  3. object-fitを知らない: 24.5%

参考

サイトのキャプチャ

インタラクションに使用するCSSのプロパティ

一昔前まではJavaScriptでないと実装できなかったインタラクションも、最近ではCSSだけで実装できるものが増えてきました。スクロールのスナップが可能になるscroll-snapプロパティなど、これから利用する機会が増えてくるでしょう。

  1. scroll-snapを使用している: 21.1%
  2. scroll-snapを知っている: 33.1%
  3. scroll-snapを知らない: 45.8%

参考

サイトのキャプチャ

タイポグラフィに使用するCSSのプロパティ

このジャンルは2020年は大きな動きがありませんでした。文字の余白をカットできるleading-trimプロパティが使用できるようになると、動きがあるかもしれません。

サイトのキャプチャ

アニメーションに使用するCSSのプロパティ

CSSアニメーションは認知度も使用度も非常に高い結果になっています。回答者のほぼ全員がアニメーション、トランジション、トランスフォームを使用しています。

  1. トランジションを使用している: 94.1%
  2. トランジションを知っている: 4.4%
  3. トランジションを知らない: 1.5%

参考

サイトのキャプチャ

メディアクエリに使用するCSSのプロパティ

メディアクエリはサイズ(スクリーンの幅)だけではありません。ユーザーのデバイスや好みに適合させることができます。

  1. prefers-color-schemeを使用している: 18.7%
  2. prefers-color-schemeを知っている: 34.4%
  3. prefers-color-schemeを知らない: 46.9%

参考

サイトのキャプチャ

その他よく使用するCSSのプロパティ

人気が高いのは、calc()関数、変数、will-change、@supportsです。どれも一昔前のCSSでは考えられないほど、便利です。一度使うと、手放せない機能ですね。

  • clac()関数を使用している: 91.5%
  • 変数を使用している: 74.7%
  • will-changeを使用している: 28.8%
  • @supportsを使用している: 40.5%

参考

サイトのキャプチャ

CSSでよく使用する単位・セレクタ

CSSの難しいところの一つが、小さな決定が大きな影響を与えることです。フォントのサイズ指定の単位に何を使うか、px, %, em そして最近ではremなどもあります。2020年になり、vh, vwの使用が増えてきました。

  1. px: 99.1%
  2. %: 96.1%
  3. vh, vw: 94.7%
  4. em: 91.6%
  5. rem: 91.6%
サイトのキャプチャ

よく使用するセレクタのコンビネーション

よく使用するは、便利なと置き換えてもいいですね。

  1. div span: 97.8%
  2. div > span: 97.4%
  3. div + div: 81.9%
  4. div ~ div: 68.1%

:focus-withinなど、疑似クラスや疑似要素についても集計されています。

参考

サイトのキャプチャ

よく使用するCSSのフレームワーク

フレームワークは2020年で大きな変動がありました。Tailwind CSSが1位になり、Bootstrapは大きく順位を落としています。

  1. Tailwind CSS: 87%
  2. PureCSS: 71%
  3. Bulma: 61%
  4. Ant Design: 60%
  5. Materialize CSS: 53%

ちなみに、Bootstrapは48%、Foundationは31%です。

参考

サイトのキャプチャ

よく使用するCSSのツール

エディタはVS Codeが一強ですね、他にも便利なツールが掲載されています。

  1. VS Code: 84.3%
  2. WebStorm: 18.9%
  3. Sublime Text: 18.4%
  4. Vim: 13.5%
  5. Atom: 8.6%
サイトのキャプチャ

よく使用する環境

このジャンルでは、テストに使用するブラウザ、デバイス、印刷の確認をするかなどです。ブラウザは最近では、Safariが一昔前のIEのような感じがします。

  1. Chrome: 97.2%
  2. Firefox: 83.2%
  3. Safari: 64.3%
  4. Edge: 53.2%
  5. Safari iOS: 44.5%

sponsors

top of page

©2021 coliss