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

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

参考:

• CSS Flexbox の各プロパティの使い方を詳しく解説
• 5分で完璧に分かる！CSS Gridの基本的な使い方を解説
• CSS Gridが適しているレイアウト、Flexboxが適してるレイアウトを詳しく解説

シェイプとグラフィック

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

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

参考:

• object-fitの使い方: レスポンシブ対応、動画や画像をブラウザいっぱいに表示するCSSのテクニック

インタラクション

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

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

参考:

• CSSでスクロールのスナップが可能に！scroll-snapプロパティの基礎知識と便利な使い方

CSSアニメーション

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

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

参考:

• CSSアニメーションは確実に進化している！キーフレームを使ったCSSアニメーションの実装ポイントまとめ
• CSSの参考になるアイデアがいっぱい！2018年スタイルシートを使ったテクニックのまとめ

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

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

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

参考:

• calc()関数の使い方のまとめ -レイアウト・要素の配置・フォントサイズの定義など
• CSS @supportsの知っていると便利な使い方のまとめ

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%

参考:

• フォントのサイズ指定はpx？ em？ 既存の再検討とこれからのテクニック
• フォントサイズの指定方法の基礎知識からレスポンシブに適した指定方法までやさしく解説
• ビューポート幅（vw）に対してレスポンシブ対応の文字サイズを指定するテクニック

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

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

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

参考:

• 「:before擬似要素」と「:after擬似要素」の使い方を基本からマスターするためのチュートリアル
• CSSの便利なセレクタ「:placeholder-shown疑似クラス」を使うと、フローティングラベルも簡単に実装できる
• セレクタを使った条件分岐のテクニック

CSSのフレームワーク

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

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

参考:

• 新しくなったBootstrap 4の基本テンプレート、ナビゲーション、コンポーネントのまとめ
• 外部CSSを一つ加えるだけで今時のコンポーネントやエレメント、レイアウトが簡単に利用できる -Bulma
• レイアウトやUIコンポーネント用のスタイルシートが簡単にまとめて利用できる -Tailwind CSS

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

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

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

参考:

• Visual Studio Codeで見やすいテーマファイルのまとめ
• コードがはっきりと見やすくて、使いやすい Sublime Text 3 のテーマのまとめ