【2023年版】最新トレンドCSS7つをコード付きで解説します！

IEのサポートがなくなってからここ数年、CSSはかなりの速度で進化をとげています。

これまでJavascriptに依存していたものがCSSのみで実現可能になったり、CSSでは難しかったレイアウトが簡単にできるようになる、そういった疑似クラスやプロパティが続々と増えています。

Javascriptの長いコードから短いCSSのコードで済む、開発者ライクなものが近年のCSSのトレンドとして上がっています。

今回は、そんな進化した最新のトレンドCSSをいくつかご紹介します。

【 :has 】要素のありなし判定

擬似クラスの「:has」はjQueryの「.has()」と同じ仕様です。特定の要素やclass、ID（子要素）がある親要素が指定できます。

例えばliにimgタグがある場合だけ横並びにしたいときは、以下のように指定できます。

<ul class="list">
  <li>
    <img src="img.png" alt="img">
    <p>テキスト</p>
  </li>
  <li>
    <p>テキスト</p>
  </li>
</ul>

.list li:has(img){
  display: flex;
  align-items: center;
}

• 

  テキスト

• テキスト

【 :is, :where 】要素をまとめて指定

擬似クラスの「:is」と「:where」を使うと、複数のセレクタをまとめて記述することができます。

【 :is 】

<section class="is">
  <h2 class="title">タイトル</h2>
</section>
<section class="is">
  <h3 class="title">タイトル</h3>
</section>
<section class="is">
  <h4 class="title">タイトル</h4>
</section>

今までのCSS。見出しの指定に3行使っています。

.is h2,
.is h3,
.is h4{
  color: #ff0000;
  font-weight: bold;
}

「:Is」を使ったときのCSS。1行で収まりましたね。

.is :is(h2,h3,h4){
  color: #ff0000;
  font-weight: bold;
}

以下のような表示になりました。

【 :where 】

続いて、「:where」です。

<section class="where">
  <h2 class="title">タイトル</h2>
</section>
<section class="where">
  <h3 class="title">タイトル</h3>
</section>
<section class="where">
  <h4 class="title">タイトル</h4>
</section>

.where :where(h2,h3,h4){
  color: #ff0000;
  font-weight: bold;
}

ここまでは「:is」と同じ動作です。一体何が違うのでしょうか。

「:is」と「:where」の違い

「:is」と「:where」で何が違うのか、例として以下のようなCSSを追加してみます。
すると「:where」のスタイルが上書きされました。

.title{
  color: #000;
}

ここからわかることは「:where」はセレクタ定義の詳細度が低いということです。

「: where」は詳細度が常に0なので、上書きされたスタイルが優先になります。
優先度は低いけど複数のセレクタを指定したい、あるいはCSSリセットなどで「: where」が使えるかもしれません。

【 :modal 】モーダル実装

ポップアップやダイアログをつくりたいとき、これまではかなりJavascriptに依存していましたが、「:modal」を使えば開いたときのレイアウトや背景などほとんどのパーツをCSSで設定できます。
長いJavascriptのコードをわざわざ書いたり、ライブラリを探す手間が省けそうですね。

以下の2種類が「:modal」が使える条件です。

• showModalメソッドを使用するdialog要素
• フルスクリーン モードになっている要素

この条件に当てはまると「::backdrop」疑似要素を使用できます。
dialogタグは仕様で元々非表示になっています。

<button id="open">モーダル開く</button>
<dialog id="modal" class="modal">
  <div class="modal__inner">
    <p>モーダル</p>
    <button id="close">閉じる</button>
  </div>
</dialog>

.modal {
  place-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}
.modal__inner{
  min-width: 200px;
  background: #fff;
  padding: 40px;
  text-align: center;
}
.modal[open] {
  display: grid;
}
.modal[open]:modal {
  background-color: transparent;
}
.modal[open]:modal::backdrop {
  background-color: rgba(0, 0, 0, 0.7);
}

Javascriptの記述もかなり少ないです。

const open = document.getElementById('open');
const modal = document.getElementById('modal');
const close = document.getElementById('close');
open.addEventListener('click', () => {
  modal.showModal();
});
close.addEventListener("click", () => {
  modal.close();
});

【 scroll-behavior: smooth; 】スムーススクロール

アンカーリンクもCSSのみでできるようになりました。

<div class="contents">
  <header class="navigation">
    <ul>
      <li><a href="#contents01">コンテンツ1</a></li>
      <li><a href="#contents02">コンテンツ2</a></li>
      <li><a href="#contents03">コンテンツ3</a></li>
    </ul>
  </header>
  <section class="section" id="contents01">
    <h2>コンテンツ1</h2>
  </section>
  <section class="section" id="contents02">
    <h2>コンテンツ2</h2>
  </section>
  <section class="section" id="contents03">
    <h2>コンテンツ3</h2>
  </section>
</div>

html {
  scroll-behavior: smooth;
}
.navigation {
  height: 60px;
}
.navigation ul {
  display: flex;
  gap: 0 10px;
}
.section {
  scroll-margin-top: 60px;
}

【 masonry 】Masonryレイアウト

長年悩まされていた人も多いであろう、あのPinterest風なMasonryレイアウトがついにCSSでできるようになりました。

「grid-template-rows」または「grid-template-columns」に「masonry」を指定するだけで実装できます。

<ul class="masonry">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
</ul>

.masonry{
  display: grid;
  gap: 1rem;
  grid-template-rows: masonry;
  grid-template-columns: repeat(4, 1fr);
}
.masonry li{
  padding: 30px;
  background: #eee;
  border: 3px solid #000;
  text-align: center;
}
.masonry li:nth-child(2){
  padding-bottom: 50px;
}
.masonry li:nth-child(5){
  padding-bottom: 80px;
}
.masonry li:nth-child(6){
  padding-top: 80px;
}
.masonry li:nth-child(10){
  padding-bottom: 70px;
}

まだ対応ブラウザがないため、下のサンプルでは若干の崩れが見られます。
詳細は「対応ブラウザ」をご覧ください。

【 text-wrap: balance 】バランスよく折り返し

「text-wrap: balance;」を指定することでテキストを自動的にバランスよく折り返してくれます。

<p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
<p class="balance">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>

.balance{
  text-wrap: balance;
}

適用しているテキストとしていないテキストで見比べると違いがわかります。

こちらを使う際に2点ほど注意点があります。

• 4行より長いと適用されない
  「text-wrap: balance;」は全テキストに適用することが推奨されていません。見出しや短文で気になるところだけに使うのに適しています。
• white-spaceプロパティと競合する
  どちらも改行系のプロパティなのでお互いのスタイルを上書きします。どちらかが効かない場合は競合していることが多いです。

まとめ

こうしてまとめてみると近い将来Javascriptがいらなくなるのでは？と思わせるほどCSSが進化しています。ソースコードも簡潔になって容量も抑えられそうなのでSEOにも繋がりそうです。

まだ全ブラウザ対応できていないものも多いですが、近い将来対応したときには積極的に使いたいですね。