CSSのbackground-colorプロパティとは？使い方とサンプルコードを解説

background-color プロパティは、HTML要素の背景色を設定するために使用されるCSSプロパティです。テキストやボックスに色をつけることで、ページのデザイン性や視認性を高めることができます。

基本構文

background-color プロパティには、カラーネーム（例：blue）、16進数カラーコード（例：#0000ff）、RGB値（例：rgb(0,0,255)）など、さまざまな形式で色を指定できます。

以下のコードを実行して、background-color プロパティの実際の動作を確認してみましょう。

<html>
   <head>
   </head>
   <body>
      <p style = "background-color:blue;">
      このテキストは青い背景色で表示されます。</p>
   </body>
</html>

上記のコードでは、<p> 要素に対してインラインスタイルで「background-color: blue;」を指定しています。ブラウザで表示すると、段落全体が青色の背景になり、その上にテキストが表示されます。

背景色はボタンや見出し、セクション全体など、あらゆる要素に適用できるため、Webデザインにおいて最もよく使われるプロパティの一つです。

CSSのlist-style-typeプロパティでリストの行頭記号を自由に変更する方法
CSSのlist-style-typeプロパティを使用すると、リスト項目の先頭に表示されるマーカー(行頭記号)の形状や見た目を自由にコントロールできます。デフォルトの黒丸(disc)だけでなく、白丸や四角、数字、アルファベットなど、さまざまなスタイルを指定できるのが特徴です。 list-style-typeの主な値 disc:黒丸(初期値) circle:白丸(中抜きの丸) square:塗りつぶしの四角形 decimal:算用数字(1、2、3...) lower-alpha:小文字アルファベット(a、b、c...) upper-alpha:大文字アルファベット(A、B、C...) none
CSSのlist-style-imageプロパティの使い方｜箇条書きのマーカーを画像に変更する方法
list-style-imageプロパティとはCSSのlist-style-imageプロパティを使うと、箇条書き（リスト）のマーカーとして、通常の黒丸（ビュレット）や数字の代わりに任意の画像を指定できます。オリジナルのアイコンや矢印画像などをリストの先頭に表示したい場合に便利なプロパティです。値にはurl()関数で画像ファイルのパスを指定します。指定できるのは<ul>や<ol>、<li>などdisplay: list-itemが適用される要素です。基本的な書式list-style-image: url(画像のパス);使用例以下のコードでは、最初のリスト項目