このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

共通キーワード

記事Mar. 6th,2021
CSSのすべてのプロパティで使用することができる共通キーワードについて
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

CSSの共通キーワード

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

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

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

共通キーワードの一覧

説明
initialCSS Cascading and Inheritance Level 3 で追加 初期値を使用する
inherit 継承値を使用する
unsetCSS Cascading and Inheritance Level 3 で追加 既定で継承されるスタイルは継承値、継承されないスタイルは初期値を使用する
revertCSS Cascading and Inheritance Level 4 で追加 ユーザー・エージェント、もしくはユーザーの既定値を使用する

仕様書

共通キーワードの詳細

initialCSS Cascading and Inheritance Level 3 で追加

概要

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>

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

unsetCSS Cascading and Inheritance Level 3 で追加

概要

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>

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

revertCSS Cascading and Inheritance Level 4 で追加

概要

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>

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

一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク