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進数の意味を理解することができます。...
【やる気満々な方向け】学習サポートとオンライン講義やってます!

Webエンジニアになりたい人向けに、MENTAにて『【やる気満々な方向け】未経験からのWebエンジニア育成コース』というプランを用意しております。

このプランでは、「【学習コンテンツ】Web開発」と「【初心者向け】The Web Developer Bootcamp」で紹介している教材を使って学習を進めていただきます。

【学習コンテンツ】Web開発」に用意している学習コンテンツのスライドも「【初心者向け】The Web Developer Bootcamp」で紹介している教材をベースに作っています。

あわせて読みたい
【初心者向け】The Web Developer Bootcampはじめに 「The Web Developer Bootcamp」はWeb白熱教室の「学習コンテンツ」のベースとなっている教材です。 ...
あわせて読みたい
Web開発Webエンジニアになるために必要な知識・スキルを学習できるコンテンツを用意しました。未経験者でも、①開発環境の準備、②Webの基本的な仕組み、③HTML、④CSS、⑤JavaScriptと順を追って学習することでスキルが身につくことを目的に教材を作成しています。...

誰向けのプラン?

こちらのプランは次のような方に向けて作られています。

プラン対象者
  1. Progateやドットインストールで一通り学習したけど、次に何をすればよいかわからない
  2. Webエンジニアになるまでの学習プランがあると助かる
  3. 学習していてわからないところが出てきたときに質問したい
  4. コードレビューして欲しい
  5. オンライン講義に参加したい
  6. 学習した内容をアウトプットした際に、フィードバックがもらえたら嬉しい
  7. おすすめの学習教材を知りたい
  8. Webフロントエンド・バックエンドを学習したい
  9. フルスタックエンジニアになりたい
  10. 文系出身で今までプログラミングをしてこなかったけど、将来Webエンジニアになりたい
  11. 将来フリーランスになることを目指している

プラン内容は?

【やる気満々な方向け】未経験からのWebエンジニア育成コース』では次のことを行っております。

プラン内容
  1. Udemyの教材や、Web白熱教室の学習コンテンツを使った学習プランの提示 (学習プランに沿って学習を進めていただきます。)
  2. 教材・学習コンテンツの課題をこなしたあとは、僕にコードレビュー依頼を投げていただくことで、コードを添削する(課題クリア後は、引き続き学習プランの内容を続けていただきます。)
  3. プラン契約者が参加するSlackグループにて質問し放題
  4. Slack内にある「アウトプットの場」チャンネルにて、学習したことをアウトプットをしていただくことで、それに対しフィードバックをする (学習内容のアウトプットは復習にもなるため、アウトプットすることを強く推奨します。)
  5. 画面共有を使ったオンライン講義 (オンライン講義は録画して、いつでもふり返れるようにしています。(オンライン講義動画(ウェビナー動画)))
  6. 学習プラン以外の内容に対しての質疑応答 (内容によっては回答できないものもありますが、まずは気軽に質問していただけたらと思います。)

その他注意点

1人で対応していることもあるため、対応が難しくなった場合は急遽募集を終了する可能性もあることをご了承ください。

もしくは、僕以外にメンターを増やすことで募集を継続するということも考えているため、その場合は現在のプラン料金の値段を上げることなると思います。

仮にプラン料金を上げる場合は、『現在のプラン料金 × メンター人数』の料金になるかと思います。

現在の値段が5000円なので、1日1本ペットボトルジュースを買うのを我慢することで(約160円)、効率よく学習できるので費用対効果はかなり高いかなと自負しています。

また、今後メンターが増えて、プラン料金が10000円15000円と上がったとしても、月々の料金は申し込んだときの料金となるので、5000円のときに契約した場合はずっと5000円で受講することができます。

詳しく話を聞いてみたい方は

以下のいずれかでメッセージをいただけたらと思います^^

 

プラン内容については以下のリンク先からも確認することが出来ます^^

【やる気満々な方向け】未経験からのWebエンジニア育成コース

COMMENT

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