CSS

CSSで色コードを指定する3種類の方法【16進数・関数・英単語】

どうも、つよぽんです!

今回はCSSで色のコードを指定する3種類の方法について解説します。

今回の記事は次のような方に向けて書きました。

想定読者
  • CSSで色コードの指定方法を知らない方
  • CSSで色コードを指定するさまざまなやり方を知りたい方

今回の記事は以下の学習コンテンツ記事内のスライドを詳しく解説した記事となります。以下の記事と合わせて読むことでより理解度を深めていただけるかと思います。

あわせて読みたい
CSSで色を設定するやり方を知るCSSを使って文字や背景などの色を設定する方法は大きく分けて3種類あります。英単語での指定。16進数での指定。関数での指定。この記事を読むことで色の設定方法と16進数の意味を理解することができます。...

今回の内容は以下のとおりです。

今回の内容
  • CSSで色コードを指定する3種類の方法
  • 英単語を使った色コードの指定方法
  • 16進数表記を使った色コードの指定方法
  • 関数記法を使った色コードの指定方法

 

CSSで色コードを指定する3種類の方法

CSSで色コードを指定する方法は色々ありますが、この記事では代表的な3種類の色コードの指定方法を解説します。

色指定の3つ方法
  1. 英単語を使った色コードの指定方法
  2. 16進数表記を使った色コードの指定方法
  3. 関数記法を使った色コードの指定方法

上記3つのやり方を次の章以降で1つずつ詳しく解説していきます。

英単語を使った色コードの指定方法

CSSで英単語を使った色の指定方法CSSで英単語を使った色の指定方法

英単語を使ったCSSでの色の指定方法は上の画像をみていただくとわかるかと思いますが、CSSのプロパティ値に「red」「green」「blue」のように英単語をセットして行います。

プロパティ値に関しては以下のCSSの基本構造の解説記事で説明しているので、基本構造がわからない方は以下の記事を参考にしていただけたらと思います。

あわせて読みたい
【入門】CSSの書き方を基本構造から理解する【図解付き】CSSの書き方を覚えるために、CSSがどのようなパーツから構成されているのか基本構造から覚えていきます。CSSを構成している5つのパーツを覚えることで、CSSの定義方法を知識として定着させることができるでしょう。...

英単語での色指定の方法は約150種類あります。詳しくは以下のMDNの色に関するドキュメントを参考にしていただけたらと思います。

さきほども書いたように英単語を使った色の指定方法は約150種類ほどと細かい色の調整をするのが難しいです。

細かい色の調整を行いたい場合は次に説明する「16進数表記を使った色コードの指定方法」または「関数記法を使った色コードの指定方法」で指定するのが良いです。

約150種類に対して約1678万種類の色をセットすることが可能となります。

16進数表記を使った色コードの指定方法

書き方

CSSで16進数を使った色の指定方法CSSで16進数を使った色の指定方法

上の画像のCSSのコードを見ていただくと、colorプロパティの値として「#ff0000」「#00ff00」「#0000ff」がセットされているがわかるかと思います。

#」を先頭にして、それに続いて6桁の数値をセットする方法が16進数での色指定の方法になります。

そして、6桁の数値を3分割して、先頭から2桁ずつ赤の成分」「緑の成分」「青の成分」を表します。(下の画像参照)

16進数での色の指定方法16進数での色の指定方法

それぞれ色を英語の「Red」「Green」「Blue」の先頭を取って「RGB」と呼んだりもします。

色の組み合わせ

さきほど「#ff0000」「#00ff00」「#0000ff」の3つをサンプルとしてつかましたが、「#ffff00」のように「赤の成分」と「緑の成分」の値を組み合わせたらどうなるのでしょうか?

正解は次の画像を見ていただくとわかると思いますが、光の三原色の法則に従って黄色のなります。

光の三原色を使って色の組み合わせを理解する光の三原色を使って色の組み合わせを理解する

16進数の簡単な説明

