HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLで背景色を設定する方法|style属性とbackground-colorプロパティの使い方

CSSは設定項目が非常に多く、経験豊富な開発者でも戸惑うことがあります。そこで本記事では、独立したCSSファイルを作成することなく、HTMLドキュメントの背景色を変更する方法を解説します。

HTML5では、style属性とbackground-colorプロパティを使って背景色を指定できます。この属性は任意の要素に適用可能ですが、ページ全体の背景色を設定する場合は、bodyタグにstyle属性を記述します。コードは以下のようになります。

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body style="background-color:orange;">
    <h1>これは見出しです。</h1>
    <p>これは本文テキストです。</p>
  </body>
</html>

このコードを実行すると、オレンジ色の背景を持つHTMLページが表示されます。

さまざまなWebカラーシステムの指定方法

HTMLで背景色を設定する方法|style属性とbackground-colorプロパティの使い方

HTMLで色を指定する際、style属性には16進数カラーコード(HEX)、HTMLカラー名、RGB(A)カラー値、HSLカラー値を使用できます。RGBおよびHSLの場合は、background-colorの宣言の中にカラーシステム名を含める必要がある点に注意してください。

各カラーシステムの記述例は以下の通りです。

16進数カラーコード(HEX)

<body style="background-color:#fbbd0e;">
</body>

HTMLカラー名

<body style="background-color:orange;">
</body>

RGBカラー値

<body style="background-color:rgb(251,189,14);">
</body>

RGBAカラー値

RGBAでは、4番目の値(アルファ値)で透明度を指定できます。0が完全な透明、1が完全不透明を表します。

<body style="background-color:rgba(251,189,14,0.5);">
</body>

HSLカラー値

HSLは「色相(Hue)」「彩度(Saturation)」「輝度(Lightness)」の3つの要素で色を表現する方式です。

<body style="background-color:hsl(44, 96%, 51%);">
</body>

HSLAカラー値

<body style="background-color:hsla(44, 96%, 51%, 0.5);">
</body>

注意点として、この方法で背景色を設定した後、後から外部CSSファイルを作成する場合は、スタイル同士の競合(上書き)を防ぐため、HTML側からstyle属性とbackground-colorプロパティを必ず削除しておきましょう。

まとめ

本記事では、HTMLで背景色を変更する方法について解説しました。style属性とbackground-colorプロパティを活用すれば、CSSファイルを別途用意しなくても、手軽にページの見た目をカスタマイズできます。これからHTMLの学習を始める方は、入門ガイドや習得にかかる期間を解説した記事もあわせて参考にすると、より理解が深まるでしょう。

  1. HTML Screen colorDepthプロパティの使い方をわかりやすく解説

    colorDepthプロパティとは HTMLのScreenインターフェースが持つcolorDepthプロパティは、画像を表示するために使用されるカラーパレットのビット深度（1ピクセルあたりのビット数）を返します。 現代の一般的なブラウザ環境では、この値はほとんどの場合「24」（約1,677万色表示可能）または「32」を返します。なお、同様の役割を持つscreen.pixelDepthプロパティと同じ値になることが多く、実用上はどちらを使っても大きな違いはありません。 構文 colorDepthプロパティの基本的な構文は以下のとおりです。 screen.colorDepth サンプルコード

  2. HTML DOMのstyle.colorプロパティとは？使い方とサンプルコードを解説

    HTML DOMのstyle.colorプロパティは、要素内のテキストの色を取得（get）および設定（set）するために使用されるプロパティです。テキストの色は、以下のいずれかの形式で指定できます。16進数カラーコード（例：#ff0000）rgb() 関数（例：rgb(255,0,0)）rgba() 関数（透明度を含む指定）hsl() 関数（色相・彩度・輝度による指定）hsla() 関数（透明度を含むHSL指定）定義済みのカラーキーワード（例：red、blue、green など）style.colorプロパティの構文colorプロパティを設定する際の基本的な構文は次のとおりです。object.