今すぐ使いたい！モダンCSS新機能の活用法

光陰矢の如し、気づけばもう2024年も終わりを告げ、新年を迎えました。
毎年毎年、1年があっという間に過ぎていくと感じています。

技術の発展も光の速さ(体感)で進んでいき、
定期的にキャッチアップしないとどんどん取り残されていく感覚に陥りますね。

CSSの進化も目覚ましく、以前なら複雑な書き方をしていたものも新しいプロパティで即解決なんてことも...！
便利な機能が気づけばすべてのブラウザで対応しているなど、使わなければもったいない！

ということで今回は、モダンCSSの中からよく使われる・活用したい機能に注目して紹介していきます。

■目次
・CSS Nesting
・:has() :is() :where() 擬似クラス
 ・@container Queries
・Media Queries: Range syntax
・ダイナミックビューポート単位

※CSS Gridに関連する内容については、
　別途記事にまとめたいと思いますので、今回は割愛します。

CSS Nesting

CSS Nestingは、CSSのコード構造をより簡潔かつ直感的に記述できるようにする新しい機能です。この機能は、従来のCSS記述方法と比べて、HTMLの構造をより忠実に反映するスタイルを記述できる点で注目されています。

【CSS Nestingとは？】
CSS Nestingは、セレクター内で子セレクターをネスト（入れ子）にして記述できる仕様です。これにより、CSSコードが階層的に整理され、視覚的にHTMLのDOM構造に近いスタイルの指定が可能になります。
従来のCSSでは、要素の階層が深い場合、セレクターを繰り返し記述する必要がありました。しかし、CSS Nestingを使用すれば、それを簡潔に書けるようになります。

従来のCSS記述例

.card {
  display: flex;
  padding: 16px;
}
 
.card .card-title {
  font-size: 24px;
  font-weight: bold;
}
 
.card .card-content {
  font-size: 16px;
  color: #555;
}

CSS Nestingを使った記述例

.card {
  display: flex;
  padding: 16px;
 
  & .card-title {
    font-size: 24px;
    font-weight: bold;
  }
 
  & .card-content {
    font-size: 16px;
    color: #555;
  }
}

上記の例では、ネスト構造を用いることで「.card」のスコープ内でのスタイル指定を視覚的に整理できます。

繰り返し記述するセレクターが不要になり、コードがスッキリと見やすくなりますね。
コード量が削減されると、保守性が上がり、開発がシンプル化され作業効率の向上にも期待できます。
ただし、階層を深くしすぎるとコードが複雑になり、かえって読みにくくなる可能性があります。
2～3階層までに抑えると良さそうです。

:has() 擬似クラス

:has()擬似クラスは、従来のCSSでは難しかった条件付きスタイリングを簡潔に実現できる強力なツールです。

【:has() 擬似クラスとは？】
:has() はCSS Selectors Level 4で導入された擬似クラスで、親要素が特定の子要素を持っているかどうかをチェックできます。これにより、HTML構造をより動的にスタイル付けできるようになります。

従来のCSSとの違い

以前のCSSでは、子要素に基づいて親要素をスタイル付けすることは困難でした。このようなニーズを満たすにはJavaScriptを使用する必要がありましたが、:has() を使うことでCSSのみで簡単に実現できるようになりました。

:has()を使った記述例　～フォームのエラーハイライト～

input フィールドの中でエラーが発生している場合、その親要素全体を強調表示したいとします。

<form>
  <div class="form-group">
    <input type="text">
  </div>
  <div class="form-group">
    <input type="text" class="error">
  </div>
</form>

以下のCSSを使用すれば、エラークラスを持つ input の親要素 .form-group のみを強調できます。

.form-group:has(.error) {
  border: 2px solid red;
}

このように親要素の条件付きスタイリングや動的なHTML構造の操作が、JavaScriptを用いずにCSSのみで簡単に実装できるようになるのはとても魅力的ですね。

@container Queries

CSSにおける@container Queriesは、コンテナベースのスタイリングを可能にする新しい仕組みです。従来のレスポンシブデザインは、主にビューポートのサイズに基づいてスタイルを切り替える「メディアクエリ（@media）」に依存していましたが、@container Queriesは、要素自身のサイズや特性に応じてスタイルを動的に変更できる点が特徴です。

@container Queriesの基本

@container Queriesは、以下の2つの概念を中心に成り立っています。

コンテナ（Container）
コンテナとは、@container Queriesの基準となるHTML要素を指します。この要素のサイズや特性を基に、内部の要素のスタイリングを決定します。

コンテナクエリ（Container Query）
コンテナの幅や高さ、特定の条件に基づいてCSSスタイルを適用します。これは従来のメディアクエリと似ていますが、ビューポートではなく、特定の要素に依存します。

実際の活用例

以下は、@container Queriesを用いてボタンデザインを動的に変更する例です。

<div class="card">
  <button class="btn">Click Me</button>
</div>

/* コンテナを定義 */
.card {
  container: size;
  width: 100%;
  max-width: 600px;
}
 
/* コンテナのサイズに応じたスタイリング */
@container (min-width: 400px) {
  .btn {
    font-size: 1.5rem;
    padding: 1rem 2rem;
  }
}
 
@container (max-width: 399px) {
  .btn {
    font-size: 1rem;
    padding: 0.5rem 1rem;
  }
}

