【CSS】色を指定する方法について

目次

1. 1. CSSで色を指定する方法
2. 2. カラーコード
3. 3. カラーネーム
4. 4. rgb
5. 5. まとめ

1. CSSで色を指定する方法

CSSで色を指定する方法は、大きく分けて以下の3種類があります。

• カラーコード
• カラーネーム
• rgb

2. カラーコード

シャープ（#）+6ケタの16進数（0～F）で指定する方法で、最もよく使用される方法です。

■記述例（黒を指定する場合）

color: #000;

■値の参考例

黒：#000000（※#000と省略して記述されることもあります。）
赤：#ff0000
青：#0000ff

3. カラーネーム

あらかじめ定義されているカラーのキーワードで指定する方法です。使い方は簡単ですが、定義されているカラーの数が限られていて細かい色の指定ができないため、実務で使用することはあまりありません。

■記述例（黒を指定する場合）

color: black;

■値の参考例

黒：black
赤：red
青：blue

4. rgb

光の3原色である赤、緑、青のカラーコードで指定する方法です。それぞれの値は0〜255の数字で表します。rgbに透明度を追加したrgbaでは、カラーコードの後に透明度を設定して指定したカラーを透過させることができます。背景のカラーを透過させる場合などはこの方法を使用します。

■記述例（黒を指定する場合）

color: rgb(0, 0, 0);

■値の参考例

黒：rgb(0, 0, 0);
赤：rgb(255, 0, 0);
青（透明度60%）： rgba(0, 0, 255, 0.6);

5. まとめ

CSSで色を指定する方法について解説してきました。

CSSで色を指定する方法は、大きく分けて「カラーコード」「カラーネーム」「rgb（rgba）」の3種類の方法があります。

実務で使用する際は、一般的には「カラーコード」を使用し、背景を透過させる場合などは「rgba」を使用します。

あなたのコーディング力、実務で通用しますか？

以下のようなお悩みに1つでも当てはまる場合、無料のメール講座をお受け取りください。

• 模写はできるようになってきたけど、実務に通用するか不安
• ポートフォリオに悩んでいる・載せる実績がない
• 案件に挑戦したいけど、自信がなくて一歩踏み出せない

今登録すると、特典PDFとして、『コーディング中級者が案件獲得前にやるべきこと8選』をプレゼント中です。

コーディングを仕事にしていきたい方へ

Codejump Proでは、実際の案件をモデルにした仮想案件で実務レベルのスキルと経験を身につけていきます。

• ポートフォリオに載せる実績がない・・・
• 実務経験がゼロ・・・
• 案件獲得に不安がある・・・

1つでも当てはまる場合は、今すぐ実務レベルの案件をスタートしてみてください。

現場レベルのスキルを身につけたい方へ

現場レベルのコーディングスキルを身につけたい方は、書籍『HTML&CSS Webデザイン 現場レベルのコーディング・スキルが身につく実践入門』（出版社：技術評論社）がおすすめです。

本書は、入門編から実践編の6つのWebサイト制作を通して、現場で必要なコーディングスキルをステップアップしながら1冊で身につけていきます。

• 第1章【入門編】プロフィールサイト〜フレックスボックス
• 第2章【初級編】ブランドサイト〜ポジション
• 第3章【中級編】サービスサイト〜複数ページ
• 第4章【上級編】カフェサイト〜複数レイアウト
• 第5章【応用編】ランディングページ〜動きのあるWebサイト
• 第6章【実践編】コーポレートサイト〜実務を想定したWebサイト制作

現場レベルのコーディングスキルを身につけたい方は、こちらの書籍を一通り学習した後、Codejumpの練習課題に取り組むと効率良く学習できます。