CSS Academy · レッスン

CSS Layout APIとスコープ

Q: 「CSS Layout APIとスコープ」で何を学びますか？

CSS Layout APIでカスタムレイアウトアルゴリズムを構築し、Houdiniの適用範囲と制限を理解します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

CSS Layout APIでカスタムレイアウトアルゴリズムを構築し、Houdiniの適用範囲と制限を理解します。

「CSS Layout APIとスコープ」はCoddyKit上の無料CSS Academyレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。

CSS Houdini の概要

CSS Houdini は、CSS レンダリングエンジンの一部を JavaScript に公開する低レベル API の集合です。Typed OM、Properties & Values API、Paint API、Layout API、Animation Worklet が含まれます。これらを組み合わせることで、CSS のカスタム拡張を実現できます。

CSS Layout API とは

CSS Layout API を使用すると、CSS の display プロパティの値として使用できるカスタムレイアウトアルゴリズムを JavaScript で定義できます。Grid や Flexbox と同等の強力なレイアウトを作成できます。

レイアウトワークレットの構造

Layout Worklet は intrinsicSizes() メソッドと layout() メソッドを実装し、registerLayout() で登録します：

<div class="masonry-container">
  <div class="item" style="height: 60px;">1</div>
  <div class="item" style="height: 100px;">2</div>
  <div class="item" style="height: 40px;">3</div>
  <div class="item" style="height: 80px;">4</div>
  <div class="item" style="height: 120px;">5</div>
  <div class="item" style="height: 50px;">6</div>
</div>

カスタムレイアウトの使用

CSS で登録済みのレイアウトを参照します：

<div class="masonry-container">
  <div class="item" style="height: 60px;">1</div>
  <div class="item" style="height: 100px;">2</div>
  <div class="item" style="height: 40px;">3</div>
  <div class="item" style="height: 80px;">4</div>
  <div class="item" style="height: 120px;">5</div>
  <div class="item" style="height: 50px;">6</div>
</div>

Layout API のステータス

CSS Layout API をサポートするブラウザーは限られており、現在は主に実験的な機能です（Chrome ではフラグを有効にする必要があります）。現時点では本番環境向けのツールというより、研究・将来向けの API です。特に Masonry レイアウトは、代わりにブラウザーへネイティブ実装される可能性があります。

@scope アットルール

@scope は新しい CSS 機能（CSS Scoping 仕様の一部）で、あらゆる場所にクラスを追加せずに、CSS ルールの適用範囲を特定の DOM サブツリーに制限します。

@scope の構文

スコープルートと、必要に応じてスコープリミットを定義します：

<div class="card">
  <p class="title">Scoped Title</p>
  <p>Body text inside the card.</p>
</div>

リミット付きの @scope

スコープリミットを指定すると、ネストされたコンポーネントの内部にはルールが適用されなくなります：

<div class="article">
  <p>Article paragraph styled with 1.7 line-height by the scoped rule.</p>
  <div class="advertisement">
    <p>Ad paragraph is outside the scope limit, so it keeps the default line-height.</p>
  </div>
</div>

:scope 疑似クラス

@scope の中では、:scope はスコープルート要素を指します：

<div class="card is-hovered">
  <p>Hover state applied statically for preview</p>
</div>

@scope のブラウザー対応

@scope は Chrome 118 以降と Safari 17.4 以降でサポートされています。Firefox でも対応が予定されています。安全に導入するには @supports と組み合わせて使用してください。

Houdini のより広いビジョン

CSS Houdini の目標は、Web プラットフォームを拡張可能にすることです。つまり、ブラウザーベンダーによる実装を待つのではなく、開発者が CSS 自体に機能を追加できるようにします。現在利用できる API（Typed OM、@property、Paint）は、このビジョンの中でも本番環境での利用に最も適した部分です。

確認問題

@scope (.card) は CSS で何を実現しますか？

まとめ

CSS Houdini は、レンダリングエンジンを公開する API の集合です。Layout API を使用するとカスタムの display アルゴリズムを実装できますが、ほとんどが実験的な機能です。@scope は CSS ルールの適用範囲を特定の DOM サブツリーに制限し、厳格な BEM 命名規則を使わなくてもスタイルの漏れを防ぎます。本番環境での利用に最も適した Houdini の機能は、Typed OM、@property、Paint API です。

よくある質問

「CSS Layout APIとスコープ」レッスンは無料ですか？

はい。「CSS Layout APIとスコープ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。

「CSS Layout APIとスコープ」で何を学びますか？

CSS Layout APIでカスタムレイアウトアルゴリズムを構築し、Houdiniの適用範囲と制限を理解します。ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

CSS Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「CSS Layout APIとスコープ」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このCSS Academyレッスンでコードを書いて実行できますか？

はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

CSS Typed Object Model（OM）
CSS Properties and Values API（@property）
CSS Paint API: Worklets
CSS Layout APIとスコープ

← CSS Academyに戻る