2024.06.05

HTMLでの色指定方法ガイド

css html

HTMLでの色指定は、ウェブデザインや開発において重要な役割を果たします。色はユーザーの視覚的な体験を豊かにし、ブランドのアイデンティティを強化するために使用されます。

本記事では、初心者から中級者向けに、HTMLでの色指定方法を詳しく解説します。基本的な16進数カラーコードやRGBカラーコード、HSLカラーコードの指定方法から、透過色の指定、CSSを使用した色指定、プリセットカラーキーワードまで、幅広いトピックをカバーします。
さらに、色指定に役立つツールも紹介しますので、最後までお読みいただき、実際のプロジェクトに役立ててください。

基本的な色指定方法

HTMLでの色指定にはいくつかの方法があります。ここでは、最も基本的な16進数カラーコード、RGBカラーコード、HSLカラーコードの3つの方法について解説します。

16進数カラーコード

16進数カラーコードは、カラーコードを16進数（0-9およびA-F）で表現する方法です。この方法は、ウェブデザインや開発で広く使われており、Photoshopなどのデザインソフトでも一般的に使用されます。 16進数カラーコードは「#」記号の後に6桁または3桁の16進数を続けて記述します。例えば、赤色は「#FF0000」または「#F00」と指定します。

html
<style> body { background-color: #F0F0F0; } h1 { color: #FF5733; } p { color: #333333; } </style> <body> <h1>見</h1> <p>本文のテキストです。</p> </body>

RGBカラーコード

RGBカラーコードは、赤（Red）、緑（Green）、青（Blue）の3つの成分を0から255の範囲で指定する方法です。この方法では、各成分の値をカンマで区切って「rgb(255, 0, 0)」のように記述します。さらに、透過度（Alpha）を指定する場合は、「rgba(255, 0, 0, 0.5)」のようにします。

html
<style> body { background-color: rgb(240, 240, 240); } h1 { color: rgb(255, 87, 51); } p { color: rgb(51, 51, 51); } </style> <body> <h1>見出し</h1> <p>本文のテキストです。</p> </body>

HSLカラーコード

HSLカラーコードは、色相（Hue）、彩度（Saturation）、輝度（Lightness）の3つの成分を指定する方法です。色相は0度から360度、彩度と輝度は0%から100%の範囲で指定します。例えば、赤色は「hsl(0, 100%, 50%)」と指定します。透過度を指定する場合は、「hsla(0, 100%, 50%, 0.5)」のように記述します。

html
<style> body { background-color: hsl(0, 0%, 94%); } h1 { color: hsl(9, 100%, 60%); } p { color: hsl(0, 0%, 20%); } </style> <body> <h1>見出し</h1> <p>本文のテキストです。</p> </body>

応用的な色指定方法

HTMLの基本的な色指定方法を理解したら、次は応用的な色指定方法について学びましょう。ここでは、透過色の指定、CSSを使用した色指定、プリセットカラーキーワードについて解説します。

透過色の指定

透過色を指定することで、要素の背景やテキストに透明度を持たせることができます。これにより、背景画像や他の要素と重なった場合に視覚的な効果を持たせることができます。透過色はRGBAやHSLAの形式を使用して指定します。

RGBAの使用例

RGBAは、赤（Red）、緑（Green）、青（Blue）に加えて、アルファ（Alpha）値を指定する方法です。アルファ値は0から1の範囲で、0が完全に透明、1が完全に不透明を示します。

html
> <style> body { background-color: rgba(240, 240, 240, 0.8); } h1 { color: rgba(255, 87, 51, 0.9); } p { color: rgba(51, 51, 51, 0.6); } </style> <body> <h1>見出し</h1> <p>本文のテキストです。</p> </body>

HSLAの使用例

HSLAは、色相（Hue）、彩度（Saturation）、輝度（Lightness）に加えて、アルファ（Alpha）値を指定する方法です。HSLAを使うことで、色の調整が直感的に行えます。

html
<style> body { background-color: hsla(0, 0%, 94%, 0.8); } h1 { color: hsla(9, 100%, 60%, 0.9); } p { color: hsla(0, 0%, 20%, 0.6); } </style> <body> <h1>見出し</h1> <p>本文のテキストです。</p> </body>

CSSを使用した色指定

CSSを使用して色を指定することで、HTML要素の見た目をより自由にカスタマイズできます。CSSでは、セレクタを使って特定のHTML要素に対してスタイルを適用し、その中で色指定を行います。

クラスセレクタとIDセレクタの使用例

クラスセレクタは、複数の要素に共通のスタイルを適用する場合に使用します。IDセレクタは、特定の1つの要素にスタイルを適用する場合に使用します。

html
<style> .common-style { background-color: #F0F0F0; color: #333333; } #unique-style { color: #FF5733; } </style> <body> <div class=”common-style”> <h1 id=”unique-style”>見出し</h1> <p>本文のテキストです。</p> </div> </body>

プリセットカラーキーワード

プリセットカラーキーワードは、一般的な色名を使用して色を指定する方法です。これらのキーワードは、すべてのブラウザでサポートされており、16種類の標準的な色を簡単に指定できます。

プリセットカラーキーワードの一覧

black
silver
gray
white
maroon
red
purple
fuchsia
green
lime
olive
yellow
navy
blue
teal
aqua

使用例

html
<style> body { background-color: white; } h1 { color: red; } p { color: green; } </style> <body> <h1>見出し</h1> <p>本文のテキストです。</p> </body>

色指定に役立つツール

色指定を効率的に行うために、さまざまなツールを活用すると便利です。ここでは、特におすすめの3つのツールを紹介します。

HTML Color Codes

HTML Color Codesは、直感的に使えるインターフェースで色の選択ができるウェブツールです。色相、彩度、明度をスライダーで調整しながら、HEX、RGB、HSLの各コードをリアルタイムで取得できます。また、色相環や明度スケールを使用して視覚的に色を選ぶことができるため、特定の色合いを探しているが具体的なコードがわからない場合に非常に便利です。

利用方法

HTML Color Codesのウェブサイトにアクセスします。

スライダーを使って色相、彩度、明度を調整します。

選択した色のHEX、RGB、HSLコードが表示されるので、それをコピーして使用します。

html
<!– HTML Color Codesで選んだ色を使用 –> <style> body { background-color: #e0e0e0; } h1 { color: #ff5733; } p { color: #333333; } </style> <body> <h1>見出し</h1> <p>本文のテキストです。</p> </body>

RGB.to

RGB.toは、さまざまな色形式間の変換を得意とするツールです。HEX、RGB、HSL、HSV、CMYKなど、多岐にわたる色形式をサポートしており、ある色形式を別の形式に瞬時に変換することができます。例えば、HEXコードを入力すると対応するRGBやHSLの値を即座に取得できます。

利用方法

RGB.toのウェブサイトにアクセスします。

変換したい色形式の値を入力します。

変換された色形式の値が表示されるので、それをコピーして使用します。

html
<!– RGB.toで変換した色を使用 –> <style> body { background-color: rgb(224, 224, 224); } h1 { color: rgba(255, 87, 51, 0.9); } p { color: rgb(51, 51, 51); } </style> <body> <h1>見出し</h1> <p>本文のテキストです。</p> </body>

ColorHexa

ColorHexaは、色に関する詳細な情報を提供するツールです。特定の色コードを入力すると、その色の詳細情報、類似色、生成されるグラデーション、色の変換オプションなどが表示されます。また、色のブレンド機能を用いて2つの色を混合し、新しい色を作り出すこともできます。

利用方法

ColorHexaのウェブサイトにアクセスします。

色コードを入力すると、その色の詳細情報が表示されます。

必要に応じて、ブレンドや変換機能を使用します。

html
<!– ColorHexaで取得した色を使用 –> <style> body { background-color: #e0e0e0; } h1 { color: #ff5733; } p { color: #333333; } </style> <body> <h1>見出し</h1> <p>本文のテキストです。</p> </body>