CSSの動作確認に！覚えておくと便利なカラーネーム一覧

色々な色のクレヨン

CSSで色を指定する際、みなさんはどのような表記をしていますか？

基本的に16進数、RGB、カラーネームの3つの指定方法がありますが、自分は少し動作確認をするときはカラーネームをよく利用しています。

今回は、CSSで色を指定するときに覚えておきたいカラーネームをご紹介します。

CSSにおける色の指定方法の確認

一応、色の指定について確認しておきます。以下の例は全て赤を意味します。

こんなかんじでスタイルにあてて使用します。以下は文字色を指定している例です。

.hoge1 {
  color:#ff0000;
}

.hoge2 {
  color:rgb(255, 0, 0);
}

.hoge3 {
  color:red;
}

では、順番に見ていきましょう。

まずはredです。

redのいいところは、

というところです。特に短いのはいいですね。3文字ですからパッと入力してスタイルの動作確認ができます。

blueはredじゃ足りない時に使います。これも4文字と短いのですぐ入力できていいですね。

redとblue以外にも、これらと明らかに見た目が異なるカラーコードをあと3つくらい覚えておくと何かと便利です。

yellow,gren,purpleの他にもnavy,pink,aquaなどさまざまなコードがありますが、覚えやすいものを覚えておけばいいと思います。

白と黒は最低限覚えておくべきです。グレー系はgrayだけでいいかな？16進数でも#abababのように、同じ文字のペアを3回続ければグレー系の色になりますからね･･･。

grayの他にはsilverくらいは覚えておいても損はないかな。短いし･･･。

いかがでしたか？

カラーネームだとひと目でどのような色か分かるので個人的に好きですが、本格的にサイトを作るときは16進数表記を使うのが一般的だと思います。

ただ、ちょっとした時にカラーネームを使った指定は使えると思うので、今後ぜひ使ってみてください。

以上、覚えておくと便利なカラーネームの紹介でした。