Webブラウザの進化とともに、CSSも進化しています。

今までは Javascript 数行で実装していたものが CSS1 行で済んだりと、便利で使いたくなる、進化したCSSの新機能をご紹介します。

知らなかった便利な書き方があるかもしれません！

CSSの使い勝手や表現を大きく向上させる「モダンCSS」

コンテナクエリ

親コンテナに基づいてスタイルを定義できるCSSの新機能です。

ブラウザの横幅などに応じて応じて異なるスタイルを適用するのがメディアクエ ですが、画面内のコンテナの横幅等に応じて異なるスタイルを適用するのがコンテナクエリです。

コンテナクエリって何？メディアクエリと何が違うの？

「メディアのサイズ（ビューポート）を基準として命令を出すものがメディアクエリ」であるのに対し、「コンテナ（祖先要素）のサイズを基準として命令を出すものがコンテナクエリ」になります。

レスポンシブWebデザインでは、メディアのサイズが〇〇px以下になったらレイアウトを切り替えるといった「メディアのサイズ」を基準としていましたが、場合によってはどうしてもPC・タブレット・スマホ間でレイアウトが崩れやすくなるタイミングもあります。

そのような場合「メディアサイズ」ではなく「コンテナサイズ」を基準とした方が考えやすくなります。

コンテナクエリは親要素のサイズよってスタイルを適用することができるため、コンテナごとにレイアウトの調整が可能になり、複雑なデザインでも実現できます。

See the Pen Untitled by 野々下プランニングA (@uluffpkv-the-styleful) on CodePen.

:has()セレクタ 

今まで親要素に基づいて子要素を選択することはできても、子要素によって親要素を指定することはできませんでした。

しかし、:has()を使えば、「特定のクラスを持つ子要素を含む親要素だけにスタイルを適用する」といったことが可能です。

See the Pen Untitled by 野々下プランニングA (@uluffpkv-the-styleful) on CodePen.

:nth-child()「of S」構文

:nth-child()セレクタは、親要素の中の特定の順序の子要素（◯番目）の要素を選択するのに使われてきましたが、「of S」構文を使うと、特定のクラスやタイプの子要素の中で、特定の順序にある要素を選択することができるようになります。

See the Pen Untitled by 野々下プランニングA (@uluffpkv-the-styleful) on CodePen.

.appleクラスを持つアイテムのうち、3番目に来る要素（3番目のりんご）に、特定のスタイルが適用されます。

text-wrap: balance

このプロパティは、テキストの改行を読みやすくするためのものです。

通常、テキストはコンテナの幅に合わせて折り返されますが、行の長さが均等にならないことがあり、見た目の悪さや読みにくさを感じることもありました。

text-wrap: balanceプロパティを使用すると、テキストが均等に分散され、各列の行の長さが均一になります。

See the Pen Untitled by 野々下プランニングA (@uluffpkv-the-styleful) on CodePen.

例を見ると読みやすいか？綺麗かどうか？は疑問ですが、見た目のバランスを重視するキャッチコピーなどはいいかもしれません。

イニシャルレター（initial-letter）

このプロパティは、文章の最初の文字を大きく装飾する「イニシャルレター」が簡単に作れます。

イニシャルレターは雑誌や書籍でよく使われるデザインで、webでもinitial-letterを用いて目を引くデザインの実現が可能になります。

See the Pen Untitled by 野々下プランニングA (@uluffpkv-the-styleful) on CodePen.

例では最初の文字を2行分の高さにし、色を赤にしています。

ダイナミックビューポート単位 

従来のビューポート単位（vh、vw、vmin、vmax）は、ビューポートの初期サイズに基づき要素のサイズを決定しますが、端末のナビゲーションバーの表示・非表示に影響され、意図しないサイズになってしまいます。

従来のビューポート

vw	viewport width	ビューポートの幅に対する割合
vh	viewport height	ビューポートの高さに対する割合
vmin	viewport minimum	ビューポートの幅と高さのうち、値が小さい方に対する割合
vmax	viewport max	ビューポートの幅と高さのうち、値が大きい方に対する割合

例えば、基準となるビューポートの幅を vwで表すと 100vwです。
iPhone12のビューポート幅は390pxですが、10vwはその1/10の39pxとなります。

新たなダイナミックビューポート単位

これに対し、ダイナミックビューポート単位は、ビューポートのサイズが変更されると、要素のサイズも動的に調整されます。
そのため、動的なブラウザツールバー（上部のバーなど）が表示されても、レイアウトが適切に調整されます。

svw	メニューなどのUIが表示されたときのビューポートの横幅
svh	ビューポートの高さが最小になった場合の高さ
lvw	メニューなどのUIが表示されていないときのビューポートの横幅
lvh	メニューなどのUIが表示されていないときのビューポートの縦幅
dvw	現在表示されている画面のビューポートの横幅
dvh	現在表示されている画面のビューポートの縦幅

アスペクト比（aspect-ratio）

aspect-ratioとは、アスペクト比を保持するためのCSSプロパティです。

スペクト比とは、画像や画面の縦と横の長さの比率（縦横比）のことで、例えば、640px × 480pxの画像のアスペクト比は「4:3」です。
アスペクト比を考慮してコーディングすることで、画面幅が変わってもアスペクト比を保持したまま、正しいレイアウトを表示できるようになります。

See the Pen Untitled by 野々下プランニングA (@uluffpkv-the-styleful) on CodePen.

例のように、レスポンシブデザインで、どんな画像でも正方形にトリミングしたいといった場合、aspect-ratioを使えば可変で横幅に合わせて縦幅を算出することも簡単にできます。

メディアクエリの比較演算子

メディアクエリで比較演算子（>=, <=）を使用できるようになり、今までは400px以上の幅の場合、@media (min-width: 400px){}と定義していましたが、@media (width >= 400px){}と記述でき、直感的で使いやすくなりました。

比較演算子だと、400pxを含む「以上」というのも分かりやすいですね。

gap

行や列の間のすき間（溝）を設定するプロパティです。

余白はmargin、paddingを使うのが一般的ですが、要素がグリッド形式で並ぶ場合、各カード間の余白の付け方は面倒です。
そういった場合にもdispaly: flex（もしくはdisplay: grid）とgapプロパティを組み合わせることで、簡単に余白をつけることができます。

See the Pen Untitled by 野々下プランニングA (@uluffpkv-the-styleful) on CodePen.

コーディングのテクニックは日々進化しており、レスポンシブWebデザインにおいて細やかな設定がしやすくなり自由度が高まりましたね！

進化を生かしていけるように、取り入れて、使い方を探っていきたいと思います。

プランニングA　野々下