【CSS Modules】all省略形プロパティの使い方

allプロパティは、CSSのほとんどのプロパティを一括で設定するための特別なプロパティを保持するプロパティです。このプロパティを使用することで、特定の要素に適用されているスタイルをまとめてリセットしたり、初期状態に戻したりできます。これにより、意図しないスタイルの継承や競合を防ぎ、コンポーネントの独立性を高めることが可能です。

設定できる値としては、主にinitial、inherit、unset、revertの4つがあります。 initialを指定すると、対象となる各プロパティがブラウザで定義されている初期値に戻されます。これは、全てのスタイルを一旦白紙に戻したい場合に有効です。 inheritは、その要素の親要素から継承可能な全てのプロパティの値を継承させます。 unsetは、プロパティが通常継承される性質を持つ場合はinheritのように振る舞い、継承されない性質を持つ場合はinitialのように振る舞います。 revertは、ユーザーエージェント（ブラウザ）のデフォルトスタイルシートや、ユーザーが定義したスタイルシートの値に戻します。これは、ブラウザの基本設定に立ち返りたい場合に便利です。

例えば、特定のコンポーネントのスタイルが他の部分に影響されないよう、all: initial;やall: unset;を使用してスタイルをリセットする場面で非常に有用です。これにより、グローバルなCSS設定が部分的なデザインに予期せぬ影響を与えるのを防ぐことができます。

ただし、allプロパティは、カスタムプロパティ（CSS変数）や、direction、unicode-bidiといった特定のプロパティには適用されない点にご注意ください。ウェブページ開発において、スタイルの管理を効率化し、安定したデザインを保つために役立つ重要なプロパティです。

Copy
1selector {
2  all: initial;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません