こんにちは！ ASUE株式会社 広報のN村です。ASUEには実はWebコーダーとして入社しているので、HTML、CSS、JS、PHPあたりならちょっとわかります。

さて、Webサイトのデザイン内でCSSを使って要素を横並びにする方法はいくつもあります。

わたしがCSSを初めて学んだ時は、（もちろん状況にもよりますが！！！）横並びの方法を調べればfloat:leftが多く紹介されていました。

崩れを防ぐために親要素に対してoverflow:hiddenを指定したり、後に続く要素に対してclear:both を入れたり……。.clearfixというクラスを作成し、その:after擬似要素にcontent: ""; display:block; clear:both;やら、呪文のように書いていましたよね。

その後学んだのが、display:flex。要素の横並びや上下中央揃えが何も考えずできるようになり、あ〜〜〜〜最高！と思ったのを覚えています。（※厳密には学び始めた時点で使えたようだが、教本やWeb上の記事ではfloatが多かった気がする。）

そこから時は流れ、2026年。わたしは2018年頃に肩書が広報に変わったので、コーディングの現場から離れてもう8年近く経ちます。

自社サイトの軽微な修正や、ちょっとしたコンテンツ追加などでコードを書く場面はあります（おみくじを作ったりね！）。 ただ、ことHTMLやCSSについては既存の知識でなんとかなる場面が多く、新しい機能を学ぶ機会はほとんどありませんでした。Sassを覚えたりはしたものの、レイアウト手法に関しては「なんとなくdisplay:gridが使えるかな〜」くらいの状態です。（そしてこれはあまり使い方を覚えていないので、使ってみようと思うたびに調べている。まるで身についていない……。）

ちょっと機会があって、近年増えたモダンなCSSの機能？属性？一覧を紹介する記事を眺めていたら、知らない機能が増えてる増えてる。かつてはjsやjQueryなどを使って書いていたものでも、現在はCSSで実装できたりもするようで……。

というわけで今回は、display:flexで時が止まっていたわたしが、2026年のモダンCSSを学んでみよう！ がテーマです。

なお、この記事で紹介する機能は すべて2026年3月時点で主要ブラウザ（Chrome・Firefox・Safari）対応済み のものだけに絞ってご紹介します。

セレクターと書き方の進化編

CSS Nesting——Sassなしでネストが書ける時代

SassやSCSSでは、セレクターをネスト（入れ子構造）にしてスタイルを書くことが可能でした。これによって、特定の要素の子要素のみに適用するスタイルを書きたい場合に、いちいち特定の要素（=親要素）を何度も書く必要がなくなり、記載が簡略化できるようになりました。

親要素のセレクタを繰り返し書く必要がなくなり、可読性もアップさせられるため非常に便利なネストが、CSSでも可能になっていました。

元のCSSの記法

/* 元のCSS：セレクターを毎回フルで書く */
.card {
  background: #fff;
}
.card .title {
  font-size: 1.2rem;
}
.card:hover {
  background: #f0f0f0;
}

繰り返し、.cardという親要素を書く必要があるため面倒かつ可読性も悪いです。

SCSSの記法

/* SCSSではこう書けた（要ビルド） */
.card {
  background: #fff;
  .title {
    font-size: 1.2rem;
  }
  &:hover {
    background: #f0f0f0;
  }
}

SCSSを使うことでネストにでき、.cardは一回書けばOKになりました。ですが、SCSSを直接読み込むことはできないので、CSSファイルをコンパイルして作る必要があります。

CSS Nestingの記法

/* 素のCSSでネストが書ける！（ビルド不要） */
.card {
  background: #fff;

  .title {
    font-size: 1.2rem;
  }

  &:hover {
    background: #f0f0f0;
  }
}

SCSSと同じような書き方で、コンパイルのステップも必要ありません。

このように、ブラウザが直接ネスト記法を解釈してくれるようになったので、Sassを導入しなくてもこの書き方が可能になっています。

もちろん、SCSSにはmixinなど他にも便利な機能があるので完全に不要になるわけではありませんが、小規模サイトであればCSSだけでも十分かもしれません。

また、SCSSとCSSネストの違いの注意点として、Sass/SCSSでは & を使った文字列結合が可能でした。BEM記法を利用する際に、&__element のように書いていたものですね。

