HTML でフォントの色を変更する方法

この記事では、HTML ファイル内の色を変更する方法について説明します。 HTML5 では HTML フォントタグは使用されなくなりました。CSS を使用して HTML ページ内のテキストの色を変更できます。古いバージョンの HTML を使用している場合でも、必要に応じて HTML フォントカラータグを使用できます。

方法1方法1/2:

CSSの使用

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/86\/122247-1-1.jpg\/v4-460px-122247-1-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/86\/122247-1-1.jpg\/v4-728px-122247-1-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 1テキストの色を選択します。テキストの表示には赤などの基本色を使用できますが、より微妙な色合いが必要な場合は、HTML カラージェネレーターを使用できます。
- コンピュータのブラウザで、 https://www.w3schools.com/colors/colors_picker.asp にアクセスします。
- ページ上部の六角形のカラーホイールから基本色を選択します。
- ページの右側をスクロールして、使用したい色合いを選択します。
- 色の右側にある 6 桁の数字に注意してください。
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/35\/122247-2-1.jpg\/v4-460px-122247-2-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/35\/122247-2-1.jpg\/v4-728px-122247-2-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 2 HTML ドキュメントを開きます。フォントの色を変更するドキュメントを開きます。
- HTML ドキュメントがない場合は、続行する前に作成してください。
3色を変更するテキストを見つけます。色を変更する段落、見出し、またはその他の形式のテキストが見つかるまで、ドキュメントをスクロールします。
4テキストのマークアップに注意してください。たとえば、見出しの場合は先頭に「<h1>」が表示されます。
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/48\/122247-5-1.jpg\/v4-460px-122247-5-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/48\/122247-5-1.jpg\/v4-728px-122247-5-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 5ドキュメントの先頭に「head」セクションと「style」セクションを追加します。「<html>」タグの下に「 <head>」と入力し、 ↵ Enter を押します。次に、「<head>」タグの下に「 <style>」と入力し、 ↵ Enter を2回押して、両方の終了タグを入力します。結果は次のようになります。
```
 <!DOCTYPE html>
<html>
<ヘッド>
<スタイル>

</スタイル>
</ヘッド>

<本文>
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/d6\/122247-6-1.jpg\/v4-460px-122247-6-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d6\/122247-6-1.jpg\/v4-728px-122247-6-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 6 「color」スタイルタグを入力します。 「<style></style>」タグ間のスペースをクリックし、次のコードを入力します。「red」は、選択したカラーコードに置き換え、「<h1>」は、色を変更するテキストタグに置き換えます。
```
 < h1 > {
       色：赤;
}
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/71\/122247-7-1.jpg\/v4-460px-122247-7-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/71\/122247-7-1.jpg\/v4-728px-122247-7-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":828,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 7ドキュメントを確認します。ページタイトルは次のようになります。
```
 <!DOCTYPE html>
<html>
<ヘッド>
<スタイル>
< h1 > {
       色：赤;
}
</スタイル>
</ヘッド>
<本文>
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/68\/122247-8-1.jpg\/v4-460px-122247-8-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/68\/122247-8-1.jpg\/v4-728px-122247-8-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":828,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 8テキストの色を統一します。ドキュメントの本文を同じ色に変更する場合は、次のコードを入力し、「black」を希望の色に置き換えます。
```
体{
       色：黒;
}
```
広告する

方法2方法2/2:

HTMLタグの使用

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/08\/122247-9-1.jpg\/v4-460px-122247-9-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/08\/122247-9-1.jpg\/v4-728px-122247-9-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":828,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 1テキストの色を選択します。テキストの表示には赤などの基本色を使用できますが、より微妙な色合いが必要な場合は、HTML カラージェネレーターを使用できます。
- コンピュータのブラウザで、 https://www.w3schools.com/colors/colors_picker.asp にアクセスします。
- ページ上部の六角形のカラーホイールから基本色を選択します。
- ページの右側をスクロールして、使用したい色合いを選択します。
- 色の右側にある 6 桁の数字に注意してください。
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/80\/122247-10-1.jpg\/v4-460px-122247-10-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/80\/122247-10-1.jpg\/v4-728px-122247-10-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 2 HTML ドキュメントを開きます。フォントの色を変更するドキュメントを開きます。
- HTML ドキュメントがない場合は、続行する前に作成してください。
3色を変更するテキストを見つけます。色を変更する段落、見出し、またはその他の形式のテキストが見つかるまで、ドキュメントをスクロールします。
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/be\/122247-12-1.jpg\/v4-460px-122247-12-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/be\/122247-12-1.jpg\/v4-728px-122247-12-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 4 「font」開始タグを追加します。色を変更したいテキストの左側をクリックし、次のコードを入力します。「赤」を希望の色に変更してください。 ^{[1] X調査ソース}
```
<フォントの色= "赤" >
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/33\/122247-13-1.jpg\/v4-460px-122247-13-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/33\/122247-13-1.jpg\/v4-728px-122247-13-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 5 「font」終了タグを追加します。色を変更したいテキストの末尾をクリックし、 </font>と入力します。
```
 < font color = "red" >このテキストは赤です! </ font >
```
広告する

ヒント

HTML カラーコードは次の部分に分かれています。最初の 2 文字は赤の色合いを表し、真ん中の 2 文字は緑の色合いを表し、最後の 2 文字は青の色合いを表します。各色の内容は「00」〜「99」の間で選択できます。色を最大限に活用するには、数字の代わりに「FF」を入力します。たとえば、純粋な青の場合は「0000FF」です。
ページの読み取りエクスペリエンスを向上します。白い背景に明るい色を使用したり、黒い背景に暗い色を使用したりすると、テキストが読みにくくなります。
古いモニターは約 65,000 色しか表示できず、一部の古いモデルでは 256 色しか表示できませんが、ネットワークユーザーの大半は指定した色を表示できます。 ^{[2] X研究ソース}

広告する