CSSのcolorプロパティの使い方を徹底解説！テキストの色を指定する方法

CSSのcolorプロパティは、テキストの文字色を設定するために使用されます。要素に適用することで、表示される文字の色を自由にコントロールできます。

ここでは、colorプロパティの基本的な使い方を、実際に動作するサンプルコードとともに紹介します。

基本のサンプルコード

以下のコードは、段落（p要素）の文字色を青色に設定するシンプルな例です。

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

この例では、p要素に対してインラインスタイルとしてcolor:blue;を指定しています。これにより、段落内のテキストが青色で表示されます。

colorプロパティでは、色の指定方法が複数あります。主な指定方法は以下のとおりです。

red、blue、greenなど、定義済みの色名を直接指定する方法です。直感的で分かりやすく、初心者にもおすすめです。

#ff0000のように、シャープ（#）に続けて6桁の16進数で指定します。Webデザインで最も広く使われている方法です。

rgb(255, 0, 0)のように、赤・緑・青の強度を0～255の数値で指定します。透明度を加えたい場合はrgba(255, 0, 0, 0.5)のようにアルファ値を追加できます。

colorプロパティを使えば、CSSで簡単にテキストの色を変更できます。まずは色キーワードで試し、慣れてきたらHEXやRGBでの細かい色調整にも挑戦してみてください。

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(画像のパス);使用例以下のコードでは、最初のリスト項目