知っておきたい現在のCSSの機能

はじめに

CSSって、変数もないし、ネストもないし、計算もできないし使いづらいからよくSass使ったほうがいいみたいな記事をググるとよく見かけます。でも、今のCSSってめちゃくちゃ進化してます。5,6年前まではfloat:leftみたいな記述を駆使してレスポンシブ対応の画面を作っていましたが、それはもう昔の話で、今はほんとに便利な機能だらけになりました。しかも、IEが完全終了したので、今までIEを気にして使用できなかった様々なCSSの機能も、今なら使うチャンスです！

変数

えっ、CSSって変数使えるの！Sassの間違いじゃなくて？
今のCSSでは、変数が使えます。--pinkのようにハイフン2つで変数になり、その変数を呼び出すときはvar(--pink)と書きます。

:root {
     --pink: #f3a9ff;
}

h1 {
    color:var(--pink);
}

このように書くとあら不思議、ちゃんと色が指定した色コードの色になってます。色コード以外にも、数字や20px のような値にも対応できます。
色を変数にしておくと、この色やっぱり違うなって思ったときに修正する箇所が一か所に集中してとても便利ですね。

計算

calcを使うと、四則演算が行えます。乗算は左右どちらか、除算は右側が数値である必要があります。

.calc{
    width: calc(10px + 100px);
}
.calc2 {
    width: calc(100% - 20px);
}

.calc3 {
    --widthA:1080px;
    width: calc(var(--widthA) - 4rem);
}

加減に関しては左右の単位が違くても計算ができます。例えば画面幅いっぱいよりも40pxほど小さくしたwidthにしたいというときとかに便利ですね。世の中にある画面の大きさがすべて同じだったら別に必要はないですが、スマホへのレスポンシブ対応等様々な画面幅に対応しなければならないことが多いので、そういう時にcalcはとても便利です。

引数

attr()を使うと、htmlタグ側から引数を受け取ることができます。ただし2023年4月現在はcontentプロパティのみです。今後はcolorにも対応するかもしれないみたいです。

<p data-hoge="好きな作品">ひろがるスカイプリキュア</p>

[data-hoge]::before: {
   content: attr(data-hoge) "---";
}

https://developer.mozilla.org/ja/docs/Web/CSS/attr

出力

少し書き方はややこしいですが、html側から値が受け取れます。colorが対応したら非常に便利そうですね。

最大最小値

こちらはコリスの記事を読んでもらえるとすごくわかりやすいです。

ネスト

CSSのみでネスト（入れ子）ができるようになりました。2023年4月現在、PC版のChrome,Safari,iOS版のSafariのみ使えます。

/*before*/
.parent {
    color:pink;
}
.parent > .child {
    color:blue;
}
.parent > .child .grandchild {
    color:green;
}

こういった書き方が

.parent {
    color:pink;

    >.child {
        color:blue;

        .grandchild {
            color:green;
        }
    }
}

とこんな感じで書けるようになりました。

<div class="parent">
      <h1>Parent</h1>
      <div class="child">
        <h2>Child</h2>
        <div class="grandchild">Grandchild</div>
      </div>
 </div>

こんな感じでネストが書けるようになりました。でもあまりネスト深く書きすぎると見通しがとても悪くなるので、使う際はなるべくネストを浅くして使いましょう。

Grid,Flexbox

現在のCSSでレイアウトを組むのに非常に重要な要素です。
display:flexを使うと、とても簡単に横並び、縦並びが表現できます。要素間の間隔もgapを使って設定でき、justify-contentでいい感じに要素の間隔を空けることもできます。

display:gridを使うと、横方向と縦方向の両方に要素を並べられます。ECサイトなどで商品をPCでは5列、スマホでは3列に並べたいなんて時に使ったり、ヘッダーやサイドメニュー、コンテンツ、フッダーのレイアウトを作成するのに使ったりもできます。

こちらに使い方をそれぞれ書くと、いろいろな機能があるのでそれだけで一つの記事が書けてしまうので、こちらもコリスに詳しい使い方が載っているので、ぜひ見てください。

三角関数

CSSでもsin() cos() tan()を使えるようになりました。こちらはアニメーションで変数とうまく組み合わせて使ったりすると、サインカーブを表現できたりするみたいです。そこまでの重要性はなさそうですが、使えるんだなって思っておいてください。

最後に

CSSでできることは5,6年前よりも大幅に多くなっています。Sass使わないとできなかったような記法もCSSだけでできるようになりました。コリス等で新しいCSSのプロパティの情報を追って、WebのUIの表現の幅を広げることを強くお勧めします！