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色値の拡張で、alphaチャンネルを持っており、色の不透明度を指定します。さらに詳しい情報は、私たちの CSS RGB 章と CSS カラー 章

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 キーワードは属性が親要素から値を継承することを指定します。

inherit キーワードはどの CSS 属性にも使用でき、どの HTML エレメントにも使用できます。

例

この例では、<span>のボーダー設定は親要素から継承されます：

div {
  border: 2px solid red;
}
span {
  border: inherit;
}

自分で試してみる