共通キーワード

“共通キーワード”とは？

“共通キーワード(CSS-wide keywords)”はCSSのすべてのプロパティに使用することができるキーワード値です。

プロパティの値の継承や初期値化を明示的に指定するためにいくつかの値が定義されています。

共通キーワードの一覧

仕様書

“initial”

概要

“initial”はプロパティの初期値を使用することを表します。

サンプルコード

.box-outer {

border: solid 5px #483d8b; /*■*/
color: #db7093; /*■*/

}
.box-inner {

border: initial;
color: initial;

}

<div class="box-outer">

<p class="box-inner">

平安時代に彼女は「猫は上のかぎり黒くてことはみな白き」と記していたという。

</p>

</div>

平安時代に彼女は「猫は上のかぎり黒くてことはみな白き」と記していたという。

“inherit”

概要

“inherit”はプロパティの値として親要素から継承した値を使用することを明示的に表します。

“inherit”は親要素から値を継承することを強制し、既定では値が継承されないプロパティにも使用することができます。

サンプルコード

.box-outer {

border: solid 5px #483d8b; /*■*/
color: #db7093; /*■*/

}
.box-inner {

border: inherit;
color: inherit;

}

<div class="box-outer">

<p class="box-inner">

平安時代に彼女は「猫は上のかぎり黒くてことはみな白き」と記していたという。

</p>

</div>

平安時代に彼女は「猫は上のかぎり黒くてことはみな白き」と記していたという。

“unset”

概要

“unset”は既定で継承されるスタイルであれば“inherit”、既定で継承されないスタイルであれば“initial”と同じ意味を持ちます。

サンプルコード

.box-outer {

border: solid 5px #483d8b; /*■*/
color: #db7093; /*■*/

}
.box-inner {

border: unset;
color: unset;

}

<div class="box-outer">

<p class="box-inner">

平安時代に彼女は「猫は上のかぎり黒くてことはみな白き」と記していたという。

</p>

</div>

平安時代に彼女は「猫は上のかぎり黒くてことはみな白き」と記していたという。

“revert”

概要

“revert”は継承されたスタイルが何に由来するかによって意味が異なります。

継承されたスタイルがユーザー・エージェントに由来する場合

“unset”と同じ意味です。

継承されたスタイルがユーザーに由来する場合

プロパティの値をユーザー・エージェントに由来するものに戻します。ユーザーや制作者に由来するスタイルは取り消されます。

継承されたスタイルが制作者に由来する場合

プロパティの値をユーザーに由来するものに戻します。制作者に由来するスタイルは取り消されます。

サンプルコード

.box-outer {

border: solid 5px #483d8b; /*■*/
color: #db7093; /*■*/

}
.box-inner {

border: revert;
color: revert;

}

<div class="box-outer">

<p class="box-inner">

平安時代に彼女は「猫は上のかぎり黒くてことはみな白き」と記していたという。

</p>

</div>

平安時代に彼女は「猫は上のかぎり黒くてことはみな白き」と記していたという。