HTML でテキストの色を変更する方法

ハイパーテキストでは、 <font>タグを使用してテキストの色を変更できますが、新しいバージョンの HTML5 ではこの方法はサポートされなくなりました。 Web ページ上の各要素のテキストの色をカスタマイズするには、代わりに CSS を使用する必要があります。これにより、Web ページがさまざまなブラウザと互換性を持つことが保証されます。

方法1方法1/2:

CSSの使用

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/4a\/157292-1.jpg\/v4-460px-157292-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/4a\/157292-1.jpg\/v4-728px-157292-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 1 HTML ファイルを開きます。テキストの色を変更する最良の方法は、CSS を使用することです。 HTML5 は、古いバージョンの HTML の<font>属性をサポートしていません。したがって、各要素のスタイルを定義するには CSS を使用するのが最適です。
- このアプローチは、外部スタイルシート (個別の CSS ファイル) でも機能します。以下に、内部スタイルシートを使用する HTML ファイルの例を示します。
2 <head>タグ内にカーソルを置きます。内部スタイルシートを使用している場合は、このタグで独自のスタイルを定義できます。
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/d1\/157292-3.jpg\/v4-460px-157292-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d1\/157292-3.jpg\/v4-728px-157292-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 3 <style>と入力して、内部スタイルシートを作成します。 <style> タグが <head> タグ内にある場合、<style> タグ内の CSS がページ上の該当するすべての要素に適用されます。完了すると、HTMLファイルの冒頭は次のようになります。 ^{[1] X研究ソース}
```
<!DOCTYPE html>
<html>
<ヘッド>
<スタイル>

</スタイル>
</ヘッド>
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/7a\/157292-4.jpg\/v4-460px-157292-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/7a\/157292-4.jpg\/v4-728px-157292-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 4テキストの色を変更する要素を入力します。 <style> セクションを使用して、ページ上のさまざまな要素の外観を定義します。たとえば、ページ上のすべての本文テキストのスタイルを変更するには、次のように入力します。
```
 <!DOCTYPE html>
<html>
<ヘッド>
<スタイル>
体{

}
</スタイル>
</ヘッド>
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/0b\/157292-5.jpg\/v4-460px-157292-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0b\/157292-5.jpg\/v4-728px-157292-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 5要素セレクターにcolor:属性を入力します。 color:属性は、この要素に使用するテキストの色をページに伝えます。この場合、ページ上のすべてのテキストのデフォルト要素でもある本文テキストの色が変更されます。
```
 <!DOCTYPE html>
<html>
<ヘッド>
<スタイル>
体{
	色：
}
</スタイル>
</ヘッド>
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/ed\/157292-6.jpg\/v4-460px-157292-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/ed\/157292-6.jpg\/v4-728px-157292-6.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 6テキストの色を入力します。色を入力する方法は、名前、16 進数値、RGB 値の 3 つがあります。たとえば、色を青に設定するには、 blue 、 rgb(0, 0, 255) 、または#0000FFと入力します。
```
 <!DOCTYPE html>
<html>
<ヘッド>
<スタイル>
体{
	色：赤;
}
</スタイル>
</ヘッド>
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/0e\/157292-7.jpg\/v4-460px-157292-7.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0e\/157292-7.jpg\/v4-728px-157292-7.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 7さまざまな要素の色を変更するには、他のセレクターを追加します。さまざまなセレクターを使用して、ページのさまざまな部分のテキストの色を変更できます。
```
 <!DOCTYPE html>
<html>
<ヘッド>
<スタイル>
体{
	色：赤;
}
h1 {
	色: #00FF00 ;
}
ｐ {
	色: rgb ( 0,0,255 )
}
</スタイル>
</ヘッド>
<本文>

< h1 >このヘッダーは緑色になります。 </ h1 >

< p >この段落は青色になります。 </ p >

本文は赤色になります。
</本文>
</html>
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/ab\/157292-8.jpg\/v4-460px-157292-8.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/ab\/157292-8.jpg\/v4-728px-157292-8.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 8要素を変更する代わりに、CSS クラスを定義します。クラスを定義して、それをページ全体の任意の要素に適用すると、そのクラススタイルが即座に追加されます。たとえば、次のファイルでは、「.redtext」クラスにより、適用されているすべての要素で赤色のテキストが使用されます。
```
 <!DOCTYPE html>
<html>
<ヘッド>
<スタイル>
.redtext {
	色：赤;
}
</スタイル>
</ヘッド>
<本文>

< h1 class = "redtext" >この見出しは赤色になります</ h1 >
< p >この段落は正常になります。 </ p >
< p class = "redtext" >この段落は赤色になります</ p >

</本文>
</html>
```
広告する

方法2方法2/2:

カスケードスタイル属性の使用

1 HTML ファイルを開きます。カスケードスタイルプロパティを使用して、ページ上の要素のスタイルを変更できます。この方法は、1 つまたは 2 つのスタイルをすばやく変更する場合に便利ですが、大規模な変更には推奨されません。包括的なスタイル変更の場合には、以前の方法を使用する必要があります。 ^{[2] X研究ソース}
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/0c\/157292-10.jpg\/v4-460px-157292-10.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0c\/157292-10.jpg\/v4-728px-157292-10.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 2ファイル内で変更する要素を見つけます。カスケードスタイルプロパティを使用して、任意の要素のテキストの色を変更できます。たとえば、特定の見出しのテキストの色を変更したい場合は、次のファイルで見つけます。
```
 <!DOCTYPE html>
<html>
<本文>

< h1 >これは変更したいヘッダーです</ h1 >

</本文>
</html>
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/5c\/157292-11.jpg\/v4-460px-157292-11.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/5c\/157292-11.jpg\/v4-728px-157292-11.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 3要素にスタイル属性を追加します。変更したい要素の開始タグ内にstyle=""と入力します。
```
 <!DOCTYPE html>
<html>
<本文>

< h1 style = "" >これは変更したいヘッダーです</ h1 >

</本文>
</html>
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/ea\/157292-12.jpg\/v4-460px-157292-12.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/ea\/157292-12.jpg\/v4-728px-157292-12.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 4 内にcolor:属性を入力します。例えば：
```
 <!DOCTYPE html>
<html>
<本文>

< h1 style = "color:" >これは変更したいヘッダーです</ h1 >

</本文>
</html>
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/76\/157292-13.jpg\/v4-460px-157292-13.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/76\/157292-13.jpg\/v4-728px-157292-13.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 5テキストを変更する色を入力します。色を表現する方法は3つあります。色名、RGB 値、または 16 進数値を入力できます。たとえば、色を黄色に変更するには、 yellow; 、 rgb(255,255,0); 、または#FFFF00; と入力します。
```
 <!DOCTYPE html>
<html>
<本文>

< h1 style = "color:#FFFF00;" >このヘッダーは黄色になりました</ h1 >

</本文>
</html>
```
広告する