cardの幅が400px以上の場合、大きめのボタンデザインが適用。
幅が399px以下の場合、コンパクトなボタンが適用。

メディアクエリとは異なり、コンテンツ幅によってスタイルが変えられるのは、より柔軟なスタイリングを可能とし表現の幅が広がりそうです。

Media Queries: Range syntax

Media QueriesはレスポンシブWebデザインを実現するための重要な技術ですが、その中でも「Range Syntax（範囲指定）」は、特定の条件に基づいてスタイルを適用するために非常に便利な方法です。

【Range Syntaxとは？】
Range Syntaxは、特定の条件を範囲として指定することで、メディアクエリを効率的に記述できる方法です。従来の書き方では、範囲指定を行う際に複数の条件を組み合わせる必要がありましたが、Range Syntaxを使うと直感的に記述できます。

従来の記述

@media (min-width: 600px) and (max-width: 1200px) {
  /* この範囲内で適用するスタイル */
}

Range Syntaxを使用した記述

@media (600px <= width <= 1200px) {
  /* この範囲内で適用するスタイル */
}

このように、範囲指定を直感的かつ簡潔に記述できるため、コードの読みやすさが向上します。

Range Syntaxの基本ルール

①比較演算子を使用
Range Syntaxでは、<, <=, >, >=のような比較演算子を用います。これにより、指定したプロパティの範囲を簡潔に定義できます。

②プロパティ名を明確に記述
比較演算子の両側にプロパティを記述します。例えば、widthやheightなどが一般的です。

③順序の柔軟性
以下のように順序を変えて記述することも可能です。

@media (600px <= width <= 1200px) { ... }
@media (width >= 600px) and (width <= 1200px) { ... }

先ほどのコンテナクエリでも使用することができます。

@container (700px <= width <= 1200px) {
  .card h2 {
    font-size: 2em;
  }
}

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

CSSでは、ビューポートの幅や高さに基づいたレイアウトを作るために、従来のビューポート単位（vh、vw、vmin、vmax）が使用されてきました。
これらの単位は画面サイズに基づいており、レスポンシブデザインを実現する上で非常に便利です。しかし、スマートフォンやタブレットのようなモバイルデバイスでは、ブラウザのUI（アドレスバーやツールバー）が表示されたり隠れたりすることで、ビューポートサイズが動的に変化するという問題がありました。この影響で、vhの値が期待通りに動作しないケースが発生します。

ダイナミックビューポート単位は、この問題を解決するために設計されました。これにより、ブラウザのUIの表示状態にかかわらず、一貫性のあるビューポートサイズが使用できます。新しく導入された単位は以下の通りです。

dvh（Dynamic Viewport Height）
ブラウザのUIによる影響を考慮したビューポートの高さ。
dvw（Dynamic Viewport Width）
ブラウザのUIによる影響を考慮したビューポートの幅。
dvmin（Dynamic Viewport Minimum）
幅と高さのうち、小さい方を基準としたダイナミックなビューポート値。
dvmax（Dynamic Viewport Maximum）
幅と高さのうち、大きい方を基準としたダイナミックなビューポート値。

ダイナミックビューポート単位の使い方

.hero {
  height: 100dvh; /* ブラウザUIに影響されない高さ */
  width: 100dvw; /* ビューポート幅の100% */
  background: linear-gradient(to bottom, #4a90e2, #50e3c2);
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.text {
  font-size: 5dvmin; /* ダイナミックな最小ビューポート値を基準 */
  color: white;
}

このコードでは、heroセクションが常にブラウザの表示可能領域全体を占めるように調整され、textのフォントサイズもデバイスのサイズに応じて動的にスケールします。

モバイルデバイスでの作成の際に、100vhではうまくいかなかった挙動が、このダイナミックビューポートにより、動的に変化する状況でも適切なサイズを保つことができるようになるのは本当に助かりますね。

まとめ

モダンCSSの進化は、私たちのウェブ開発の在り方を大きく変えています。これまで手間や工夫が必要だったスタイリングが簡単かつ直感的に実現できるようになりました。これらの新機能を活用することで、コードの効率化やメンテナンス性の向上はもちろん、より柔軟で適応性の高いデザインを実現できます。

ただし、新しい機能を活用する際には、ブラウザ対応状況や使いすぎによる複雑さの増加にも注意が必要です。技術の進化を楽しみつつ、プロジェクトに最適な方法を見極めることが重要です。

モダンCSSは、今後もさらなる進化を遂げていくでしょう。この機会に新しい機能を学び、日々の開発に取り入れてみてはいかがでしょうか？技術をキャッチアップしながら、開発効率とデザインクオリティを向上させる一歩を踏み出しましょう！

最後までお読みいただき、ありがとうございました。モダンCSSの新機能を活用したウェブデザインについて、少しでもお役に立てたなら幸いです。

もし、この記事で紹介した内容や、その他のウェブデザインに関するご相談がございましたら、ぜひお気軽に当社までお問い合わせください。当社では、最新の技術を活用したウェブサイト制作やスタイリングのアドバイスなど、幅広く対応しております。

ぜひお気軽にお問い合わせください。皆さまのご連絡を心よりお待ちしております！

森田

デザインからコーディング、フロントエンド・CMS構築に奮闘するデザイナーです。ものづくりと釣りが趣味のミニチュア好き。