検索
ニュース

CSS利用動向調査の最新版「State of CSS 2020」が公開各種CSS技術の満足度や使用率が明らかに

CSSの利用動向に関する年次調査の最新版の結果が発表された。世界102カ国のCSSユーザー1万1000人超の回答が集計、分析されている。最も利用者が多く、満足度が高かったのはスタイルシート言語「Sass」だった。

Share
Tweet
LINE
Hatena

 CSS(Cascading Style Sheets)の利用動向に関する年次調査の最新版「State of CSS 2020」が2020年12月に発表された。世界102カ国のCSSユーザー1万1492人の回答を集計、分析したものだ。

 この年次調査はCSSの最新の利用状況を浮かび上がらせることを目指している。その背景には「CSS Grid」「CSS-in-JS」「Tailwind CSS」の台頭など、CSSが現在、これまで以上に急速に進化しているとの認識があるという。

 以下では2020年に発展した機能や技術、ユーザーの評価などについて主な内容を紹介する。

導入が最も進んだ機能「CSS Grid」

 State of CSS 2020は4つの機能、技術を選んで表彰している。CSS Grid、Tailwind CSS、PostCSS、CSS Modulesだ。

 今回の調査で導入が最も進んだ機能は、CSS Gridだった。2020年調査で「使っている」と答えた回答者の割合が73.3%となり、2019年調査の54.7%から18.6ポイント増えている。この増加幅は、調査したCSS機能の中で最も大きかった。

 「object-fit」(17.8ポイント増)と「Variables」(15.2ポイント増)がこれに続いた。

最も評価が上がった技術「Tailwind CSS」

 Tailwind CSSは、2020年調査で「また使いたい」と答えた回答者の割合が、2019年調査と比べて17.8ポイント増えた。この増加幅は、調査したCSS技術の中で最も大きかった。

 増加幅が2番目に大きかった技術は「Atomic CSS」(Utility-first CSS、10.8ポイント増)、3番目は「CSS Modules」(10.1ポイント増)だった。

最も満足度が高い技術「PostCSS」

 「PostCSS」は、満足しているユーザーの割合が91.4%と最も高かった。CSS Modules(86.8%)、Tailwind CSS(86.6%)がこれに続いた。

開発者の学習意欲が最も高い技術「CSS Modules」

 学びたいと考えている開発者の割合が75.1%と最も高かったのはCSS Modulesだ。2番目に高かったのはTailwind CSS(62%)、3番目は「Styled Components」(60%)だった。

なかなか普及が進まないCSSの新機能

 近年、新しい機能がCSSに続々登場している。コミュニティーが新機能を吸収するのに時間がかかることから、普及は遅れ気味だ。

 State of CSS 2020では、CSSの機能を次の7つのグループに分け、各グループに属する個々の機能について、認知度や使用率などを明らかにした。

  • Layout(レイアウト)
  • Shapes & Graphics(外観とグラフィックス)
  • Interactions(操作)
  • Typography(タイポグラフィ)
  • Animations & Transforms(アニメーションと変形)
  • Media Queries(メディアクエリ)
  • Other Features(その他の機能)

 次の図にある7つの点線の円は、各機能グループについて知っているユーザー数を示す。点線の円の内側にある二重の円はそれぞれ、個々の機能について知っているユーザー数(外側)と使っているユーザー数(内側)を示す。

 State of CSS 2020のWebサイトでは、この図の二重の円をマウスホバーの対象にすると、個々の機能について知っているユーザー数、使っているユーザー数、使用率をオーバーレイ表示する。


各CSSの機能について知っているユーザー数(外側の円)と使っているユーザー数(内側の円)(出典:State of CSS 2020

よく使われる単位とセレクタは

 State of CSS 2020では、CSSのさまざまな単位、疑似要素、セレクタの使用状況を報告している。最も利用者が多かった単位は「px」、次いで「%」「vh」または「vw」「em」「rem」だった。

 セレクタでは、「:first-child」「:nth-child()」「:last-child」の順に利用者が多かった。

CSS関連技術の満足度はどうだったのか

 調査では「プリプロセッサ/ポストプロセッサ」「フレームワーク」「方法論」「CSS-in-JS」という4つのカテゴリーでそれぞれの技術について、満足度、興味(開発者が学びたいか)、使用状況、認知度を明らかにした。

 これを基に、満足度とユーザー数の観点から、これらの技術を分類したのが次の図だ。

Copyright © ITmedia, Inc. All Rights Reserved.

ページトップに戻る