/* SCSSではできるBEM記法 */
.card {
  &__title { font-size: 1.2rem; }
  &__body { line-height: 1.8; }
  &--featured { border-color: gold; }
}
/* → .card__title, .card__body, .card--featured に展開される */

CSS Nestingの & では、これが できません。CSS Nestingの & は「親セレクター全体への参照」であって、Sassのような文字列結合はできない仕様です。

:has() —— 特定の子要素を持つ親要素が選択可能に

個人的に一番衝撃を受けた機能がこちら。どう考えても便利すぎる！

:has() は「特定の子要素を持つ親要素」を選択できるセレクターです。言い換えると、子の状態によって親のスタイルを変更することが可能になっています。

/* チェックボックスがチェックされているカードの背景を変える */
.card:has(input[type="checkbox"]:checked) {
  background: #e8f5e9;
  border-color: #4caf50;
}

以前は、こういった「子の状態に連動した親のスタイル変更」をやろうとすると、JavaScriptやjQueryを使った処理が必要でした。

// 昔はこんなJSが必要だった
checkbox.addEventListener('change', (e) => {
  const card = e.target.closest('.card');
  card.classList.toggle('is-selected', e.target.checked);
});

ですが、これによってCSSのみで実装可能になっています。

フォームのバリデーション表示、タブの切替、条件付きレイアウト変更など、:has() の応用範囲はかなり広いので、ぜひ覚えておきたい擬似クラスセレクターですね！

利用例(1) チェックボックスの選択状況によって親要素のスタイルを変更

See the Pen :has by 広報のN村 (@fgtngrmu-the-styleful) on CodePen.

利用例(2) 画像の有無によるスタイル変更

See the Pen :has demo02 画像の有無 by 広報のN村 (@fgtngrmu-the-styleful) on CodePen.

賢くなったレイアウト編

display:flexで横並びになっただけで昔は感動していたわたしですが（書き方が覚えやすいと思っているので今でも好きです）、レイアウト系もさらに便利に進化していました。

コンテナクエリ——「画面幅」じゃなくて「自分の親要素の幅」で変わる

レスポンシブデザインなど、幅によってデザインを切り替えたい場合はメディアクエリと呼ばれる画面幅（viewport）に応じてスタイルを切り替える書き方（@media (max-width: ○○px)）が使われます。

この幅によるスタイル変更を、親要素の幅でもできるようになるのがコンテナクエリです。

たとえば、同じカードコンポーネントをメインエリア（広い）とサイドバー（狭い）の両方に配置したいとき。画面幅は同じなのに、カードの表示領域の幅は違いますが、メディアクエリだとこの区別ができません。ですが、コンテナクエリを使えば親要素の幅で表示を変更できます。さらに、広いメインエリアに設置したコンポーネントがスマートフォンでは狭い幅用のレイアウトで表示されるようになります。

/* 親コンテナを定義 */
.card-wrapper {
  container-type: inline-size;
}

/* コンテナの幅が400px以下なら縦積み、それ以上なら横並び */
@container (min-width: 400px) {
  .card {
    display: flex;
    flex-direction: row;
  }
}

以前はメディアクエリでの記載がどんどん複雑になっていくか、コンテナクエリと同様の動きをさせるためにコンテナの幅をJSで監視して、クラスを付け替えるなどの処理が必要でしたが、CSSだけで簡単に完結できるようになっています。

利用例： 広いパネルと狭いパネルでスタイルを変更

See the Pen Container Query demo02 by 広報のN村 (@fgtngrmu-the-styleful) on CodePen.

subgrid——カードの中身を揃えられる

display:flexは便利だけど、横並びのカード（ブログ投稿など）内の要素（タイトル・日付・ボタンなど）の位置がバラバラになってしまってかっこわるい！という経験はコーディングをしたことがあれば誰でもあると思います。

これを揃えるために、昔はJSで各カードの最大高さを計測して style.height を設定する……などの処理が必要でした。これをやってなくて後から気づいて絶望したりもしましたね。

Subgrid を使うと、子要素が親グリッドのトラック（行）を共有できるようになり、この「位置がバラバラになってしまってかっこわるい！」状況を解決できます。

利用例

