COOSY BLOG
  • HOMEホーム

  • SERVICEサービス

    • サービスTOP
    • Web制作
    • ブランディング
    • デジタルマーケティング
    • 戦略企画
    • DX推進・システム開発
    • グローバル展開
  • WORK制作実績

    • 制作実績TOP
    • コーポレートサイト
    • 採用サイト
    • ECサイト
    • プロモーション
    • サービスサイト・SaaS
    • システム開発
  • ABOUTクーシーについて

    • クーシーについて
    • 会社情報
    • 私たちが大切にしていくこと
    • お知らせ
    • クーシーラボ岩手
    • ロンドン支社
    • ミャンマー支店
  • BLOGブログ

  • RECRUITリクルート

  • Contactお問い合わせ

BLOG MENU

  • BLOGトップ
  • 目的別

    • 目的別TOP
    • コーポレートサイト
    • ECサイト
    • オウンドメディア
    • 採用サイト
    • プロモーション
    • Webサービス
    • LP
    • ブランディング・CI
  • Web制作ハウツー

    • Web制作ハウツーTOP
    • UIUX・サイト設計
    • WebデザインTips
    • PM/ディレクション
    • フロントエンド(HTML/CSS)
    • 撮影・動画編集
    • ライティング
    • CMS
    • Web制作ツール
    • イラスト
  • システム開発

    • システム開発TOP
    • プログラミング
    • EC構築
    • CMS開発・構築
    • サーバ構築
    • データベース構築
    • セキュリティー
  • Webサイト運用のコツ

    • Webサイト運用のコツTOP
    • サイト運用・管理・保守
    • コンテンツ運用
    • CRM(顧客管理)
  • Webマーケティング

    • WebマーケティングTOP
    • SEO対策・トレンド
    • コンテンツ制作・SEOライティング
    • アクセス解析
    • Web広告
    • Web集客ハウツー
  • 特集

    • 特集TOP
    • Web最新トレンド
    • カルチャー
    • ガジェット

Share on

  • Xでシェアする
  • Facebookでシェアする
  • このエントリーをはてなブックマークに追加

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

  • Web制作ハウツー
  • 特集
  • フロントエンド(HTML/CSS)
  • Web最新トレンド
【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;
}
  • img

    テキスト

  • テキスト

対応ブラウザ

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

コンテンツ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;
}

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

対応ブラウザ

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サービスに関するノウハウやハウツーを発信中。

お問い合わせはこちらから

Web制作デザイン、丸ごとお任せ

お問い合わせする

2023/09/20

テキスト:仲村ゆりの デザイン:津畑 クミ

Share on

  • Xでシェアする
  • Facebookでシェアする
  • このエントリーをはてなブックマークに追加
お問い合わせはこちら

フロントエンド(HTML/CSS)・Web最新トレンドの関連記事はこちら

  • 【2月版】知っておきたい2025年Webデザインニュース!海外から最新情報をご紹介!

    2025年Webデザインの最新トレンドを海外からいち早くピックアップ!Photoshopのライブ共同編集機能、新作デザインツールTOP3、AI動画生成の最前線など、気になる情報をギュッとまとめました。Web制作者、デザイナー、マーケター必見の内容です。

    • Web最新トレンド
  • 【Webデザイン最新アイデア】プロも絶賛! 超参考になる「ギャラリー・まとめサイト」32選

    今回は、最新のWebデザインアイデアをチェックできるおすすめのWebギャラリーサイトを、デザインに強みを持つWeb制作会社クーシーが厳選してご紹介します。ぜひ活用して、デザインのヒントを見つけてみてください。

    • WebデザインTips
    • Web最新トレンド
  • 【Web担当者必見】2025年春、今押さえるべきWeb業界ニュースまとめ

    2025年の春(3〜4月)に話題となった最新のWeb業界ニュースを厳選してまとめました。Webマーケティング、SEO、トレンド、テクノロジーまで、Web担当者なら必ずチェックしておきたい情報が満載です。

    • Web最新トレンド
  • 【2025年4月最新】Webデザインニュース!海外の最旬情報をご紹介!

    Webデザイン最新情報の第2弾。ChatGPTを使った画像生成プロンプトの最新活用法と、Photoshop、Illustrator、Figmaの新機能を、未来のデザイン業界を切り拓く鍵と共にご紹介します。

    • Web最新トレンド
  • 【4月版】知っておきたい2025年Webデザインニュース!海外から最新情報をご紹介!

    デザイン業界は今月も話題が盛りだくさん。AIの進化やツールのアップデート、インスピレーションを刺激する海外サイトまで、日々変化するトレンドをキャッチアップすることがますます重要になっています。 今回は、デザイン力に強みを持つWeb制作会社クーシーが、注目のAIモデル「o3」「o4-mini」か

    • Web最新トレンド
  • 【5月版】今知るべき2025年Webデザインニュース!海外から最新情報をご紹介!

    最新Webデザインニュースをお届けします。今月は、UI/UXワークフローの効率化に役立つAIツールや、Microsoftが導入した新機能を紹介。さらに、インパクトある海外サイトのファーストビュー3選をピックアップし、実務で活用できるアイデアをお伝えします。

    • Web最新トレンド
  • 【6月版】知っておきたい2025年Webデザインニュース!海外から最新情報をご紹介!

    2025年6月のWebデザイン最新ニュースをまとめました。Googleのロゴ刷新、Figmaの大型アップデート、Androidの新デザインなど、注目トピックを海外情報からわかりやすく紹介します。

    • WebデザインTips
    • Web最新トレンド
  • 【2025年Webデザイントレンド最新版】Web制作のプロが大注目する10選まとめ

    デザイン戦略に長けたWeb制作会社が推す「2025年のWebデザイン最新トレンド」。余白、3D、ヒーロー画像だけじゃない、斬新な表現技術もご紹介!

    • WebデザインTips
    • Web最新トレンド

