Zenn
🧐

CSSにおける採用率の高い機能とは？ (2020)

2021/02/23に公開
CSS
UI/UX
初心者
Tailwind CSS
フロントエンド
tech

本記事でやりたいこと

The State of CSS 2020で紹介している「CSSにおいて採用率の高い機能」を解説します！CSSで人気のある機能は、どんなものなのかを解説していきます。

そもそも、The State of CSS 2020とは？

CSSに関連する調査結果です。
機能やフレームワークの使用状況や認知度の調査結果になります。
以下のように、グラフィカルにまとめてくれてるので、一目瞭然です

※ 例えば、CSS FrameworksではTailwindが強い

出典: The State of CSS 2020
出典: The State of CSS 2020

採用率の高い機能って？

CSSの機能というと、例えばfont-size: 18px;であったり、display: flex;などあると思います。The State of CSSにおける採用率の高い機能では、CSSの機能をカテゴリ別にして、カテゴリ毎にどのような機能が最も採用されているのかをパーセンテージで表しています。本記事では各カテゴリのNo.1を紹介します！

Feature

各カテゴリのNo.1の紹介！！

👑 メディアクエリ部門： prefers-color-scheme

ユーザーがシステムに要求したカラーテーマが明色か暗色かを検出するために使用します。 - MDN

これは、ダークモードを実現するための機能として使われることがあります。

例としては、以下になります。

@media (prefers-color-scheme: dark) {
    background: black; 
    color: #ddd; 
}

このコードではprefers-color-scheme: darkとすることで、ブラウザがダークモードの時に、背景を黒・文字色を白にします。 最近ではダークモードに対応するアプリが、増えており需要のあるメディアクエリだと言えます。

👑 インタラクション部門： pointer-events

特定のグラフィック要素がポインターイベントの対象になる可能性のある環境 (存在する場合) を設定します。- MDN

主にSVGですが、ポインターでグラフィックのどこをさわったらどんなイベントが起きるのか？を指定することができます。

例えば以下のような図形があるとします。
この図形には、オレンジの枠線（stroke）、青の塗りつぶし部分（fill）などがあります。


画像：MDN

この図形に以下のようなCSSを適用してみます。
pointer-events: stroke;
すると、オレンジ色の枠線（stroke）にマウスをホバーすると、マウスのポインターの形が変わります。他にも、
pointer-events: none;
だと、グラフィックのどの領域においてもポインターは反応しません。

👑 アニメーション&トランスフォーム部門： Transforms

CSS Transformsは CSS のモジュールの一つで、 CSS でスタイル付けされた要素をどのように二次元または三次元空間に変形できるかを定義します。- MDN
これは特定の機能ではなく、CSSの変形機能の総称です。
例えば、以下の機能は要素を拡大するプロパティになります。
scale: 2;
他にも、回転させるrotateや平行移動させるtranslateなどがあります。

👑 タイポグラフィー部門： @font-face

テキストを表示するための独自フォントを指定します。- MDN

自分でオリジナルのフォントをカスタマイズすることができます。
例えば、以下です。

@font-face { 
  font-family: "Open Sans"; 
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), 
      url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); 
}

.button__text {
  font-family: 'Open Sans'; 
}

予め、@font-faceでフォント名を設定しておき、スタイルを適用する時に利用することができます。

👑 図形（shpes&graphics）部門： object-fit

置換要素、例えば <img> や <video> などの中身を、コンテナーにどのようにはめ込むかを設定します。 - MDN

<img>要素でいうと、画像が特定領域内にてどのように収めるか？を指定することができます。
まずは、object-fitが効いていない場合です。

object-fit: none;

画像：MDN

この画像は、縦長の画像ですが、大きすぎるため画像の一部しか表示されていません。これをobject-fitのcontainというものを利用すると...

object-fit: contain;

画像：MDN

このように、領域内に収めることが出来ました。以上のように、画像をどのようにフィットさせるかを指定できるCSSになります。

👑 レイアウト部門： Flexbox

アイテムを列方向や行方向など一次元に並べて表示するためのレイアウトモデルである CSS Flexible Box Layout Module に対する一般的な通称 - MDN

HTML要素同士のレイアウトを揃えたい時に利用する機能になります。
例えば以下のようにHTML, CSSを記述したとします。

<div class="parent">
 <div class="child">あ</div>
 <div class="child">い</div>
</div>

.parent {
  background-color: red;
  height: 100px;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.child {
  background-color: pink;
}
① flexbox未使用 ② flexbox使用

何も適用しない場合は、①のように単に並ぶだけですが、flexboxを使用すると
②のように、子要素である"あ", "い"を簡単に真ん中に寄せることが出来ます。
このように「数行」書くだけで、いろんなレイアウトを実現することができます。

👑 その他！！部門： calc()

CSS のプロパティ値を指定する際に計算を行うことができるもの - MDN

なんとCSS内で計算できるものです。
例えば以下のように利用します。
height: calc(100% - 50px);
これは、高さを100%から50px引いたものです。このように、計算することでCSSの自由度を上げることができます。

最後に

全てご存知でしたでしょうか！？自分はprefers-color-schemeは知りませんでした。ランキングなどを見てふ〜んで済ませるのではなく、実際にどんなものか調べてみるとスキルの向上につながると思います！
この記事に関して、感想・指摘等あれば是非ください！

Discussion