文字色や背景色を指定する（color・background-color）

CSS
HTML/CSS

この記事にはプロモーションが含まれています。

投稿：2021・06・16

更新：2022・10・03

今回は、widthの指定や、marginの指定と並んで、Web制作初心者が最初に覚えたいCSS調整である、「色の調整方法」をご紹介します。

CSSでは様々な対象にカラーを指定することが可能ですが、その中でも最も使用頻度が高い「テキスト」と「背景」に対する色の指定に絞って解説していきます。

色はWebサイト全体のイメージを決定づける他、コンテンツの見やすさや、文字の読みやすさに多大な影響を及ぼします。
そのため色の調整方法を知るだけでは不十分で、色の組み合わせ方や、色が持つイメージ（色の心理学）などの知識が必要になるのですが…CSSや他のプログラミングを勉強しながら、そこまではなかなか手が回らないですよね。

なので、この記事では難しいことや細かいことは省きつつ、重要なポイントを説明していきます！

▼色を指定する
テキストと背景に色をつける
見やすい色の組み合わせとは

▼動画解説は下のサムネイルから（YouTubeに飛びます）

colorプロパティの値

色を指定するCSSプロパティはcolorプロパティ以外にもたくさんあるのですが、こういった色に関する指定の値は共通しています。
代表的なものとして、次のような値を指定することができます。

１）キーワード値（redなど色の英単語）
２）RGB（A）
３）カラーコード

他にもありますが、上記の３つさえ扱うことができればWeb制作を請け負う上で特に問題となることはほぼありません。

この記事では色彩に関する細かい専門知識はできるだけ省きますが、CSSで色を調整する上で最低限の知識は必要です。

そこで、「デザインを専門にしなくても、Web制作に関わるなら少なくともこれぐらいは知っておきたい」というポイントをまとめておきます。

＊カラーの値について＊

値	ポイント
キーワード値	redやblueなどの英単語名詞での指定。コード表などがなくても色の指定が素早く指定できる一方、細かい色味の調整ができない
RGB（A）	赤（R）・緑（G）・青（B）・透明度（A）の組み合わせによって、細かく、透けた色の指定が可能。細かい数値の指定が必要なので手間がかかる
カラーコード	Webサイトで使われる色のコード（例：#000000＝黒）で指定する方法。カラーコード表とセットで使用することでイメージ通りの色を指定しやすいが、コードは無数にあるのでやはり手間は必要

…と、このような感じです。

個人的な使い分け方としては、テキストに下線をつけたり、テキストを赤字で強調する程度であれば、キーワード値でサクッと指定することが多いです。

一方、そういったサイトのイメージにほとんど影響しない記事執筆用のカラーではなく、背景色などサイトのイメージに関わるカラーはRGBAなど細かい指定が可能な方法で指定しています。

キーワード値は指定が楽な反面、色味を細かく調整できません。
反対に、RGBAやカラーコードによる指定は手間がかかりますが細かく色を調整することが可能です。

それぞれメリット・デメリットがあるので、状況に応じて使い分けるのが良いと思います。

POINT!

・色の指定方法はキーワード値、RGBA、カラーコードなど複数ある！
・キーワード値は指定が楽だが細かい調整が不可、その他は細かい調整は可能だが手間がかかるなど、一長一短あり！
・状況に応じて指定方法を使い分けよう！

知っておきたい色のキーワード値

色の指定を行う際、一番早くて楽なのはやはりキーワード値を使った指定方法です。

カラーコード表と睨めっこしながら、「この色とこの色ってどう違うんだろう…？」なんて頭を悩ませていると、色の指定だけでもかなりの時間がかかってしまいます。
なので、まずは「よく使うキーワード値でイメージに近い色はなかったかな？」というところから調整をスタートさせると、スムーズにいくことも多いです。

しかし、キーワード値もその存在を知らなければ指定のしようがありません。そこで、よく使う（知っておくと便利な）色のキーワード値をまとめてみました。

