CSSを使った文字色・背景色の付け方

はじめに

今回はCSSで色付けする方法についてご紹介します。

HTMLカラーとは何なのか、テキスト色、背景色、ボックス色、背景の一部に色を付ける方法、枠線、下線などなど徹底解説していきます。

そもそもHTMLカラーとは何なのか？から知りたい方は最初から、実際に色をつける方法をお探しの方は目次から必要箇所だけチェックしてみてください。

スポンサードサーチ

HTMLの色について

HTMLの色はRGBカラーで指定します。

RGBのRはRed（赤色）、GはGreen（緑色）、BはBlue（青色）を表し、それらを混ぜ合わせることでディスプレイ上で色を表現しています。

Red、Green、Blueの各色の配合割合を「#」の記号と6桁の英字や数字を用いた16進数で指定します。HTMLカラーコードの６桁は赤（Red）、緑（Green）、青（Blue）で２桁ずつ割り振られています。

例えば、赤（#ff0000）、緑（#008000）、青（#0000ff）といった具合に表現します。

ウェブセーフカラー（Web Safe Color）

ほとんどのブラウザではフルカラー（16,777,216色）が使用可能となっていますが、古いブラウザやOSの違いによる色の相違が発生する可能性があります。ウェブセーフカラーは、ブラウザやOSによる見え方の差異が発生しない216色です。

スポンサードサーチ

HTMLカラー（html color）

HTMLでの色はカラーコード、rgb値、色名の三つの方法で指定できます。

HTMLカラーコード（html color code）

HTMLカラーコードはRGBカラーを16進数で指定します。

例えば、白（#ffffff）、黒（#000000）、赤（#ff0000）、黄（#ffff00）、緑（#008000）、水色（#00ffff）、青（#0000ff）、紫（#800080）といった具合です。

また、黒色（#000000）を段階的に色を変化させていくと次のようになります。

HTMLカラーコードの短縮指定

HTMLカラーコードの６桁は赤（Red）、緑（Green）、青（Blue）で２桁ずつ割り振られており、各色のカラー値が同じ場合に該当色の２桁を１桁で指定することができます。

RGB値

RGB値は光の三原色である赤（R）、緑（G）、青（B）の組合せで色を表現する数値です。各色0～255までの256段階で表記します。RGB値の記述方法は「rgb（redの値,greenの値,blueの値）」のように指定します。

• 黒：rgb(0,0,0)
• 白：rgb(255,255,255)
• 赤：rgb(255,0,0)
• 緑：rgb(0,128,0)
• 青：rgb(0,0,255)

RGBA値

RGBA値はRGB値に不透明度を指定できる色の決め方です。aはα値（アルファち）と呼ばれる「不透明度」を表す値です。0（0％表示）〜１（100％表示）の間で指定します。rgba(r値,g値,b値,不透明度)と指定できます。

例えば赤色の半透明色をつけたい場合はrgba(255, 0, 0, 0.5)となります。透明色はrgba値にてaの値を0とすることで指定できます。例えばrgba(0,0,0,0)のように指定します。

色名（カラーネーム）

色名（カラーネーム）で色を指定する方法は簡単です。その名の通り、「色名を記述する」ことで指定できます。

例えば、白（color: white）、黒（color: black）、赤（color: red）、黄（color: yellow）、緑（color: green）、水色（color: aqua）、青（color: blue）、紫（color: purple）といった具合です。

注意点としては、色名が定められていない色はカラーコード、もしくはRGB値で指定する必要があるということです。

HTMLの色見本

HTMLの色見本は「WEB色見本 原色大辞典」などのウェブサイトで調べることができます。

上記の「WEB色見本 原色大辞典」では、「原色」「和色」「洋色」「web216」「パステルカラー」「ビビッドカラー」「モノトーン」「メトロカラー」のカテゴリ別に色を探すことができるので便利です。

スポンサードサーチ

文字色の付け方

HTMLの文字色（フォントカラー）を変更したい場合はCSSのcolorプロパティを使用します。colorプロパティでHTMLカラーを指定することで色文字を作ることができます。

下記は、HTMLで赤字を指定する場合です。

文字色をつけるCSS

<p>この文章を赤字で表示します。</p>

