WEB制作するなら知っておきたい便利なCSSプロパティ3選！

みなさん、こんにちは。
MEGIDO(メギド)です。

たくさんあるCSSのプロパティ。
こうしている内にもCSSはどんどん進化していっていることでしょう。

進化のスピードが早いので「こんなCSSプロパティがあったんだ！？」と
思うこともしばしばあります。

そこで今回は自分が直近知った便利なCSSプロパティを紹介します。
もし知らなかった人はこれを機に使用してみてください。

便利なCSSプロパティ：font-smoothing

「font-smoothing」はブラウザ上の文字をなめらかに表示させる為のプロパティです。

フォントの種類やブラウザによってはテキストがギザギザしていて
読みにくい、、、みたいになっている場合もあるかと。

そんな場面で活躍してくれるのが「font-smoothing」になります。

上記をCSSで指定することで「ピクセルのレベルでフォントを滑らか」になります。

font-smoothingは下記をご覧の通りモダンブラウザでしか利用できないですが、
文字の表示がおかしいと感じる場合は入れておいて損はないとプロパティです。

便利なCSSプロパティ：scroll-snap

「scroll-snap」はお洒落そうなサイトなどでよくみる
1セクションごとにスクロールさせたい時に使えるプロパティです。

このアニメーションがcssでできると思っていなかったのでかなり意外でした。

「scroll-snap」以外にもcssを指定しないといけないですが、下記のようにcssを指定することで
1セクションごとにページをスクロールすることが可能になります。

親要素(上記の場合は.container)に「scroll-snap-type」を指定して
子要素に(上記の場合は.section)に「scroll-snap-align」を指定することで
1セクションごとにページをスクロールすることができます。

「scroll-snap」の各ブラウザの対応状況は下記の通りです。

便利なCSSプロパティ：min()

「min()」は2つの値のどちらか小さい方を使いたいときの為のプロパティです。
画像などの横幅を指定する時に便利なプロパティになります。

今までだと画像の大きさは○○pxまでにしておきたいという場合は

このような書き方でしたが、min()プロパティを使用すると

1行で書くことが可能になります。

この「min()」プロパティと同じようなプロパティとして「max()」プロパティもあります。
「max()」は2つの値のどちらか大きい方を使用したい時に使うプロパティです。

レスポンシブ対応時に画像やフォントの大きさを
調整したい時に使いたいプロパティだと思います、

まとめ

今回は「直近知った便利なCSSプロパティ」簡単に紹介しました。
cssもかなり進化していて以前だとjsを使用しないとできなかったことも
cssだけでできるようになってきている印象です。

便利なものを使用しないわけにはいかないので
これからも情報のアンテナをはって学習していきたいと思います。

新しいcssを使用する場合はブラウザの対応が
どうなっているかだけは調べるようにしておきましょう。

それでは今回はここまで。
最後までお読みいただきありがとうございました。