たくさんありますが、忘れては思い出してを繰り返しても全然良いので、少しずつ覚えていくと便利ですよ！

＊色のキーワード値について＊

キーワード	色
red	■
blue	■
yellow	■
black	■
green	■
white	■
grey	■
orange	■
darkblue	■
darkred	■
darkgreen	■
pink	■
lightblue	■
lightyellow	■
lightgreen	■
transparent	■※透明色

まだまだたくさんあるのですが、とりあえず上の表に出てきたものは最優先で覚えておきたいカラーです。

覚え方ですが、基本的に色の名前の前に「dark」をつけると暗い色になり、「light」をつけると明るく淡い色になります。

表では紹介しきれませんでしたが、暗いオレンジ色の「darkorange」や、明るいグレーの「lightgrey」というキーワード値もあります。

コード表は英数字の羅列なので、正直覚えていられません（笑）。が、キーワード値は「その色を表す英単語」なので頭に入りやすく、何度か指定しているうちに勝手に覚えられます。

Web制作の技術だけでなく、スピードや効率性も高めていきたい場合、色の指定にそこまで拘（こだわ）らなくて良いようなポイントでは、キーワード値でサクッと指定すると効率をアップできます。

POINT!

・色の指定で最も早くて楽なのは、やはりキーワード値による指定！
・代表的でよく使われる色のキーワード値だけでも知っておくと便利！
・色の細かい指定が必要ないポイントでは、キーワード値の指定で効率性を高めよう！

テキストと背景に色をつける

colorプロパティの値について基礎知識を得たところで、次はいよいよテキストと背景にカラーを設定していきます。

･･･の前に1つだけ注意点です。

普通、CSSを適用させたい要素をセレクタとして指定しますが、テキストや背景の色の指定に関しては、親要素に指定したものが、子要素の色の指定として有効であるという点です。

通常、親要素と子要素でテキスト・背景の基本カラーを変えたいということはありません。（アクセントとして一部分だけ色を変えるということはありますが）

ということで、colorプロパティ・background-colorプロパティは、適用させたいpタグなどの要素そのものに設定しても良いのですが、divタグやarticleタグなど、pタグの親要素となるタグに設定してもOKです。

親要素に指定するメリットとしては、pタグはもちろん、h1～h6の見出しタグ、smallタグなど、HTMLのタグが変わっても同じカラーで統一できます。

一方、個別に指定するメリットとしては、他の要素に影響を及ぼさずにピンポイントで指定できることです。

さて、注意点の説明も終わったのでテキストと背景に色をつけていきましょう。
テキストの色の指定はcolorプロパティ、背景色の指定にはbackground-colorプロパティを使います。

＊色の指定の記述例＊
div {
color: red;
background-color: rgb(246, 198, 227) ;
}

上記の例では、div要素に対しテキストカラーをキーワード値のred（赤）で指定し、背景色をRGBで指定しています。
サンプルコードと表示結果は以下の通りです。

HTML

<div class="sample_color">
	<p>サンプルテキスト</p>
</div>

CSS

.sample_color {
	width: 200px;
	height: 100px;
	color: red;
	background-color: rgb(246, 198, 227);
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 1rem auto;
}

サンプルテキスト

このように、CSSの設定自体はとても簡単です。

難しいのはやはり、サイトのイメージに合った色選びと、見やすくするためのカラーバランス調整です。
そこで次章のでは、見やすいカラー指定のポイントを解説していきます！

POINT!

・テキストの色はcolorプロパティ、背景色はbackground-colorプロパティで指定する！
・テキストは親要素に指定してもOK（値が子要素に継承される）！

見やすい色の組み合わせ

当然ですが、白地に白色のテキストだと文字が見えませんし、黒地に暗い青色の文字でも見づらくなることはイメージできるかと思います。

とにかく押さえておきたいポイントは、明るい色同士・暗い色同士の組み合わせは見づらくなる…ということです。

オシャレでカワイイんだけど文字が見づらいな～っていうブログをたまに見かけますが、クリーム色の背景色にピンク色のテキストとか、見づらい原因がカラーの組み合わせであることもしばしばあります。

