【CSS】キーワードで色を指定する方法
css
キーワード
色指定
こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。
CSSで色を指定する際、カラーコードで指定することが多いと思います。
しかし実は色はカラーコード以外にもキーワードで指定することも出来るんです。
今回の記事では色をキーワードで指定する方法をご紹介したいと思います。
この記事の目次を表示
色を指定する方法
CSSで色を指定する場合、いくつかの方法があります。
- 16指数のカラーコード
- RGB
- HSL
- キーワード
では、赤・青・緑の色をそれぞれの方法で指定してみると以下のようになります。
赤の場合
/* 16進数の場合 */
background: #ff0000;
/* RGBの場合 */
background: rgb(255,0,0);
/* HSLの場合 */
background: hsl(0deg,100%,50%);
/* キーワードの場合 */
background: red;See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
青の場合
/* 16進数の場合 */
background: #0000ff;
/* RGBの場合 */
background: rgb(0,0,255);
/* HSLの場合 */
background: hsl(240deg,100%,50%);
/* キーワードの場合 */
background: blue;
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
緑の場合
/* 16進数の場合 */
background: #008000;
/* RGBの場合 */
background: rgb(0,128,0);
/* HSLの場合 */
background: hsl(120deg,100%,25.1%);
/* キーワードの場合 */
background: green;See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
キーワードで指定する方法
上の例でもある通り赤・青・緑をそれぞれred、blue、greenと書いても色を表示することが出来ます。
それでは他にはどんな色をキーワードで指定できるのでしょうか。
少し気になったのでキーワードで指定できる色を調べてみました。
background: white; /* #ffffff; */
background: silver; /* #c0c0c0; */
background: gray; /* #808080; */
background: black; /* #000000; */
background: fuchsia; /* #ff00ff; */
background: purple; /* #800080; */
background: red; /* #ff0000; */
background: maroon; /* #800000; */
background: yellow; /* #ffff00; */
background: olive; /* #808000; */
background: lime; /* #00ff00; */
background: green; /* #008000; */
background: aqua; /* #00ffff; */
background: teal; /* #008080; */
background: blue; /* #0000ff; */
background: navy; /* #000080; */
background: orange; /* #ffa500; */See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
この他にも様々な色がキーワードで指定することが出来ます。
まとめ
いかがでしたか？
色の指定はカラーコードだけでなく一般的なキーワードを使っても指定することが出来ます。
redやblueなどすぐにカラーコードが出てこない場合は、キーワードで指定してしまう方が効率的かもしれないですね。
