HTMLで色を設定する方法-フロントエンドQ&A-php.cn

HTMLで色を設定する方法

PHPz

リリース： 2023-04-21 16:54:33

オリジナル

11328 人が閲覧しました

HTML は、Web ページの作成とデザインに使用されるマークアップ言語です。 Web ページを作成する場合、色を使用すると、Web ページがより魅力的で読みやすくなります。 HTML には、色を設定するさまざまな方法が用意されています。この記事では、HTML を使用して色を設定する方法を学びます。

1. HTML カラーの基本概念

HTML カラーは通常、RGB カラーモード (赤、緑、青の明るさの値で構成される) を使用します。黒は「Black」、白は「White」、青は「Blue」など、基本色は言葉で表されます。 HTML では、次の方法で色を設定できます:

2. 色名の使用

HTML では、色名を直接使用して色を設定できます。色の名前には、基本的な色の名前といくつかの一般的な色の名前があります。一般的な色の名前は次のとおりです:

サンプルコード:

<body style="background-color: DodgerBlue;">
    <h1 style="color:White;">Hello World!</h1>
    <p style="color:SlateGray;">This is a paragraph.</p>
</body>

ログイン後にコピー

3. 16 進数値を使用して色を設定します

色の名前を使用することに加えて、色を設定するRGB値。 RGB カラーは、赤、緑、青の 3 つのカラーチャネルの値で構成され、各チャネルの値は 0 ～ 255 の数値で表されます。 HTML では、16 進数 (Hex) 形式を使用して色を定義することもできます。 16 進値は # 記号で始まり、その後に 6 桁の 16 進数が続きます。最初の 2 桁は赤チャネルの値を表し、中央の 2 桁は緑チャネルの値を表し、最後の 2 桁は青チャネルの値を表します。。以下に、色の一般的な 16 進値をいくつか示します。

サンプルコード:

<body style="background-color: #1E90FF;">
    <h1 style="color:#FFF;">Hello World!</h1>
    <p style="color:#708090;">This is a paragraph.</p>
</body>

ログイン後にコピー

16 進値を使用して色の設定を行うことには、いくつかの利点があります。まず、より多くの色のオプションが提供されます。次に、16 進値を使用すると、複数の要素が同じ色を使用する場合に色の一貫性が確保されます。

4. RGB 値を使用して色を設定する

RGB 値は、各カラーチャネルの明るさの値を示す 3 つの数値のセットで、0 ～ 255 の間で選択できます。 HTML では、次のコードを使用して RGB カラーを設定できます:

サンプルコード:

<body style="background-color: RGB(30,144,255);">
    <h1 style="color:RGB(255,255,255);">Hello World!</h1>
    <p style="color:RGB(112,128,144);">This is a paragraph.</p>
</body>

ログイン後にコピー

5. HSL 値を使用して色を設定します

HSL 値色の色相と彩度、度合いと明度を表します。 HSL値において、Hは色相、Sは彩度、Lは明度を表します。 HTML では、次のコードを使用して HSL カラーを設定できます:

サンプルコード:

<body style="background-color: hsl(210, 100%, 50%);">
    <h1 style="color:hsl(0, 0%, 100%);">Hello World!</h1>
    <p style="color:hsl(210, 11%, 49%);">This is a paragraph.</p>
</body>

ログイン後にコピー

6. CSS スタイルシートを使用して色を設定します

HTML では、次のことができます。また、CSS スタイルシートを使用して色を設定します。 CSS スタイルシートは、HTML ドキュメントからスタイル情報を分離するテクノロジーであり、これにより、HTML ページをより明確かつ論理的な方法で編集できるようになります。サンプルコードをいくつか示します:

<head>
<style>
body {
    background-color: #1E90FF;
}

h1 {
    color: #FFF;
}

p {
    color: #708090;
}
</style>
</head>
<body>
    <h1>Hello World!</h1>
    <p>This is a paragraph.</p>
</body>

ログイン後にコピー

概要:

HTML で色を設定する方法はたくさんあります。色の名前を使用して基本的な一般的に使用される色を簡単に設定し、16 進値と RGB 値を使用してより多くの色の選択肢を提供し、HSL 値を使用して色をより正確に設定できるようにします。 CSS スタイルシートを使用すると、より便利かつ論理的に色を設定できます。状況に応じて適した方法が異なるため、自分に合った方法を選択することが重要です。

以上がHTMLで色を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。