継承とallプロパティ
CSSの継承ルールを理解し、allプロパティで継承されたスタイルをリセットします。
「継承とallプロパティ」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。
継承とは何ですか
CSSプロパティの中には、計算済みの値を子要素へ自動的に渡すものがあります。これが継承です。コンポーネント内のすべての要素に同じルールを書く手間を省けます。
継承されるプロパティ
通常、継承されるのはタイポグラフィとテキストに関するプロパティです。
font-family、font-size、font-weight、font-stylecolorline-heightletter-spacingtext-alignvisibility- CSSカスタムプロパティ
継承されないプロパティ
通常、継承されないのはボックスモデルとレイアウトに関するプロパティです。
margin、padding、borderwidth、heightbackgrounddisplay、positionbox-shadow、transform
inheritキーワード
inheritキーワードを使うと、継承を明示的に強制できます。これは、デフォルトではフォントを継承しないフォーム要素に便利です。
<div style="font-family: Georgia, serif; font-size: 20px; color: darkred;">
<input type="text" placeholder="Inherits font/color" />
<button>Button inherits too</button>
<textarea>Inherits</textarea>
<select><option>Option A</option></select>
</div>initialキーワード
initialキーワードは、CSS仕様で定義されたブラウザーのデフォルトの初期値にプロパティをリセットします。継承やユーザーエージェントスタイルは無視されます。
<div style="font-size: 30px; color: tomato;">
<p>Normal text inherits large tomato-colored style from its parent.</p>
<p class="reset-text">This text resets to browser defaults (initial) — medium size, black color.</p>
</div>unsetキーワード
unsetの動作はコンテキストによって異なります。
- 継承されるプロパティでは、
inheritと同じように動作します - 継承されないプロパティでは、
initialと同じように動作します
実質的に、プロパティを本来の状態へ「クリア」します。
<div style="color: tomato;">
<p style="margin: 40px;">Normal paragraph — keeps its large margin, inherits tomato color.</p>
<p class="clear-styles" style="margin: 40px;">Unset paragraph — color unset (still inherits tomato), margin unset (resets to 0).</p>
</div>revertキーワード
revertは、ブラウザーのユーザーエージェントスタイルシートの値に戻します。作成者のスタイルを適用せず、ブラウザーがデフォルトで表示する状態を復元します。埋め込み型のサードパーティウィジェットに便利です。
<div style="color: tomato; font-family: Georgia, serif;">
Ancestor style is tomato serif text.
<div class="widget">This widget uses "all: revert" to fall back to the browser's user-agent defaults, undoing author styles.</div>
</div>allプロパティ
allプロパティは、directionとunicode-bidiを除くすべてのCSSプロパティに、キーワードを同時に適用する短縮記法です。
<div style="color: tomato; font-family: Georgia, serif; padding: 12px; background: #eee;">
<div class="isolated-widget">all: initial — resets everything to spec defaults</div>
<div class="scoped-component">all: revert — resets to browser UA defaults</div>
</div>実践的な all: initial
グローバルスタイルや親のスタイルの影響を受けない、完全に独立したコンポーネントを作成する必要がある場合は、all: initialを使用します。
<div style="color: tomato; font-family: Georgia, serif; font-size: 28px;">
Page context — large serif tomato text
<div class="email-template-preview">Email preview — isolated with all: initial, then restyled with Arial 14px.</div>
</div>all: unsetパターン
関連するすべてのプロパティを把握していなくても、カスタムボタンからブラウザーのボタンスタイルを取り除けます。
<button class="custom-btn">Custom button styled from scratch using all: unset</button>
<button>Default browser button for comparison</button>継承とカスタムプロパティ
CSSカスタムプロパティはデフォルトで継承されます。これにより、:rootで設定した変数をどこからでも利用できるため、強力な仕組みになります。カスタムプロパティを継承させない場合は、@property { inherits: false }を使用します。
理解度チェック
CSS仕様の初期値ではなく、ブラウザーのユーザーエージェントのデフォルト値にプロパティをリセットするキーワードはどれですか。
まとめ
継承プロパティは値を子孫要素に渡しますが、非継承プロパティは渡しません。inherit、initial、unset、revertの各キーワードを使うと、継承を明示的に制御できます。allプロパティはすべてのプロパティを一度にリセットするため、独立したコンポーネントやカスタムフォーム要素に便利です。
よくある質問
「継承とallプロパティ」レッスンは無料ですか？
はい。「継承とallプロパティ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。
「継承とallプロパティ」で何を学びますか？
CSSの継承ルールを理解し、allプロパティで継承されたスタイルをリセットします。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「継承とallプロパティ」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このCSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。