Mar. 6th,2021
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>
<p>
これが意味するのは猫は背中が黒くてそれ以外は白い猫が優美だということだ。
</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>
<p>
これが意味するのは猫は背中が黒くてそれ以外は白い猫が優美だということだ。
</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>
<p>
これが意味するのは猫は背中が黒くてそれ以外は白い猫が優美だということだ。
</p>
</div>
平安時代に彼女は「猫は上のかぎり黒くてことはみな白き」と記していたという。
これが意味するのは猫は背中が黒くてそれ以外は白い猫が優美だということだ。
＃
“revert”
概要
“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>
<p>
これが意味するのは猫は背中が黒くてそれ以外は白い猫が優美だということだ。
</p>
</div>
平安時代に彼女は「猫は上のかぎり黒くてことはみな白き」と記していたという。
これが意味するのは猫は背中が黒くてそれ以外は白い猫が優美だということだ。
