CSSカラーキーワード

このページでは、、、およびキーワードについて説明transparentしcurrentcolorますinherit。

透明なキーワード

キーワードは、transparent色を透明にするために使用されます。これは、要素の背景色を透明にするためによく使用されます。

ここで、<div>要素の背景色は完全に透明になり、背景画像は次のように透けて見えます。

body {
background-image: url("paper.gif");
}

div {
background-color: transparent;
}

注：キーワードtransparent はrgba（0,0,0,0）と同等です。RGBAカラー値は、アルファチャネルを使用したRGBカラー値の拡張です。これは、色の不透明度を指定します。詳しくは、CSSRGBの章とCSSの色の章をご覧ください。

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;
}