diff --git a/files/ja/web/css/css_nesting/index.md b/files/ja/web/css/css_nesting/index.md new file mode 100644 index 00000000000000..744cc2c35dd19f --- /dev/null +++ b/files/ja/web/css/css_nesting/index.md @@ -0,0 +1,45 @@ +--- +title: CSS 入れ子 +slug: Web/CSS/CSS_nesting +l10n: + sourceCommit: 13746bf1d5d8e5c7c7bce5e1281e6eeee77b3d44 +--- + +{{CSSRef}} + +**CSS 入れ子** (CSS nesting) モジュールは、セレクターを入れ子にする構文を定義し、親ルールのセレクターに対して子ルールのセレクターを相対的に指定することで、あるスタイルルールを別のスタイルルールの中に入れ子にする機能を提供します。 + +CSS 入れ子は、 [Sass](https://sass-lang.com/) のような CSS プリプロセッサーとは異なり、 CSS プリプロセッサーによって事前にコンパイルされるのではなく、ブラウザーで解釈されます。 + +CSS 入れ子は、 CSS スタイルシートの可読性、モジュール性、保守性に役立ちます。また、 CSS ファイルのサイズを縮小することで、ユーザーがダウンロードするデータ量を削減できる可能性もあります。 + +## リファレンス + +### セレクター + +- [`&` 入れ子セレクター](/ja/docs/Web/CSS/Nesting_selector) + +## ガイド + +- [CSS 入れ子の使用](/ja/docs/Web/CSS/CSS_nesting/Using_CSS_nesting) + - : CSS 入れ子の使い方を説明します。 +- [CSS 入れ子アットルール](/ja/docs/Web/CSS/CSS_nesting/Nesting_at-rules) + - : アットルールを入れ子にする方法を説明します。 +- [CSS 入れ子と詳細度](/ja/docs/Web/CSS/CSS_nesting/Nesting_and_specificity) + - : CSS を入れ子にした場合の詳細度の違いを説明します。 + +## 関連概念 + +- [セレクターと結合子](/ja/docs/Web/CSS/CSS_selectors/Selectors_and_combinators) +- [擬似クラス](/ja/docs/Web/CSS/Pseudo-classes) +- [CSS プリプロセッサー](/ja/docs/Glossary/CSS_preprocessor) + +## 仕様書 + +{{Specifications}} + +## 関連情報 + +- [詳細度](/ja/docs/Web/CSS/Specificity) +- [CSS カスケードと継承モジュール](/ja/docs/Web/CSS/CSS_cascade) +- [CSS セレクターモジュール](/ja/docs/Web/CSS/CSS_selectors)