独特な色使いでデザイン性を求めるにしても、読ませたいセクションのテキストは、ある程度高い可読性を確保しておく必要があります。
可読性はフォントの種類、大きさ、太さなどにも大きく左右されますが、ここでは色に注目してみましょう。

一般的に、背景色とテキスト色の明度差が大きいほど見やすくなると言えます。

具体的には以下のような組み合わせでは、テキストの可読性を保つことができます。

明るいグレーの下地に黒のテキスト

明るいブルーの下地に暗いブルーのテキスト

淡いクリーム色の下地に暗めのブラウンのテキスト

暗いレッドの下地に白のテキスト

暗いグリーンの下地に淡いイエローのテキスト

暗いパープルの下地に明るいブルーのテキスト

このように、テキストの色と背景色のどちらかを明るくし、もう一方を暗くすれば、少なくとも色のせいでテキストが読みづらいとはなりません。

参考用に、テキストと背景の色を自由に変更できる機能を用意しておいたので、色々な色の組み合わせを試してみて下さいね！

下のカラーボックスをクリックして背景色と文字色を選んでください

背景色を選ぶ

文字色を選ぶ

POINT!

・テキストの色はcolorプロパティ、背景色はbackground-colorプロパティで指定する！
・テキストは親要素に指定してもOK（値が子要素に継承される）！

– 関連記事 –

ワンポイントチェック

テキストや背景の他にも、色を指定することができるCSSプロパティがあります。中でもよく使うCSSプロパティを列挙しておきます。

プロパティ	効果
border-color	境界線の色
outline-color	輪郭線の色
box-shadow	影の色（複数指定の値の１つ）
text-shadow	テキストの影の色（複数指定の値の１つ）
text-decoration-color	テキストを装飾するラインの色

また、background-image: linear-gradient で背景を単色ではなくグラデーションの指定にする際にも、色を指定します。

outline-colorプロパティは普段はそこまで出番はないのですが、inputやtextareaなどのタグで要素がフォーカス（:focus）された時の枠の色を変更したい場合に使います。（参考までに下にサンプルを置いておきます）

このように色を指定する機会は多いので、テキストエディタにカラーの指定サポート機能があればそれを使うのが一番良いです。（デフォルトでついていなくても、プラグインの追加で対応できる場合もあります）

今回の動画で紹介したコード！

