CSS カラー キーワード
このページでは、transparent、currentcolor、inheritキーワードについて説明します。
transparentキーワード
transparentキーワードは、色を透明にするために使用されます。
このキーワードは、要素の背景色を透明にするためによく使用されます。
例
ここでは、 <div> 要素の背景色が完全に透明になり、背景画像が透けて見えます。
body {
background-image: url("paper.gif");
}
div {
background-color: transparent;
}
注：のtransparentキーワードは rgba(0,0,0,0) と同等です。 RGBA カラー値は、RGB カラー値をアルファチャネルで拡張したもので、色の不透明度を指定します。詳細については CSS RGBをご覧ください。
currentcolor キーワード
currentcolorキーワードは、要素のcolorプロパティの現在の値を保持する変数のようなものです。
このキーワードは、要素またはページで特定の色を一貫させたい場合に役立ちます。
例
この例では、 <div> 要素のテキストの色が青であるため、 <div> 要素の境界線の色は青になります。
div {
color: blue;
border: 10px solid currentcolor;
}
例
この例では、<div> の背景色が body 要素の現在の色の値に設定されています。
body {
color: purple;
}
div {
background-color: currentcolor;
}
例
この例では、<div> の境界線の色と影の色が body 要素の現在の色の値に設定されています。
body {
color: green;
}
div {
box-shadow: 0px 0px 15px currentcolor;
border: 5px solid currentcolor;
}
inheritキーワード
inheritキーワードは、プロパティが親要素から値を継承する必要があることを指定します。
このキーワードは、任意のCSSプロパティおよび任意のHTML要素で使用できます。
例
この例では、<span> の境界線の設定が親要素から継承されます。
div {
border: 2px solid red;
}
span {
border: inherit;
}
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。