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

CSSで文字色を指定する方法：colorプロパティと背景色の使い方ガイド

CSSのcolorプロパティを使うと、テキスト要素に色を指定できます。色の指定には、CSSに組み込まれたカラーキーワード、16進数（HEX）値、その他のカラーバリューが利用可能です。構文は次のとおりです。color: 値;

CSSでフォントカラーを設定する方法

Webサイト上のテキストの色や背景色を設定することは、Webデザインにおいて欠かせない作業です。

そこで活躍するのが、CSSのcolorプロパティとbackground-colorプロパティです。colorプロパティはHTMLテキストの色を指定し、background-colorプロパティはテキストの背景色を定義します。

このチュートリアルでは、具体例を挙げながらCSSでテキストの色を設定する方法を解説し、その後、テキスト要素の背景色の設定方法についても紹介します。

CSSフォントカラーとは

CSSのフォントカラーは、colorプロパティを使って設定します。このプロパティは要素の背景ではなく、テキスト自体の色を指定するものです。CSSのカラーキーワードや、16進数文字列などのカラーバリューを使用できます。

colorプロパティの構文は次のとおりです。

p {
  color: red;
}

このルールにより、HTMLドキュメント内のすべての<p>タグのテキストが赤色になります。

ここではCSSのカラーキーワードを使用しました。「red」や「paleblue」のような標準的な色を参照したい場合、キーワードはとても便利です。しかし、キーワードだけではスペクトラム上のすべての色を表現できるわけではありません。特定の色を使いたい場合は、別の種類の色指定方法を検討するとよいでしょう。

colorプロパティには、以下のいずれかの値を指定できます。

値説明記述例
カラー名色の名前blue、hotpink
HEXカラー16進数による色指定。識別子は6桁。#f7f7f7、#0000ff
RGBカラーRGBは赤（Red）、緑（Green）、青（Blue）の略。rgb(0, 50, 28)、rgb(0, 0, 255)
HSLカラーHSLは色相（Hue）、彩度（Saturation）、輝度（Lightness）の略。hsl(0, 50%, 50%)、hsl(180, 50%, 25%)

デフォルトでは、Webページのテキストカラーは<body>タグに適用されている色になります。特に指定しない限り、黒色が使用されます。

また、colorプロパティを使えば、スタイルシート内でリンクの色を定義することもできます。

それでは、colorプロパティの動作を理解するために、実際の例を見ていきましょう。

文字色を変更するCSS：実例

ここでは、地元の食料品店「Peterson and Sons」のWebサイトをデザインしていると仮定します。オーナーは、サイト上の特定のテキストブロックをグレーのフォントで表示したいと考えています。これを実現するコードは次のとおりです。

<html>

<p>Peterson and Sonsは1927年にLouis Petersonによって創業されました。Louisは、地元の街に新鮮な食材を届けるという夢を持ったシアトルの住人でした。Peterson and Sonsでは、おいしいデリミートや職人技が光るチーズなど、主に新鮮な食品や食料品を販売しています。

今日、Peterson and Sonsはシアトルエリアで5店舗を展開しています。</p>

<style>

p {
	color: gray;
}

HTMLの<p>タグでPeterson and Sonsの食料品店について説明する段落を定義し、続いてCSSコードで、すべての<p>タグのテキストカラーをグレーに設定するスタイルを作成しました。色の指定には、カラー名の値「gray」を使用しています。

RGBカラーバリューで指定したい場合は、「gray」の代わりに「rgb(128, 128, 128)」と記述することもできます。同様に、16進数値やHSL値を使ってグレーを指定することも可能です。

なお、この例では外部のCSSファイルを使用していません。CSSスタイルは、HTMLドキュメント内の<style>タグで囲んで記述しています。

CSSテキスト背景色

CSSのbackground-colorプロパティは、要素の背景色を設定します。このプロパティにも、前述のカラーバリュー（カラー名、HEX、RGB、HSL）のいずれかを指定でき、テキストの背景色を設定することができます。

background-colorプロパティの構文は次のとおりです。

p {
	background-color: blue;
}

このコードは、ページ上のすべての<p>タグに青い背景色を設定します。

CSSテキスト背景色の実例

次に、先ほどの例の段落内にある一文に、オレンジ色の背景を追加してみましょう。

ハイライトしたいのは「Today, Peterson and Sons operates five stores across the Seattle area.」という一文です。そして前述の例と同様に、段落全体のテキストはグレーで表示します。以下のコードで実現できます。

<html>

<p>Peterson and Sonsは1927年にLouis Petersonによって創業されました。Louisは、地元の街に新鮮な食材を届けるという夢を持ったシアトルの住人でした。Peterson and Sonsでは、おいしいデリミートや職人技が光るチーズなど、主に新鮮な食品や食料品を販売しています。

<span>今日、Peterson and Sonsはシアトルエリアで5店舗を展開しています。</span></p>

<style>

p {
	color: gray;
}

span {
	background-color: orange;
}

HTMLファイルでは、テキストを<p>タグで囲んで段落を定義し、さらに最後の一文をHTMLの<span>タグで囲みました。これにより、コード内のその特定の文にのみスタイルを適用できるようになります。

CSSコードでは、2つのルールを指定しました。1つ目のルールは<p>タグ内のすべてのテキストの色をグレーに設定し、2つ目のルールは<span>タグ内のすべてのテキストの背景色をオレンジに設定しています。

ご覧のとおり、<span>タグで囲まれた最後の一文には、オレンジ色の背景が適用されています。これは、2番目に書いたスタイルルールによる結果です。

まとめ

CSSのcolorプロパティを使えば、Webページ上のテキストの色を設定できます。また、background-colorプロパティを使えば、テキストの背景色を設定できます。

このチュートリアルでは、具体例とともにこれらのタスクの実現方法を解説しました。これで、プロのWebデザイナーのようにフォントの色やテキストの背景色を自由に変更できるようになったはずです！

HTMLについてさらに学びたい方は、ぜひHTML学習ガイドをご覧ください。専門家による学習のコツや、おすすめのコーディング学習リソースをご紹介しています。

  1. CSSのfont-sizeプロパティとは？フォントサイズの指定方法を実例付きで解説

    CSSのfont-sizeプロパティは、テキストのフォントサイズ（文字の大きさ）を設定するために使用されるプロパティです。値はパーセンテージ（%）や、px（ピクセル）、cm、pt（ポイント）、emなどの単位、さらには絶対的なキーワードによって指定できます。特に相対的な値を使用することで、ユーザーがブラウザの設定を変更しても文字サイズが追従し、アクセシビリティを最大限に高めることができます。なお、フォントサイズのデフォルト値は16px（または12pt）です。構文CSSのfont-sizeプロパティの基本構文は以下の通りです。セレクタ { font-size: /*値*/ }font-si

  2. CSSでフォールバックカラー（代替色）を宣言する方法

    フォールバックカラー（代替色）とは、ブラウザがRGBAカラーフォーマットに対応していない場合に表示される色を指します。RGBAに対応していない代表的なブラウザとしては、Opera 9以前やInternet Explorer 8以前などが挙げられます。 フォールバックカラーの仕組み RGBAカラーを指定する前に、あらかじめ単一色（ソリッドカラー）を宣言しておくのがポイントです。CSSでは同一プロパティへの後続の宣言が優先されるため、モダンブラウザではRGBAカラーが適用されます。一方、RGBA非対応のブラウザではその宣言が無効として無視され、直前に指定された単一色が自動的に使われます。 サンプ