COOSYの
制作実績

UIUXと美しさを両立させた、クーシーが誇る成功事例一覧。
課題解決のアイデア満載です。

制作実績を見る

Web制作の課題はクーシーが解決します

  • Webデザイン

    UIUXと美しさを両立し、ブランドを「カタチ」に。SEO・AIOも考慮した戦略的ビジュアルで目標達成を支援します。

  • UIUX設計

    人間中心設計で価値ある体験を創造。SEO・AIOにも貢献し、LTV向上につながる直感的な画面デザインを実現します。

  • Web制作

CATEGORY LIST

  • すべての記事一覧

  • 目的別

    • 目的別TOP
    • コーポレートサイト
    • ECサイト
    • オウンドメディア
    • 採用サイト
    • プロモーション
    • Webサービス
    • LP
    • ブランディング・CI
  • Web制作ハウツー

    • Web制作ハウツーTOP
    • UIUX・サイト設計
    • WebデザインTips
    • PM/ディレクション
    • フロントエンド(HTML/CSS)
    • 撮影・動画編集
    • ライティング
    • CMS
    • Web制作ツール
    • イラスト
  • システム開発

    • システム開発TOP
    • プログラミング
    • EC構築
    • CMS開発・構築
    • サーバ構築
    • データベース構築
    • セキュリティー
  • Webサイト運用のコツ

    • Webサイト運用のコツTOP
    • サイト運用・管理・保守
    • コンテンツ運用
    • CRM(顧客管理)
  • Webマーケティング

    • WebマーケティングTOP
    • SEO対策・トレンド
    • コンテンツ制作・SEOライティング
    • アクセス解析
    • Web広告
    • Web集客ハウツー
  • 特集

    • 特集TOP
    • Web最新トレンド
    • カルチャー
    • ガジェット
  • WORKS

    Webサイト・アプリなどの
    様々な実例・制作実績のご紹介

    WORKS
  • CONTACT CONTACT

    Webサイトのご相談、お見積もりはこちらから

    Webサイトのご相談、お見積もりなど
    お気軽にお問い合わせください

ホーム

  • TOP
  • COOSY BLOG
  • 【2023年版】最新トレンドCSS7つをコード付きで解説します!
ページトップへ
  • TOP
  • SERVICE

    • ブランディング
    • デジタルマーケティング
    • 戦略企画
    • DX推進・システム開発
    • グローバル展開
    • Web制作
  • WORKS

    • コーポレートサイト
    • 採用サイト
    • ECサイト
    • プロモーションサイト
    • サービスサイト
    • システム開発
  • ABOUT

    • 会社情報
    • 私たちが大切にしていくこと
    • お知らせ
    • クーシーラボ 岩手
    • ロンドン支社
    • ミャンマー支店
  • RECRUIT

    • ディレクション部
    • デザイン部
    • システム開発部
    • アカウント・プランニング部
    • Webマーケティング事業部
    • 人事・総務部
    • オフショア
    • グローバル事業部
  • BLOG

    • 目的別
    • Web制作ハウツー
    • システム開発
    • Webサイト運用のコツ
    • Webマーケティング
    • 特集

COOSY SNS

  • facebook
  • X
  • お問い合わせ
  • Privacy policy
  • Site Policy
  • Security Policy
© COOSY All Rights Reserved.