実装が楽になる！ちょっと便利なCSS３選

はじめに

最近はIEサポートが終了したことや各種ブラウザのアップデートにより使用できるCSSプロパティが増えてきました。
その中でも実際に使ってみて便利だと思ったCSS３種類をご紹介します！

1. 上下中央配置

今まではFlex boxを使って３行で書いていましたが、Gridなら2行で書くことができます。
ここまでくると1行で書けるようになるのもそう遠くはないでしょう。（期待）

Flex box

.flex {
    display: flex;
    align-items: center;
    justify-content: center;
}

Grid layout

.grid {
    display: grid;
    place-items: center;
}

2. スムーススクロール

JavaScriptで実装することが多かったスクロール設定をなんと１行で実装することができます。

html {
    scroll-behavior: smooth;
}

注意
固定ヘッダーがある場合はアンカーリンクのスクロール時にヘッダーと要素が重なってしまう恐れがあります。
その場合はscroll-margin-topを使って固定要素分のマージンを設けてあげましょう。

scroll-margin-top

アンカーリンク設定要素に指定する。

.anchor {
    scroll-margin-top: 50px;
}

3. アスペクト比

padding topの呪文で実装してたアスペクト比もaspect-ratioを使えば直感的に実装できます。
しかもレイアウトシフトを防ぐこともできる。

padding-top法

.aspect {
    width: 100%;
    padding-top: 56.25%;
}

aspect-ratio

.aspect {
    width: 100%;
    aspect-ratio: 16 / 9;
}

おまけ

CSSネスト

SassのようにCSSを入れ子にして実装することができます。
今時Sass使うから必要ないだろと思いましたが、CSSしか使えないプロジェクトで使うことができるので地味に便利です。
ただ対応ブラウザがまだ少ないので実務で使えるのはもう少し先でしょう。

.block {
  .text {
    color: #000;
  }
}