/* カラーコードで指定 */
p {color: #ff0000}
/* RGB値で指定 */
p {color: rgb(255,0,0)}
/* 色名で指定 */
p {color: red}

太字色を変える

文字箇所の色もCSSのcolorプロパティを併用することで指定可能です。これにより、赤の太文字などを表現できます。

<p>この文章を赤太字で表示します。</p>

/* 赤太字 */
p {
    color: #ff0000;
    font-weight: bold
}

背景色の付け方

HTMLで背景色をつける方法について解説します。

背景色全体を塗りつぶす

背景全体を塗りつぶす場合はHTMLのブロック要素に対してbackground-colorプロパティを使用します。

ブロック要素を塗りつぶす

<div>このブロック要素を塗りつぶします。</div>

div {background-color: aqua;}

背景をグラデーションで塗る

背景をグラデーションで塗りつぶすには「background: linear-gradient」を使用します。

2色のグラデーション

linear-gradientの基本の使い方は、「linear-gradient(一つ目の色,二つ目の色)」とすることで２色のグラデーションができます。色数を複数していすることで多色のグラデーションが可能です。

<div class="sample2">2色のグラデーションです。</div>

.sample2 {background: linear-gradient(red,blue)}

3色のグラデーション

<div class="sample3">3色のグラデーションです。</div>

.sample3 {background: linear-gradient(red,blue,green)}

グラデーションの角度を変える

degでグラデーションの角度を決めることができます。degの初期値は0度（上から下に向かう。「to bottom」）となっています。

<div class="sample4">グラデーションの角度を変える。</div>

.sample4{linear-gradient(45deg, red, blue);}

degで角度を記述する代わりに、to top（0deg）, to bottom（180deg）, to left（270deg）, to right（90deg） と指定することもできます。

グラデーションの中間点を変える

「色1, ●%, 色2」とすることでグラデーションの中間点を決めることができます（複数設定可能）。

<div class="sample5">グラデーションの中間点を変える。</div>

/* 60%の位置を中間点としたグラデーション */
.sample5{linear-gradient(red,60%,blue);}

グラデーションの色を明確に切り替える

背景を塗りつぶしたい色と位置を「色1 開始位置（％） 終了位置（％）, 色2 開始位置（％） 終了位置（％）」のように指定することで色を明確に切り替えることができます。

<div class="sample6">グラデーションの色を明確に切り替える。</div>

/* グラデーションの色を明確に切り替える */
.sample6{background: linear-gradient(red 0% 30%, blue 30% 100%)}

背景色の一部を塗りつぶす

背景色の一部を塗りつぶすにはHTMLのインライン要素に対してbackground-colorプロパティを使用します。

インライン要素を塗りつぶす

<p>この段落の<span class="sample">インライン要素</span>を塗りつぶします。</p>

.sample {background-color: orange;}

HTMLのmarkタグ

HTMLのmarkタグを使用することで文中の<mark></mark>で囲った箇所をハイライト表示できます。markタグはデフォルトでは黄色（background-color:yellow）となっています。ハイライトの色を変えたい場合はmarkタグにbackground-colorプロパティで希望の色を指定します。

markタグ：デフォルト

<p>markタグで囲った<mark>ここの箇所をハイライト</mark>します。</p>

markタグ：背景色を指定

<p>markタグで囲った<mark>ここの箇所をハイライト</mark>します。</p>

mark {background-color: orange}

マーカーを表現

背景色の一部を塗りつぶす際は「background: linear-gradient」を使用します。1色目でマーカー色を、2色目で透明色を指定することでマーカーみたいに塗ることが可能です。また、塗る高さも%指定可能です。

マーカー表現

<div class="sample">マーカーを表現。</div>

/* 背景の下から50％に赤色をつけ、残りの部分は透明にする */
.sample{background: linear-gradient(to top, red 0% 50%, rgba(0,0,0,0) 50% 100%)}

スポンサードサーチ

枠線に色をつける

HTMLの枠色をつけるにはCSSのborder-colorプロパティを使用します。

<div class="sample">これはブロック要素です。</div>

/* 青い枠線をつける */
.sample {
  border-style: solid;
  border-width: 1px;
  border-color: blue
}

下線に色をつける

HTMLの下線箇所（border-bottom、u）に色をつけたい時のやり方を説明します。

uタグ

uタグで色を変えたいときはCSSのcolorプロパティを使用します。ただしuタグの場合、フォントと線は同じ色となるのに注意が必要です。また、線の太さも変えることができません。

<p>段落内の<u>ここは下線です。</u><p>

/* uタグの場合はフォントと下線の色が同じになる */
u {color: blue}

CSS:border-bottomの場合

下線を引きたいテキストの一部にspanタグで任意のclass名をつけてborder-bottomプロパティで指定します。この方法だと、テキスト色と線の色をわけることができ、なおかつ線の太さを変えることができます。

テキストの一部分に下線を引く

<p>段落内の<span class="sample">ここは下線です。</span><p>

.sample {
    border-bottom: solid;
    border-width: 3px;
    border-color: blue
}

マウスオーバー色

マウスオーバーした時の色を指定するには、擬似クラス（:hover）に対して色を指定してあげます。テキスト色の指定はcolorプロパティを、背景色の指定はbackground-colorプロパティを使用します。

<p>マウスをホバーすると色が変わります。<p>

/* ホバー時のテキスト色を指定する */
p:hover {color: blue}
/* ホバー時の背景色を指定する */
p:hover {background-color: yellow}

まとめ

この記事のまとめです。

• HTMLカラーはカラーコード、色名、RGB値で指定する
• テキスト色はCSSの「color」プロパティを使用する
• 背景色はCSSの「background-color」「background」プロパティを使用する
• 枠線色はCSSの「border-color」プロパティを使用する
• 下線色はuタグにはCSSの「color」、border-bottomには「border-color」プロパティを使用する
• マウスホバー時の色は擬似クラス（:hover）にCSSの「color」、「background-color」プロパティを使用する