HTML要素の色を変更する方法
HTMLを使用して、Webページの一部の要素およびコンテンツの一部の色を変更できます。 たとえば、テキスト、境界線、またはHTMLコンテンツ分割のチュートリアルで示されているように-の色を変更できます。 <div>
エレメント。 これらのコンテンツの色の値を変更する方法は、要素ごとに異なります。
このチュートリアルでは、テキストの色、画像の境界線、および <div>
HTMLカラー名を使用する要素。
などのテキスト要素の色 <p>
また <h1>
、を使用して変更されます style
属性と color
そのようなプロパティ:
<p style="color:blue;">This is blue text.</p>
あなたのでこのコードを書いてみてください index.html
ファイルを作成し、ブラウザにロードします。 (チュートリアルシリーズに従わなかった場合は、セットアップ手順を確認できます。 index.html
チュートリアル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進数の色は、次のようなポンド記号が前に付いた6桁の英数字で構成されます。 #0000FF
(青い)、 #40E0D0
(ターコイズ)、または #C0C0C0
(銀)。 ただし、このチュートリアルシリーズでは、引き続き色名を使用します。
これで、テキストの色、画像の境界線、および <div>
色名を使用する要素。 チュートリアルシリーズの後半で、Webサイトの構築を開始するときに、色に戻ります。