今回の解説動画で使用したコードです。学習用としてご自由にコピペしてお使い下さい。（※スクロールできます）

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
        <style>
        .samplecolorbox {
          font-family:"游ゴシック体 Medium","游ゴシック体","游ゴシック Medium","Yu Gothic","YuGothic",sans-serif;
          width: 70vw;
          background-color: #edcaca;
          color: black;
          margin: 1.5rem auto;
          display: flex;
          justify-content: center;
          box-shadow: 2px 2px 2px darkgrey;
          border-radius: 5px;
        }
        .samplecolorbox p {
          padding: 3rem;
          font-size: 2rem;
          line-height: 1.4;
        }
        .samplecolorchoicearea {
          display: flex;
          justify-content: center;
          font-size: 0.85rem;
        }
        .samplecolorchoicebox {
          font-family:"游ゴシック体 Medium","游ゴシック体","游ゴシック Medium","Yu Gothic","YuGothic",sans-serif;
          text-align: center;
          margin: 1rem;
        }
        .samplecolorchoicebox p {
          margin: 1.5rem;
        }
        input[type="color"] {
          -webkit-appearance: none;
          width: 60px;
          height: 40px;
          padding: 5px;
          cursor: pointer;
          background-color: white;
          border: none;
          border-radius: 5px;
          box-shadow: 0px 0px 8px darkgrey;
          color: white;
        }
        input[type="color"]:active {
          transform: translate(3px,3px);
        }
        .parts-color-change {
          display: flex;
          justify-content: center;
          height: 500px;
          align-items: center;
        }
        .colortable {
          width: fit-content;
          margin: 2rem auto;
          background-color: black;
        }
        .colortable td {
          padding: 10px;
          background-color: white;
        }
        .transparent {
          width: fit-content;
          margin: 0 auto;
        }
        .transparent h1 {
          font-size: 5rem;
          display: flex;
          justify-content: center;
          align-items: center;
          color: transparent;
          background-image: url(https://web-de-asobo.net/wp-content/uploads/2021/06/IMG_1078.jpg);
          background-color: pink ;
          width: max-content;
          height: 500px;
          background-size: 100px;
          background-position: center;
          background-clip: text;
          -webkit-background-clip: text;
        }
        </style>
  </head>
  <body>
    <div style="height:200px;"></div>
    <div class="samplecolorbox">
      <p>下のカラーボックスをクリックして背景色と文字色を選んでください</p>
    </div>
    <div class="samplecolorchoicearea">
      <div class="samplecolorchoicebox">
        <p>背景色を選ぶ</p>
        <input id="samplecolor" type="color" name="" value="#edcaca">
      </div>
      <div class="samplecolorchoicebox">
        <p>文字色を選ぶ</p>
        <input id="samplefontcolor" type="color" name="" value="">
      </div>
    </div>

    <div class="parts-color-change">
      <p>文字の<span style="color:red">一部だけ色を変える</span>にはspanタグなどで該当部分を挟んでCSSで調整します。</p>
    </div>

    <table class="colortable">
      <tbody>
        <tr>
        <td style="width:50%">キーワード</td><td>色</td>
        </tr>
        <tr>
        <td>red</td><td style="color:red;">■</td>
        </tr>
        <tr>
        <td>blue</td><td style="color:blue">■</td>
        </tr>
        <tr>
        <td>yellow</td><td style="color:yellow">■</td>
        </tr>
        <tr>
        <td>black</td><td style="color:black">■</td>
        </tr>
        <tr>
        <td>green</td><td style="color:green">■</td>
        </tr>
        <tr>
        <td>white</td><td style="color:white; background-color:darkgrey;">■</td>
        </tr>
        <tr>
        <td>grey</td><td style="color:grey">■</td>
        </tr>
        <tr>
        <td>orange</td><td style="color:orange">■</td>
        </tr>
        <tr>
        <td>darkblue</td><td style="color:darkblue">■</td>
        </tr>
        <tr>
        <td>darkred</td><td style="color:darkred">■</td>
        </tr>
        <tr>
        <td>darkgreen</td><td style="color: darkgreen">■</td>
        </tr>
        <tr>
        <td>pink</td><td style="color:pink">■</td>
        </tr>
        <tr>
        <td>lightblue</td><td style="color:lightblue">■</td>
        </tr>
        <tr>
        <td>lightyellow</td><td style="color: lightyellow; background-color:darkgrey;">■</td>
        </tr>
        <tr>
        <td>lightgreen</td><td style="color: lightgreen">■</td>
        </tr>
        <tr>
        <td>transparent</td><td style="color: transparent">■<span style="color:black;"">※透明色</span></td>
        </tr>
      </tbody>
    </table>

    <div style="height:200px;"></div>

    <div class="transparent">
      <h1>透明にした文字の背景に画像を設定して<br>テキストで切り抜きすると･･･？</h1>
    </div>

    <div style="height:200px;"></div>

    <script type="text/javascript">
      {
        const choicecolor = document.getElementById('samplecolor');
        const fontchoicecolor = document.getElementById('samplefontcolor')
        const changecolorbox = document.querySelector('.samplecolorbox');
        choicecolor.addEventListener('change',function(evevt) {
          let colorvalue = event.currentTarget.value;
          changecolorbox.style.backgroundColor = colorvalue;
        });
        fontchoicecolor.addEventListener('change',function(evevt) {
          let fontcolorvalue = event.currentTarget.value;
          changecolorbox.style.color = fontcolorvalue;
        });
      }
    </script>
  </body>
</html>

記事のトップへ戻る