TECH I.S.

CSS カラー キーワード


このページでは、transparentcurrentcolorinheritキーワードについて説明します。


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

自分で試してみる »



プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう!

スクールの詳細