デジタルトレンドナビ
サイト内検索
システム開発

2024.06.05

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>

まとめ

HTMLでの色指定は、基本的な16進数カラーコード、RGBカラーコード、HSLカラーコードから応用的な透過色の指定、CSSを使用した色指定、プリセットカラーキーワードまで幅広くあります。

また、HTML Color Codes、RGB.to、ColorHexaなどのツールを活用することで、効率的に色を選び、指定することができます。これらの方法とツールを駆使して、より魅力的なウェブサイトを作成してください。

投稿者

  • デジタルトレンドナビ編集部

    システム開発、Webサイト制作、ECサイトの構築・運用、デジタルトランスフォーメーション（DX）など、デジタルビジネスに関わる多岐の領域において、最新のトレンド情報や実践的なノウハウを発信してまいります。

    View all posts

新着情報

Yahoo!ショッピング広告を完全解説！種類・出稿方法・運用まで総まとめ

2024.11/15

ECサイト構築 / 運営

ストアーズ（STORES）では売れないって本当？売れるコツまで徹底解説

2024.11/15

ECサイト構築 / 運営

こんな記事が読まれています

同じカテゴリの記事

2024.11/08

受託開発会社が推薦する最適な受託開発会社の選び方｜大規模開発向け

2024.10/18

【EOL・EOSL】ミドルウェア・アプリケーションのサポート終了に伴う移行の流れ

2024.07/26

【EOL・EOSL】サーバーOSのサポート終了に関する注意喚起と対策

EOL・EOSL

2024.06/28

【配列処理】JavaScript-mapメソッドの使い方と特徴を紹介

【配列処理】JavaScript-mapメソッドの使い方と特徴を紹介

新着記事

2024.11/15

Yahoo!ショッピング広告を完全解説！種類・出稿方法・運用まで総まとめ

2024.11/15

ストアーズ（STORES）では売れないって本当？売れるコツまで徹底解説

2024.11/15

ストアーズ（STORES）の手数料は？売上・入金・決済別に紹介

人気の記事

  • ECサイトの成功をサポート | テクノデジタル
  • クラウド型テスト管理ツール | Qangaroo
  • 転職直結型AWSエンジニア養成スクール | クラウドCAMP
  • パートナー募集｜オフショア開発ドットコム