HTML要素の色を変更する方法

HTMLを使用して、Webページの一部の要素およびコンテンツの一部の色を変更できます。 たとえば、テキスト、境界線、またはHTMLコンテンツ分割のチュートリアルで示されているように<div>要素の色を変更できます。 これらのコンテンツの色の値を変更する方法は、要素ごとに異なります。

このチュートリアルでは、HTMLの色名を使用して、テキスト、画像の境界線、および<div>要素の色を変更する方法を学習します。

<p>や<h1>などのテキスト要素の色は、style属性とcolorプロパティを使用して次のように変更されます。

<p style="color:blue;">This is blue text.</p>

このコードをindex.htmlファイルに書き込んで、ブラウザにロードしてみてください。 （チュートリアルシリーズに従わなかった場合は、チュートリアルHTMLプロジェクトのセットアップでindex.htmlファイルのセットアップ手順を確認できます。 ブラウザにファイルをロードする手順については、チュートリアルはこちらを参照してください。）

次のようなものを受け取るはずです。

これは青いテキストです。

境界線の色は、style属性とborderプロパティを使用して変更されます。

<img src="https://html.sammy-codes.com/images/small-profile.jpeg" style="border: 10px solid green"/>

このコードをindex.htmlファイルに書き込んで、ブラウザにロードしてみてください。 （この例では、オンラインでホストしているイメージを使用していることに注意してください。 また、境界線は幅が10ピクセルで、実線（破線ではなく）である必要があることも指定しました。

次のようなものを受け取るはずです。

<div>コンテナの色は、style属性とbackground-colorプロパティを使用して次のように変更されます。

<div style="width:200px;height:200px;background-color:yellow;"></div>

このコードをindex.htmlファイルに書き込んで、ブラウザにロードしてみてください。 次のようなものを受け取るはずです。

これらの例では、色の値は色の名前で定義されています。 次の色の名前を使用して、テキスト、画像の境界線、<div>要素の色を変更してみてください：black、white、gray、silver 、purple、red、fuchsia、lime、olive、green、yellow、 teal、navy、blue、maroon、およびaqua。

色は16進値で指定することもできることに注意してください。 16進数の色は、#0000FF（青）、#40E0D0（ターコイズ）、#C0C0C0（銀）などのポンド記号が前に付いた6桁の英数字で構成されます。 ただし、このチュートリアルシリーズでは、引き続き色名を使用します。

これで、テキスト、画像の境界線、および<div>要素の色を色の名前を使用して変更する方法についての基本的な知識が得られました。 チュートリアルシリーズの後半で、Webサイトの構築を開始するときに、色に戻ります。