さきほどから出ている「#ff0000」の「f」とは何なのでしょうか?

答えからいうと16進数で数を表したときの1つの数値となります。

以下の画像は2進数10進数16進数の対応表となります。

16進数対応表16進数対応表

2進数・10進数・16進数の細かい解説はここでは省きますが、僕たちが普段使っている0~9の数を組み合わせたものが10進数です。

上の2進数・10進数・16進数の対応表を見ると「10進数の15」と「16進数のf」は同じ値となります。

10進数では「0~9」の10種類の値を扱うので10進数といいます。

それに対して16進数は「0~9」の10種類と「a, b, c, d, e, f」の6種類合計16種類の数を値を扱うので16進数と呼びます。

2進数・10進数・16進数のもう少し詳しい解説は以下のスライドの方にも用意しているので、以下のリンク先のスライドを参考にしていただけたらと思います。

あわせて読みたい
CSSで色を設定するやり方を知るCSSを使って文字や背景などの色を設定する方法は大きく分けて3種類あります。英単語での指定。16進数での指定。関数での指定。この記事を読むことで色の設定方法と16進数の意味を理解することができます。...

約1678万種類の色が指定できる理由

英単語を使った色コードの指定方法」の章の終わりの方で、この章で解説している16進数を使ったやり方、もしくは次の章で解説する関数記法を使ったやり方だと、約1678万種類の色の指定が出来ると話しました。

その理由は計算をするとわかります。

16進数表記は「#000000」のように先頭から2桁ずつ「赤の成分」「緑の成分」「青の成分」を表しています。

1桁が「0~15」の16種類の値となるので、それぞれの色の成分は「16種類×16種類 = 256種類」の値をセットできることになります。

で256種類」、「で256種類」、「で256種類」、それぞれをかけ合わせると「256()×256()×256() => 16,777,216種類」となり、約1678万通りの組み合わせとなります。

そして、組み合わせたときの色は、さきほども説明した「光の三原色」の法則にしたがって、色の成分の強さによって決定されます。

#ff8888」の場合は「赤の成分」が他の色よりも強いため赤系統の色になります。(この例だとピンクっぽい色になります。)

関数記法を使った色コードの指定方法

書き方

CSSでrgb関数を使った色の指定方法CSSでrgb関数を使った色の指定方法

上の画像のCSSのコードを見ていただくと、colorプロパティの値として「rgb(255, 0, 0)」「rgb(0, 255, 0)」「rgb(0, 0, 255)」がセットされているがわかるかと思います。

rgb()」のカッコの中にカンマ(“,”)区切りで、3つ値をセットします。

16進数表記のときと同じで、先頭から赤の成分」「緑の成分」「青の成分」を表し、それぞれに10進数表記で「0~255」までの256種類の値をセットします。(以下の画像参照)

10進数表記は普段僕たちが使っている0~9の数の組み合わせのことです。

例: 9の次は10に繰り上がり、99の次は100に繰り上がる。

rgb関数での色の指定方法rgb関数での色の指定方法

16進数記法と同じで、「で256種類」、「で256種類」、「で256種類」の値をセットするため、「256()×256()×256() => 16,777,216種類」となり、約1678万通りの組み合わせが可能となります。

まとめ

今回の話をまとめると次のとおりです。

今回のまとめ
  • CSSの色コードの指定方法は大きく分けて「英単語での指定」「16進数での指定」「関数記法での指定」の3種類がある
  • 英単語での色の指定の場合は約150種類の色しか指定できない
  • 16進数表記、関数記法での色の指定の場合は約1678万種類の色を指定できる

今回の内容は以下の記事内のスライドの補足資料として作成しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

あわせて読みたい
CSSで色を設定するやり方を知るCSSを使って文字や背景などの色を設定する方法は大きく分けて3種類あります。英単語での指定。16進数での指定。関数での指定。この記事を読むことで色の設定方法と16進数の意味を理解することができます。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

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