【コーディング最先端】CSSの新しい書き方3選｜display、rgb()、transform

2025年2月17日2025年3月5日

HTMLもCSSも、常に進化を続けております。
もしかしたら、自分の知らないところでいつの間にか新しいタグや記法が開発されているかも？

本記事では、馴染み深いCSSプロパティの新しい書き方をご紹介いたします！

さとみ

全国のコーダーさんがよく使っているであろうCSSばかりです。

コードを比較

display

一つ目の値<display-outside>を「要素自体の並び方」、二つ目の値<display-inside>を「要素の中の並び方」と分けて（2値構文）書きます。

display: <display-outside> <display-inside>;

.example {
  /* 今までの書き方 */
  display: block;
  display: inline;
  display: inline-block;
  display: flex;
  display: inline-flex;
  display: grid;
  display: inline-grid;
  display: flow-root;

  /* 新しい書き方（2値構文） */
  display: block flow;
  display: inline flow;
  display: inline flow-root;
  display: block flex;
  display: inline flex;
  display: block grid;
  display: inline grid;
  display: block flow-root;
}

<display-outside>に設定できる値

block
inline
run-in

<display-inside>に設定できる値

flow
flow-root
table
flex
grid
ruby

POINT

プロパティを指定した要素そのものに加え、中身（子要素）の並び方も同時に指定できる

rgb()関数

カラーと不透明度を同時に指定する場合、rgb()関数が推奨です。
rgba()関数で使っているカンマ区切り（,）は、MDNの文献いわく現在では古い書き方とみなされているようです。

.example {
  /* 今までの書き方 */
  background-color: rgba(255, 255, 0, 0.5);

  /* 新しい書き方 */
  background-color: rgb(255 255 0 / 0.5);
}

POINT

カンマ区切りは古い構文で非推奨とされている

transform系

今までまとめて書いていた、回転rotate・移動translate・拡大縮小scaleなどを独立させます。

.example {
  /* 今までの書き方 */
  transform: rotate(45deg) translate(1rem, 10%) scale(1.2);

  /* 新しい書き方 */
  rotate: 45deg;
  translate: 1rem, 10%;
  scale: 1.2;
}

傾斜skewには独立プロパティがなく、個別指定ができません。
今まで通りtransformプロパティを使いましょう。

POINT

CSSアニメーションの管理がしやすい
transformの場合、アニメーションを指定する際に本来必要ない関数を書かないと動かないこともあるが、独立プロパティならそういうことにならない

まとめ

従来の書き方は最新じゃないから今すぐやめよう！ということはありません。
また、rgb()関数のように「推奨」はありますが「必ず使え」というわけでもありません。

新しい書き方によっては、Sassのコンパイルがうまく働かないこともあります。（Stylelintの関係？）
筆者はCursorの拡張機能『Live Sass Compiler（Glenn Marks氏）』でコンパイルしておりますが、rgb()関数が書き出されませんでした。
※設定の問題である可能性もあります。

でも覚えておいて損はなし！
この書き方がメジャーになる時代は近いかもです＾＾