2019年、CSSのプロパティ・機能やツールについて使用状況や認知度を徹底調査 -The State of CSS 2019

実際のところ、Flexboxはどのくらい使用されているのか、CSS Gridはどうなのか、どのCSSの機能がよく使われ、どのフレームワークやツールが採用されているのか、CSSのプロパティ・機能やツールについて、2019年現在の使用状況や認知度を調査した「The State of CSS 2019」を紹介します。

The State of CSS 2019

The State of CSS 2019

The State of CSS 2019は、The State of CSS Surveyで今年の2月にアンケートを行った調査結果をまとめたものです。私も1票分参加しました。

ちなみに、代表者の人はフランスの方で、現在は京都に住んでいるそうです。
「日本のデベロッパーにも楽しんでもらえたら、嬉しいです」とメッセージを頂きました。

下記は、特に気になった調査をピックアップしたものです。
※元サイト様にライセンスを得て掲載しています。

調査対象の国

調査対象の国

The State of CSSは135ヵ国、11,307人のデベロッパーを対象にした調査です。こういった調査の中では、かなりの規模だと思います。

調査対象の経験年

調査対象の経験年数

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

  1. 5-10年: 31.9%
  2. 10-20年: 27.07%
  3. 2-5年: 25.82%
調査対象の男女比率

調査対象の男女比率

男女比は、男性: 84.71%、女性: 9.9%。けっこう偏ってます。

  1. 男性: 84.71%
  2. 女性: 9.9%

ここから肝心のCSSの機能やツールについて見てましょう。

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

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

CSSのレイアウト手法は近年最も変化が著しい分野の一つです。Flexboxが登場し、その後CSS GridがCSSでレイアウトを処理する最も表現力豊かな方法として登場しました。FlexboxもCSS Gridも認知度は高いですが、使用頻度はFlexboxが非常に高い割合になっています。CSS Gridは約半数でした。

  1. Flexbox: 95.3%
  2. Grid: 55.7%
  3. Multi-Column Layout: 52.3%

参考:

シェイプとグラフィック

シェイプとグラフィック

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

  1. Filters: 67.9%
  2. object-fit: 67.4%
  3. clip-path: 49.8%

参考:

インタラクション

インタラクション

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

  1. overscroll-behavior: 47.7%
  2. overflow-anchor: 33.3%
  3. scroll-snap: 22.3%

参考:

CSSアニメーション

CSSアニメーション

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

  1. transform: 95.7%
  2. transition: 95.5%
  3. animations: 91.3%

参考:

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

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

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

  1. calc(): 90.3%
  2. 変数: 62.8%
  3. will-change: 56.9%
  4. @supports: 50.5%

参考:

CSSでよく使用する単位

CSSでよく使用する単位

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

  1. px: 99.1%
  2. %: 96.5%
  3. em: 92.5%
  4. vh, vw: 90.4%
  5. rem: 85.7%

参考:

CSSでよく使用する疑似要素

CSSでよく使用する疑似要素

よく使用されるセレクタは、::before, ::afterでした。::placeholderや::selectionも人気が高いですね。

  1. ::before: 97.7%
  2. ::after: 97.7%
  3. ::placeholder: 66.4%
  4. ::selection: 43.5%

参考:

CSSのフレームワーク

CSSのフレームワーク

CSSのフレームワークは、やはりBootstrapの人気が高いです。個人的には、Tailwindを注目しています。

  1. Bootstrap: 100%
  2. Foundation: 79%
  3. Materialize CSS: 72%
  4. Semantic UI: 63%
  5. Bulma: 50%

参考:

使用しているテキストエディタ

使用しているテキストエディタ

制作者に欠かせないのが、コードを書くためのテキストエディタ。CSSを書くプロセスはおそらく他のどの言語よりも広い範囲でブラウザとデベロッパーツールに頼ります。人気がもっとも高いのはVS Code、次いでSublime Text, Atomが続いています。

  1. VS Code: 70.6%
  2. Sublime Text: 34.1%
  3. Atom: 22%

参考:

sponsors

top of page

©2019 coliss