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

色々な色のクレヨン

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

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

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

スポンサーリンク

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

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

  • 16進数:#ff0000
  • RGB:rgb(255, 0 , 0)
  • カラーネーム:red

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

覚えておきたいカラーネーム

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

red

まずはredです。

redのいいところは、

  1. 文字数が短い
  2. 色がわかりやすい

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

blue

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

green, yellow, purpleなど

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

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

black, white, gray

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

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

さいごに

いかがでしたか?

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

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

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

スポンサーリンク

フォローする

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*