BLOG MENU

【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;
}

テキスト
テキスト

対応ブラウザ

2023年8月時点ではFirefox以外で対応されています。
https://caniuse.com/css-has

【 :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」が使えるかもしれません。

対応ブラウザ

どちらもほとんどのモダンブラウザで対応しています。
https://caniuse.com/?search=%3Ais()
https://caniuse.com/?search=%3Awhere()

【 :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();
});

↓↓ここをクリックするとモーダルが開きます。

対応ブラウザ

新しいバージョンではすべてのモダンブラウザで対応しています。
https://caniuse.com/mdn-css_selectors_modal

【 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;
}

↓↓ここをクリックするとスクロールします。

コンテンツ1

コンテンツ2

コンテンツ3

対応ブラウザ

新しいバージョンではすべてのモダンブラウザで対応しています。
https://caniuse.com/css-scroll-behavior

【 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;
}

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

対応ブラウザ

2023年8月時点ではSafariのバージョン17から対応です。
Safariのバージョン17はまだベータ版なので、現時点では対応できているブラウザがありません。
https://caniuse.com/?search=masonry

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

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

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

.balance{
  text-wrap: balance;
}

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

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

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

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

対応ブラウザ

2023年8月時点ではChrome、Edgeのみで対応されています。
https://caniuse.com/css-text-wrap-balance

まとめ

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

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

この記事を書いた人

クーシーブログ編集部

1999年に設立したweb制作会社。「ラクスル」「SUUMO」「スタディサプリ」など様々なサービスの立ち上げを支援。10,000ページ以上の大規模サイトの制作・運用や、年間約600件以上のプロジェクトに従事。クーシーブログ編集部では、数々のプロジェクトを成功に導いたメンバーが、Web制作・Webサービスに関するノウハウやハウツーを発信中。