【ITニュース解説】Day 007 on My journey to becoming a CSS Pro with Keith Grant

Webページの見た目を整えるために使われるCSSには、スタイルがどのように適用されるかを決定する「カスケード」という重要な仕組みがある。その中でも特に基本的な概念が「継承」である。継承とは、ある要素に設定されたスタイルが、その内側にある子要素や孫要素に自動的に引き継がれる性質のことを指す。これはHTMLの階層構造に沿って、親から子へとスタイルが伝播していくイメージだ。例えば、あるセクション全体を囲む親要素に文字色を緑色に指定すると、そのセクション内にある見出しや段落などの子要素も、個別に指定しなくても自動的に緑色の文字になる。これが継承の基本的な働きである。しかし、すべてのCSSプロパティが継承されるわけではない。文字の色やフォントサイズのように、文書全体で統一感を持たせたいプロパティは継承されることが多い一方、ボックスの幅や境界線、背景色のように、要素ごとに独立して設定されるべきプロパティは通常、継承されない。この「継承されるプロパティ」と「されないプロパティ」の違いを理解することは、CSSの挙動を正確に予測し、効率的にスタイリングを行う上で不可欠である。時には、デフォルトでは継承されないプロパティを意図的に継承させたい場合や、逆に継承されたスタイルを打ち消して元の状態に戻したい場合がある。このようなスタイルの継承をより細かく制御するために、CSSには4つの特別なキーワード値が用意されている。それが inherit、initial、unset、revert である。

inherit は、その名の通り「継承する」ことを強制する値だ。通常は親要素のスタイルを継承しないプロパティであっても、この値を指定することで、親要素の値を明示的に引き継がせることができる。例えば、リンクを表す<a>タグの文字色は、多くのブラウザでデフォルトで青色に設定されており、親要素の文字色を継承しない。しかし、<a>タグの color プロパティに inherit を指定すれば、親要素に設定された文字色と同じ色にすることができる。これにより、周囲のテキストとリンクの色を統一したい場合に便利である。

次に initial は、プロパティの値をそのプロパティの「仕様上の初期値」にリセットするキーワードである。ここで重要なのは、「ブラウザがデフォルトで表示するスタイル」と「CSSの仕様で定められた初期値」は必ずしも同じではないという点だ。先ほどの<a>タグの例で言えば、ブラウザは利便性のためにリンクを青色で表示するが、CSSの仕様における color プロパティの初期値は、システムのテキスト色を示す CanvasText（通常は黒）である。したがって、<a>タグの color プロパティに initial を指定すると、ブラウザ独自の青色ではなく、仕様で定められた黒色になる。これは、ブラウザによる独自の解釈を排除し、仕様に基づいた最も基本的な状態に戻したい場合に使用される。

unset は、inherit と initial の両方の性質を併せ持つ、状況に応じて挙動が変わる便利なキーワードだ。適用するプロパティが「継承される性質を持つプロパティ」である場合、unset は inherit と同じ働きをし、親要素の値を継承する。一方で、そのプロパティが「継承されない性質を持つプロパティ」である場合、unset は initial と同じ働きをし、仕様上の初期値にリセットされる。例えば、継承されるプロパティである color に unset を指定すると、親要素の色を継承する。もし、継承されない border プロパティなどに unset を指定した場合は、そのプロパティの仕様上の初期値に戻る。このように、プロパティの特性に応じてリセット方法を自動で切り替えてくれるため、特定の要素に適用されたスタイルをまとめて初期状態に戻したい場合に有効である。

最後に revert は、制作者が設定したスタイルを取り消し、そのスタイルが適用される前の状態に戻すキーワードだ。多くの場合、これは「ブラウザのデフォルトスタイル」に戻すことを意味する。initial がCSSの仕様で定められた大本の初期値に戻すのに対し、revert はユーザーエージェント（ブラウザ）が設定しているスタイルシートの状態まで巻き戻す。<a>タグの例で言えば、color: revert; を指定すると、仕様上の初期値である黒色ではなく、多くのブラウザがデフォルトで設定している、訪問済みかどうかで色が変わるおなじみの青色や紫色に戻る。これは、フレームワークなどによって上書きされたスタイルをリセットし、ブラウザが元々持っている自然な表示に戻したい場合などに非常に役立つ。

これらの継承の仕組みと4つの特別なキーワードを理解し使い分けることで、CSSのカスケードをより深く制御し、複雑なウェブサイトにおいても意図した通りのデザインを正確に実現することが可能になる。これは、システムエンジニアとしてフロントエンド開発に携わる上で、必須となる知識の一つである。