こんにちは！デザイナーのasaです。
業務の関係上コーディングの機会が増えてきた今日このごろ。IEともサヨナラしたため、どんどんCSSの幅が広がってきたように感じます。そこで私自身もよく使う便利なCSSを5つご紹介します。

基本的に主要ブラウザには対応していますが、中には対応してからは日が浅いものもあるので、「Can I use」などで状況を確認してから使用を検討してください。

gap

gapはFlexbox、Grid使用時の要素の間隔を指定できます。これめっちゃ使いますね。
これまではmarginを指定してnth-childでn番目だけmaginをなくして調整したりあの手この手で対応していました。レスポンシブでカラム数が変わった時の調整など何かと不便だったのですが、gapのおかげで簡単に指定することができます。
 
例えば3カラムで要素の間隔を30pxにしたいなら、

diplay: grid;
grid-template-columns: repeat(3,1fr);
gap: 30px;

 
これで終わりです。gap:30pxは縦方向・横方向まとめての指定になるので、縦方向は20px、横方向は40pxとしたい場合は以下のように書くと指定できます。

gap: 20px 40px;

 
厳密には縦方向はrow-gap、横方向はcolumn-gapで指定できますが、基本的にgapでまとめて指定できるのでほぼ使いません。
 

aspect-ratio

aspect-ratioはボックスのアスペクト比（縦横比）を指定できます。
レスポンシブ対応で縦横比を保ったまま拡大・縮小となるとこれまではpadding-topを指定して無理やりボックスを作ってきました。
 
たとえば16:9の比率にする場合

padding-top: 56.25%;

 
こんな書き方をしていました。ただどうも無理やり感ありますし、画像を置く場合、親要素にpadding-topを指定して子要素に画像を置いて……と割とめんどうだなと思っていました。Flexboxを併用すると親要素の幅に左右されるためおかしなことになったりと…
これを解決するのがaspect-ratio
上記の場合だと

aspect-ratio: 16 / 9;

 
ぱっと見で比率がわかるので視覚的に分かりやすいですね。比率をそのまま書けばいいので余計な計算もする必要ありません。また次に紹介するobject-fitと併用するとカード型のレイアウトが簡単に実装できます。
 

object-fit

object-fitは画像のトリミングです。
カード型のレイアウトでありがちなのがアスペクト比がバラバラの画像ですよね。
 
例えばコーディング知識のない人がブログなどを投稿する際、いちいちそんなことまで考えて投稿してくれません。知識があってもいちいちトリミングしてからアップするのはめんどうです。
なのでcss設計の段階でトリミングするのがベストなんですが、結構コードが多くなるんですよね。先ほどのpadding-topにposition: relative;指定して画像を子要素にabsoluteで配置してどうのこうの…
ですがobject-fitとaspect-ratioを併用すれば簡単です。
 
例えば4:3のサムネイル画像を置く場合

img {
　　width: 100%;
 height: auto;
 aspect-ratio: 4 / 3;
 object-fit: cover;
}

 
これだけで元画像の縦横比を気にせず均一なサムネイルが出来ます。
coverを指定するとボックス内いっぱいを画像が覆って、はみ出た分はトリミングされます。元画像の縦横比をそのまま維持してボックス内に収めたい場合は

object-fit: contain;

 
を指定するようにしてください。
 

@media (hover: hover)

ボタンに「:hover」を指定して動きをつけることが多々あると思います。
ただスマホにはホバーの概念がありません。では「:hover」で動きをつけた場合、スマホではどのような挙動になるのか？
ボタンをタップすると「:hover」でつけた動きが実装されます。そして別の場所をタップするとホバーが離れたと判定されて元の状態に戻ります。なのでボタンで別ページへ飛んだ後、ブラウザバックするとホバーされた状態で止まっています。
なんか違和感あるし、そもそもスマホにホバー用のアニメーションいらんよねってことで紹介するのが@media (hover: hover)。
 
使い方は簡単。

.link {
 color: #fff;
}
@media (hover: hover) {
 .link:hover {
  color: #000;
 }
}

 
@media (hover: hover) 内にホバー用のアニメーションを書くだけです。
@media (hover: hover) でデバイス環境にhover機能があるか判定してくれるので、スマホの時には無効となってくれます。

min(), max(), clamp()

最後に紹介するのがmin(), max(), clamp()の比較関数です。
比較関数は要素の最小値、推奨値、最大値を指定することができます。これまでにもmax-widthやmin-widthなどありましたが、clamp関数では一括で指定できるだけでなく、font-sizeにも利用できるところが最大の魅力かと思います。
 
例えば見出しなどタイトルを「vw」で指定することで拡大・縮小できるようにした場合、ウインドウ幅がいっぱいの時に文字がでかすぎる！ってなることありませんか？逆もしかりで小さすぎるといったことも。
そんな時に使うのが比較関数。
 
まずは最大値を決めたい場合

font-size:min(3vw,36px);

 
これで基本は3vwで最大36px以上大きくなることはありません。
 
逆に最大小値を決めたい場合

font-size:max(20px,3vw);

 
これで基本は3vwで最小22px以下より小さくなることはありません。
 
さらに最小値、推奨値、最大値すべてを指定する場合は

font-size:clamp( 20px, 3vw, 36px) ;

 
これで最小値20px、推奨値3vw、最大値36pxとなります。
もちろんフォントサイズ以外の指定にも利用できるので、非常に便利です。
 

まとめ

今回挙げたcss以外にもコンテナクエリ（@contaienr）や:has()擬似クラスなど便利なものがいろいろ出てきていますが、2023年10月現在ではまだまだ新しいのでもう少し浸透したら紹介したいと思います。
とにかくどんどん新しいcssが出てきて、これまで長いコードや時にはjavascriptで書かなければいけなかったものが、cssだけで簡単に対応できるようになっています。Webの進化は本当に早いので取り残されないようアンテナを張って、また便利なものがあれば紹介していきたいと思います。

また弊社ではWEBやDTPの制作からマーケティングまでワンストップで対応していますので、お気軽にお問い合わせください。