バナー画像

HTMLでWebサイトを作成する際、デザインが単調だとユーザーがページから離脱してしまう確率が高まる傾向にあります。

本記事では、Webサイトデザインの基本でもある文字や背景色のカラー変更の方法について解説していきます。

HTMLで文字のcolorを変更しよう


まずはHTMLで文字のcolorを変更する方法についてご紹介していきたいと思います。

「CSSのcolorプロパティ」を利用する方法と「fontタグのcolor属性」を利用する方法が一般的に利用されています。

CSSのcolorプロパティで変更する

HTML5で推奨されているCSSのcolorプロパティを使用して文字の色を変更してみたいと思います。

サンプルではHTMLにdivタグを使用していますが、他の様々な要素に対してcolorプロパティを利用することが可能です。

index.html

<!DOCTYPE html>
<html lang="jp">
<head>
  <meta charset="UTF-8">
  <title>Color Sample</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="color-css">あいうえお</div>
</body>
</html>

style.css

.color-css {
  color: red;
}

実行した結果が下記の通りとなります。

文字列の一部だけ色を変更する方法

文字列の一部だけ色を変更する場合、spanタグをうまく利用して変更する方法が一般的です。

index.html

<!DOCTYPE html>
<html lang="jp">
<head>
  <meta charset="UTF-8">
  <title>Color Sample</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div>文字列の<span class="color-css">一部だけ</span>色を変更しています。</div>
</body>
</html>

style.css

.color-css {
  color: red;
}

実行した結果は下記の通りです。

fontタグのcolor属性を利用する

HTMLの文字色を変更する場合、fontタグを使って文字を表示しているのであれば、color属性を利用する方法が一般的です。

ポテパンダの一言メモ

HTML5ではfontタグを廃止しています。
利用自体は出来るため既存コードに対応するための知識として紹介していますが、新規プログラム作成時に利用するのは避けましょう。

サンプルコードで確認してみましょう

index.html

<!DOCTYPE html>
<html lang="jp">
<head>
  <meta charset="UTF-8">
  <title>Color Sample</title>
</head>
<body>
  <font color="red">fontタグの色を変更</font>
</body>
</html>

実行した結果が下記の通りです。

HTMLで背景色のcolorを変更しよう


次にHTMLで背景色のcolor変更をご紹介していきたいと思います。

テキストの色変更と同様、利用することも多いため覚えておきましょう。

bodyタグに背景色を設定しよう

まず画面全体のテーマとなる色を決定する際、bodyタグの背景色を設定します。

「bgcolor」属性に任意の色を指定することで、背景色を変更することが可能です。

index.html

<!DOCTYPE html>
<html lang="jp">
<head>
  <meta charset="UTF-8">
  <title>Color Sample</title>
</head>
<body bgcolor="yellow">
  <div>bodyタグの背景色変更</div>
</body>
</html>

実行した結果が下記の通りです。

divタグやpタグに背景色を設定する方法

HTMLではbodyタグの背景色だけでなく様々な要素の背景色を変更することが可能です。

CSSのプロパティで「background-color」を利用します。

ポテパンダの一言メモ

サンプルでは背景色が変更されていることを判断しやすいようにwidth:100%を指定しています。

index.html

<!DOCTYPE html>
<html lang="jp">
<head>
  <meta charset="UTF-8">
  <title>Color Sample</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="div-css">divタグのテキストです。</div>
<p class="p-css">pタグのテキストです。</p>
</body>
</html>

style.css

.div-css {
  background-color: yellow;
  width: 100%;
}

.p-css {
  background-color: grey;
  width: 100%;
}

実行した結果が下記の通りです。

HTMLで指定出来るcolorタイプ


HTML要素に対する色の指定方法を各種ご紹介してきましたが、colorプロパティに指定する方法がいくつかあるため最後に説明しておきたいと思います。

頻繁に利用されるのは「カラーネーム」「カラーコード」「RGB」の3種類です。

本記事でご紹介したサンプルコードを組み換えて動作を確認してみてください。

カラーネーム

カラーネームは今回ご紹介したサンプルコードでも利用していた「red」「yellow」「grey」などの英単語の色名を直接指定する方法です。

最も手軽で分かりやすい方法ですが、後述する2つに比べると細かい色の調整が出来ないというデメリットもあります。

カラーコード

カラーコードはWebサイト上で表現される色を指定するためのコードで、「#」から始まる6桁の16進数で定義されます。

代表例としては、赤を表す場合「#FF0000」、黄色を表す場合「#FFFF00」のように指定することが可能です。

RGB

RGBでは、光の3原色である「赤」「緑」「青」の数値を「0~225」までの値を定義することで色を指定する方法です。

「RGB(赤の数値, 緑の数値, 青の数値)」のように指定します。

具体的なサンプルとしては、白色を作りたい場合には「RGB(255, 255, 255)」と指定、黒色を作りたい場合には「RGB(0, 0, 0)」のように指定することでWebサイト上に任意の色を表示することが可能となります。

さいごに:HTMLでcolorを使いこなし読みやすいサイトデザインを意識しよう


本記事では、HTML要素に対し色(color)を変更する様々な方法についてご紹介してきました。

Webサイト作成において、デザインは非常に重要な役割を担っており、プログラマー自身がデザインしない場合でもコーティングするためにcolorの使い方は覚えておかなければならない必須知識の1つです。

今回ご紹介したサンプルコードの設定を自分自身で変更して、HTMLにおけるcolorの設定方法をしっかりと把握してみてください。

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか?

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。