こんにちは。制作部デザイナーの山本です。
2022年6月15日にMicrosoftが開発したWebブラウザ、Internet Explorer（以下IE）の公式サポートが終了しました。
今まではIEで正常な動作・表示を実現するためにモダンブラウザで使える新しい記述方法を諦めてきましたが、今後はIEというレガシーな環境に縛られることなくスマートで効率の良いCSSのコーディングを取り入れていくことが可能になります。
そこで今回はモダンブラウザでこれから使用していきたい便利なCSSを紹介したいと思います。

gapを使って要素間の余白をスマートに設定

flexboxを指定した要素の中で、子要素間の余白を指定する時、左右片方のmarginを指定してnth-childでn番目の余白を取ってみたり、paddingで左右の余白を設定してから親要素のmarginにネガティブ値を指定してはみ出ないようにしてみたりと、今まではさまざまな工夫をしてきました。
gapを使えば、flexboxもしくはgridレイアウト内の子要素の間の余白を実にスマートに指定することができます。

子要素に対してmarginやpaddingは一切指定せずに、flexbox内の子要素の隙間を取ることができています。

grid レイアウトの基本

gridレイアウトはflexboxと同じくレイアウトを指定するためのdisplayプロパティの値の一つです。flexboxが1行、1列といった1つの軸に沿ったレイアウトが対象だったのに対し、gridレイアウトは行・列複数の軸に対するレイアウトが対象となります。

girdレイアウトはその気になれば雑誌の様な複雑なレイアウトを実現することも可能ですが、基本的な指定方法さえ覚えてしまえばWebサイトでよく使うレイアウトを簡単に組み立てることができます。

gridの基本的な指定は以下2つのプロパティで記述することができます。

1. display:grid;
2. grid-template-columns

親要素にdisplay:grid;を指定して、grid-template-columnsプロパティでどの様なレイアウトにするのかを指定するだけです。以下はgrid-template-columnsの指定方法です。

レスポンシブなサイズ設定をclamp()で実現

widthプロパティで指定するサイズに単位vwを使うと、画面幅に応じたサイズを指定できますが、画面を大きく（小さく）するとサイズがどこまでも大きく（小さく）なってしまいます。そんな時にサイズの最大値、最小値をclamp関数で同時に指定することができます。

以下の（１）ではwidthにclamp関数を指定し、基本的な幅は80vwでレスポンシブですが、小さくなっても100px、大きくなっても500pxまでに制御できます。

そして、このclamp関数はfont-sizeにも使用することができます。（２）の例の様に、基本的なサイズは3vwとして画面幅に応じたサイズにしていますが、小さくても12pxまで、大きくなっても20pxまでのサイズに制御することができています。

サムネイル画像のトリミングをobject-fitで解決

CMSの記事一覧ページのサムネイル画像を設定する際など、どうしても投稿される画像のアスペクト比が統一できない場面があると思います。全て同じサイズのフレーム内で画像をトリミングしたい場合、object-fitプロパティが大変便利です。よく使うプロパティ値はcoverとcontainです。coverと設定すればフレームを全て覆う様にトリミングされ、containと設定すれば画像を全て収めた形でフレーム内に収めてくれます。

注意点としては、imgタグにwidth、heightを忘れずに指定するということです。

画像が横長であっても縦長であっても覆い隠す様にトリミングしてくれるcoverの指定は様々な場面で活躍しそうです。

画像の縦横比をaspect-ratioで感覚的に設定

レスポンシブデザインが当たり前となった今の時代、要素の縦横比を全てのデバイスで保つことができるということが非常に重要になってきています。IEに対応していた今までは、デスクトップパソコン、ノートパソコン、タブレット、スマホといったそれぞれのデバイスでいい感じの高さになるように要素のheight値を変えて対応してきました。

aspect-ratioプロパティを使えば、要素の縦横比を整数比として指定が出来、どのようなデバイスでも縦横比を保ったまま表示することができます。

次の例では縦：横が4：3となる様に指定しています。縦横比率の指定をしているため、1を指定すると正方形として調整されます。

any-hoverでマウスオーバーのスタイルを制御

PCなどでマウスオーバーをした時の動作を擬似クラス「:hover」で指定すると、マウスオーバーが検知できないタッチデバイスなどでは期待通り動かないというケースがあります。メディアクエリの「any-hover」を指定すれば、マウスポインタのあるデバイスかどうかを判定してくれます。

@media (any-hover: none){ hoverに対応していない }

@media (any-hover: hover){ hoverに対応している }

まとめ

今回ご紹介した記述を使うことで、効率の良いレスポンシブデザインが実現できる場面が増えてくるかと思います。
こういった新しい記述方法は、自分ひとりだけでなく、チーム間で共有することで初めて効率性が活きてきます。
どんどん共有してチーム全体のスキルを磨いていきたいですね。