See the Pen subgrid demo01 by 広報のN村 (@fgtngrmu-the-styleful) on CodePen.

Scroll Snap—— JSライブラリなしで実装可能なカルーセル

画像やカードを横スクロールで見せるカルーセルUI。定番のUIなので、実装した経験がある方も多いと思います。

Swiper.jsやslickなどのJSライブラリを読み込んで、オプションの設定やスタイルの上書きなどで調整して……と、簡単ではありつつ結構面倒です。さらに、ライブラリを読み込むのでちょっと重くなるのも気になります。

Scroll Snap を使うと、CSSだけでカルーセル風のUIが実現できます。

See the Pen Scroll Snap demo CSSのみ by 広報のN村 (@fgtngrmu-the-styleful) on CodePen.

実務上は前へ・次への移動ボタンやドットのナビなどもつけたいことが多いと思いますが、その場合も最小限のjsのみで実装可能です。ライブラリを利用するよりも軽量で済みそうですね。

See the Pen Scroll Snap demo by 広報のN村 (@fgtngrmu-the-styleful) on CodePen.

楽になったアニメーション実装とUIパーツ編

@starting-style + transition-behavior——display:noneからのフェードインが可能に

ある要素を、display: none → display: block に切り替えてフワッと表示させたい場合に以前はJSやjQueryで実装していました。

いまや、@starting-style + transition-behaviorを使えばCSSとonclick属性のみで実装可能になりました。

@starting-style とは、CSS トランジションの開始時のスタイルを定義するアットルールです。クリック時にクラスを付与し、そのクラスに対してトランジション開始時のスタイルを定義しておくことでふわっとしたアニメーションがCSSで実現できます。

See the Pen @starting-style demo by 広報のN村 (@fgtngrmu-the-styleful) on CodePen.

jQueryを使用している環境であれば、fadeToggle() や slideToggle()を用いて似たような処理は簡単に可能ですが、これらの関数は表示時にdisplay: flex や grid のレイアウトの場合、 blockに変更してしまい崩れてしまいます。（もちろん、正しく動くような方法はありますが、何気なく書いて崩れた！直さなきゃ！をよくやりました。）その点、CSSなら簡単ですね。

Popover API——HTML属性とCSSだけでポップアップを簡単実現

Webサイトを見ていると画面上にポップアップ表示されるCTA。ユーザー側からするとうざいこともよくありますが、定番のUIでもあります。今まではこちらもjs（ライブラリを使うことも）を使って実装していましたが、現在はHTML属性にpopoverを追加し、CSSを調整すれば簡単に実装可能となっています。機能だけなら、HTML属性のみで実装できます（見た目は実用的ではない）。

See the Pen Popover API demo by 広報のN村 (@fgtngrmu-the-styleful) on CodePen.

Popover APIはデフォルトで position: fixed + 中央配置で表示されますが、見た目はブラウザのデフォルトスタイルのままだとちょっと素朴すぎるので、上のデモのように [popover] セレクターでカスタマイズするのがおすすめです。::backdrop 擬似要素で背景のオーバーレイ色も変えられます。

色設計がより柔軟に

color-mix()——CSSの中で色を混ぜる

ボタンのホバー時に色をちょっと薄くしたい——Sassならlighten($color, XX%) を使えば簡単に可能でしたが、CSSではホバー用の色を別途ハードコードする必要がありました。ですが、現在はcolor-mix() を使うと、CSSの中で色を混ぜられるようです。

See the Pen color-mix() demo01 by 広報のN村 (@fgtngrmu-the-styleful) on CodePen.

accent-color——チェックボックスの色が1行で変わる

チェックボックスやラジオボタンなど、フォームに使用されるパーツなどはデフォルトで青色などが設定されています。

デザインによっては見せ方を変えたい場合も多いですが、以前は色変更やデザインのために面倒なCSSや場合によってはjsでの処理が必要なことも。

現在は、色を変えるだけならCSSにaccent-color:#XXXXXX を追加することで、一行で変更可能です。

See the Pen accent-color demo by 広報のN村 (@fgtngrmu-the-styleful) on CodePen.

accent-color はあくまで「アクセントカラー」の変更なので、チェックボックスの角丸を変えたい、サイズを変えたい、といった細かなカスタマイズはできません。そこまでやりたい場合は従来通り appearance: none で完全リセットしてカスタムする必要があります。

CSS設計の変化

最後は、個々の見た目ではなく CSSの設計思想・書き方の構造 が変わるレベルのアットルール機能です。

@layer——詳細度でスタイルが適用されない！を防止

大規模サイトなどでちょっとした修正をしようとしたときに、書いたスタイルが適用されない！別のところに書かれたスタイルが優先されてしまっている！という「詳細度に苦しめられた」経験は誰しもあるかと思います。

WordPressなどのプラグインのCSSやサードパーティのCSSライブラリなどのスタイルが優先されてしまい、!importantをつけて対応したら別の部分に影響が……！などなど、よくあることですよね。

これを解決できるのが、@layerです。

See the Pen @layer demo by 広報のN村 (@fgtngrmu-the-styleful) on CodePen.

@layer reset, base, components, utilities;のように、優先順位を設定しておき、あとは各レイヤーごとに@layer reset { //セレクタごとにスタイルを書く }のような形で書くことでレイヤーごとのスタイルを書くことが可能です。このとき、後ろに書いたレイヤーがより優先されるようになります。

@scope——スタイルの効果範囲を設定できる

CSSは基本的に設定したスタイルがグローバルに効いてしまいます。これを避けるために、BEMを使って長いクラス名を全ての要素に設定したり、CSS Modulesを活用したりしていましたが、@scopeを使うとより簡単に記述可能になります。

@scope (.card) {
 /* .card の中のみ適用 */
  h2 {
    font-size: 1.2rem;
    color: #333;
  }

  p {
    line-height: 1.8;
  }
}

@scope (.card) to (.card__footer) {
  /* .card の中だけど .card__footer の中は除外 */
  p { color: #666; }
}

@scope(.card)内のCSSは、 .card の中だけに効きます。.card の外にある h2 やpには一切影響しません。また、to を使って除外の設定も可能です。

See the Pen @scope demo by 広報のN村 (@fgtngrmu-the-styleful) on CodePen.

@property——CSS変数に「型」をつけてアニメーションできる

CSS変数（カスタムプロパティ）は --color: #ff0000 のように使えて便利ですが、ブラウザにとってはただの文字列。なので、CSS変数をトランジションやアニメーションの対象にしても、補間（中間の値を計算すること）ができず、パッと切り替わるだけでした。

ですが、@property で型を宣言すると、ブラウザが中間値を計算できるようになります。

@property --hue {
  syntax: "<number>";//カスタムプロパティの型定義
  inherits: false;
  initial-value: 0;
}

.gradient-box {
  --hue: 0;
  background: linear-gradient(
    to right,
    oklch(0.7 0.15 var(--hue)),
    oklch(0.7 0.15 calc(var(--hue) + 60))
  );
  transition: --hue 1s;
}

.gradient-box:hover {
  --hue: 180;
}

グラデーションにするための色の計算や、カウントアップ、プログレスバーなどに活用できます。

See the Pen @property demo01 by 広報のN村 (@fgtngrmu-the-styleful) on CodePen.

See the Pen @property demo02 by 広報のN村 (@fgtngrmu-the-styleful) on CodePen.

まとめ

ということで、近年新しく追加されているCSSの中でも、特に主要ブラウザで対応しているものを集めてみました。新しいことをするよりも慣れた方法で書いた方が楽だったりするので、がっつりコーディングをしなくなった最近はろくに情報を追っていなかったり、知っていてもわざわざ使わなかったり、ということが多かったです。ですが、さすがにここまで変わっているとちゃんと知っておかなきゃ！という気持ちにさせられます。

最近はAIツールを使ってコードを書く場面も増えてきて、「自分の手でコードを書く」機会自体は減っているかもしれません。でも、今のCSSで何ができるのかを知らないまま指示を出すと、指示そのものが古くなるでしょう。古い知識のままの指示でも動くものは出てくるけど、今ならもっとシンプルに書ける——そういう選択肢を知っていることは今後もある程度重要じゃないかなと思いました。

ASUE通信では、たま〜にWeb制作的な情報も交えつつWebマーケティングを軸とした情報発信を行っております！

気になる方はぜひメルマガにご登録いただけますと幸いです。