htmlについて徹底解説!

サイトの色使いはどうすればいい?HTMLで配色を考えるための基礎知識

折乃 杏

インフラエンジニア/ヘルプデスク(COBOLも経験あり)/ボールド歴3年

Webページを見た瞬間に、そのページの印象を決めてしまう要素のひとつとして「色」があります。どんなにかわいい写真やイラストがあっても、グレー一色のページだったらかわいさも半減してしまうかもしれませんし、文字もリンクも黒一色のページだったら、わかりにくいことが容易に想像できます。

Webページのほとんどは「HTML」という言語で作成されていて、HTMLで作成されたページ内の背景、文字、表の枠線のなどは、簡単に色の指定をすることができますし、メモ帳などのテキストエディタで編集が可能です。

この記事では、色の指定方法、また色の組み合わせの考え方や探し方についてのヒントを、初心者向けに解説します。


1.HTMLでの色の表わし方、考え方

Webページ内で「色」を使うことで、その部分を目立たせたり、全体的な雰囲気作りに役立ちます。では、HTMLで「色」はどうやって表わすのでしょうか。また、ページ内で使う色は1色だけではないはずです。どんな色を組み合わせていったらいいのか、それらを考えるために、色の指定方法や色の種類について簡単に解説します。

1-1.カラーコードとカラーネーム

HTMLで色は以下の2つのどちらかで指定します。

  • カラーコード・・・RGB値で指定する
  • カラーネーム・・・「black」「white」など色の名前で指定する

RGB値とは、R(Red:赤)G(Green:緑)B(Blue:青)を混ぜることで、テレビやパソコンのディスプレイのように発光によって色を表現するための手法です。(「光の三原色」という言葉を聞いたことがある方もいらっしゃると思います)赤、緑、青をそれぞれどのくらいで配分するのかを、RRGGBBと並べて16進数で指定します。例えば、黒なら #000000、赤は#ff0000、緑は#008000、という記述になります。

カラーネームとは、RGBで表現する色のうち、Webでよく使われる140色につけられた色の名前です。黒なら black 、赤は red 、緑は green という記述で指定ができます。RGB値で理論上指定できる色の数は16,777,216色となりますが、それほど微妙な違いを再現できる環境があるかどうか・・・ということもあり、実際によく使用されるのは以下のカラーネームを持つ140色です。

標準16色(基本色)
カラーネームカラーコードカラーネームカラーコード
aqua#00ffffolive#808000
black#000000purple#800080
blue#0000ffred#ff0000
fuchsia#ff00ffnavy#000080
gray#808080silver#c0c0c0
green#008000teal#008080
lime#00ff00yellow#ffff00
maroon#800000white#ffffff
標準色以外
カラーネームカラーコードカラーネームカラーコード
aliceblue#f0f8fflightgreen#90ee90
antiquewhite#faebd7lightgrey#d3d3d3
aquamarine#7fffd4lightpink#ffb6c1
azure#f0fffflightsalmon#ffa07a
beige#f5f5dclightseagreen#20b2aa
bisque#ffe4c4lightskyblue#87cefa
blanchedalmond#ffebcdlightslategray#778899
blueviolet#8a2be2lightsteelblue#b0c4de
blueviolet#8a2be2lightyellow#ffffe0
brown#a52a2alimegreen#32cd32
burlywood#deb887linen#faf0e6
cadetblue#5f9ea0magenta#ff00ff
chartreuse#7fff00mediumaquamarine#66cdaa
chocolate#d2691emediumblue#0000cd
coral#ff7f50mediumorchid#ba55d3
cornflowerblue#6495edmediumpurple#9370db
cornsilk#fff8dcmediumseagreen#3cb371
crimson#dc143cmediumslateblue#7b68ee
cyan#00ffffmediumspringgreen#00fa9a
darkblue#00008bmediumturquoise#48d1cc
darkcyan#008b8bmediumvioletred#c71585
darkgoldenrod#b8860bmidnightblue#191970
darkgray#a9a9a9mintcream#f5fffa
darkgreen#006400mistyrose#ffe4e1
darkkhaki#bdb76bmoccasin#ffe4b5
darkmagenta#8b008bnavajowhite#ffdead
darkolivegreen#556b2foldlace#fdf5e6
darkorange#ff8c00olivedrab#6b8e23
darkorchid#9932ccorange#ffa500
darkred#8b0000orangered#ff4500
darksalmon#e9967aorchid#da70d6
darkseagreen#8fbc8fpalegoldenrod#eee8aa
darkslateblue#483d8bpalegreen#98fb98
darkslategray#2f4f4fpaleturquoise#afeeee
darkturquoise#00ced1palevioletred#db7093
darkviolet#9400d3papayawhip#ffefd5
deeppink#ff1493peachpuff#ffdab9
deepskyblue#00bfffperu#cd853f
dimgray#696969pink#ffc0cb
dodgerblue#1e90ffplum#dda0dd
firebrick#b22222powderblue#b0e0e6
floralwhite#fffaf0rosybrown#bc8f8f
forestgreen#228b22royalblue#4169e1
gainsboro#dcdcdcsaddlebrown#8b4513
ghostwhite#f8f8ffsalmon#fa8072
gold#ffd700sandybrown#f4a460
goldenrod#daa520seagreen#2e8b57
greenyellow#adff2fseashell#fff5ee
honeydew#f0fff0sienna#a0522d
hotpink#ff69b4skyblue#87ceeb
indianred#cd5c5cslateblue#6a5acd
indigo#4b0082slategray#708090
ivory#fffff0snow#fffafa
khaki#f0e68cspringgreen#00ff7f
lavender#e6e6fasteelblue#4682b4
lavenderblush#fff0f5tan#d2b48c
lawngreen#7cfc00thistle#d8bfd8
lemonchiffon#fffacdtomato#ff6347
lightblue#add8e6turquoise#40e0d0
lightcoral#f08080violet#ee82ee
lightcyan#e0ffffwheat#f5deb3
lightgoldenrodyellow#fafad2whitesmoke#f5f5f5
yellowgreen#9acd32

以下の7色はカラーネームを持っていますが、ブラウザによっては正しく表示されない場合があります。

対応していないブラウザあり
カラーネームカラーコードカラーネームカラーコード
brass#b5a642coolcopper#d98719
copper#bf00dfcornflower#bfefdf
darkbrown#da0b00feldsper#fed0e0
richblue#0cb0e0

1-2.色相環

色は「赤」「緑」「青」の混ぜ具合で表わす、ということを説明しましたが、これの割合をわかりやすく円状に表わしたものを「色相環」といいます。(fig1fig2参照)

この図の何が便利なのかといいますと、対角線上にある色、隣同士にある色を見ることで、どんな配色にしたらいいのか考える際に役立ちます。

1-3.補色

色相環上で、お向かいの位置の色を「補色」といいます。「補色」は「反対色」とも呼ばれ、反対のイメージを持っているので、お互いに引き立てあう色の組み合わせになります。

補色の図 

fig1:補色

1-4.類似色

各色の両隣の色を「類似色」といい、まさに「似たような色」です。グラデーションを作る際に適しています。違和感がない配色になりますが、反面、目立たない、という欠点もあります。

類似色の図

fig2:類似色


2.HTMLタグで文字色を指定する方法

それでは、実際にタグを使った色の指定方法を見てみましょう。色を指定できるタグで、よく使用されているものをご紹介します。

・文字の色を指定する

<font>タグのcolor属性で指定します。カラーの指定は属性値にredなどのカラー名、もしくは#ff0000のようにRGB値で指定します。

<font>タグは他の属性とも組み合わせも可能です。他の属性も同時に指定する場合は以下のように指定します。

属性を指定する順番に指定はありませんが、二つの属性の間には必ず半角スペースを入れましょう。

・ページ全体の文字の色を指定する

<body>タグにtext属性をつけることで、1ページ全体のテキストのカラーを指定することが出来ます。

・背景色を指定する

背景の色は使用するブラウザの初期設定によりますが、HTML <body>タグの中のbgcolor属性で背景色を変えることが出来ます。以下に記述例を記載します。

【例】

 

【ブラウザでの表示例】

ブラウザでの表示例


3.CSS(Cascading Style Sheets)を使おう

Webページで色を指定する方法は上記のようにcolor属性やbgcolor属性で記述する方法のほかに、「スタイルシート」として、CSSファイルに記述する方法があります。

現在、文字の色などのデザイン要素はHTML文書内の構造要素としてではなく、スタイルシートとして記述することが推奨されています。HTMLのバージョンによっては廃止されているタグや属性がありますので、フォントサイズ、色、フォントの種類、ページの背景色など、デザイン要素に関わるものはスタイルシート機能を使用するようにしましょう。

廃止されたタグを使用すると、今はブラウザで全く表示されないわけではありませんが、今後は正しく表示されない可能性があります。また、ページ数が多いサイトや全体的にレイアウトを統一させておきたい場合など、色指定が変わるたびに全て見直していたのでは手間がかかります。共通する部分のデザインを一つのCSSファイルで管理しておけば、変更する場合も一つのCSSファイルの設定を変更するだけでWebページ全体のデザインを変更することができます。

色指定の方法として、カラーコードやカラーネームを使用できることに変わりはありません。

CSSの利用方法は、以下の3通りあります。

  • HTMLファイルとは別にCSSファイルを作成して、HTMLで指定する
  • HTMLファイル内でStyleタグで指定する
  • HTML内に記述する

HTMLファイル内でStyleタグで指定した場合は、以下のような記述になります。

【例】

 

【ブラウザでの表示例】ブラウザでの表示例

【参考】HTML5で廃止されたタグ

過去に作成されたサイトには以下に紹介するタグが使われているものが多く存在します。今後、新しくサイトを作成する、または過去のサイトを修正する時には「デザイン要素に関わるものはスタイルシート機能を使用する」と、覚えておいてください。

  • acronym [頭字語]
  • applet [Javaアプレットの埋め込み]
  • basefont [ページの基準フォントサイズ]
  • big [フォントを大きく表示]
  • center [要素の左右中央揃え]
  • dir [ディレクトリ型リスト]
  • font [フォント装飾(色・サイズ・種類)]
  • frame [フレームの定義]
  • frameset [フレーム(frame要素)の構成]
  • isindex [キーワード検索入力欄の埋め込み]
  • noframes [フレーム未対応ユーザー向けの代替テキスト]
  • s [テキストに取消線を引く]
  • strike [テキストに取消線を引く]
  • tt [テキストを等幅フォントにする]
  • u [テキストに下線を引く]

4.サイト内の配色や使用している色を調べるときに便利なサイトとおすすめ書籍

タグの書き方はわかっても、いざ指定するとなると色の組み合わせに迷いますが、そんなときに参考になるサイトと書籍をご紹介します。

【お勧めサイト】

ウェブサイトにおけるよい色とは?

https://www.webcolordesign.net/color_aim/make_webcolor.html

「よい色とはウェブサイトの目的を達成させる色のこと」

色は指定すれば何色でも表示されますが、こちらのサイトで「配色の考え方」も是非学んでおきましょう。

サルワカ 配色パターン見本40

https://saruwakakun.com/design/gallery/palette

パターン別に実際に組み合わせた例と、使用している色コードも確認できます。

Web色見本

https://www.colordic.org/

テーマ別カラーや、あの電車の色もわかります。

Googleカラーピッカー

Googleで「カラーピッカー」と検索)

色のコードが知りたいときや、コードから色を確認したいときにおすすめです。

カラーピッカーの使用方法

【お勧め書籍】

コードは気になったWebサイトを見れば参照できますが、やはりデザインや配色を考えるには実際に「見本」があったほうが考えやすいものです。そんな時に役立つ2冊をご紹介します。

 Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集

https://www.amazon.co.jp/dp/4797389036/

HTMLやCSSの記述はおさえている方向けですが、業種や用途別のデザイン例満載で眺めるだけでも楽しめます。

HTML&CSSとWebデザインが 1冊できちんと身につく本

https://www.amazon.co.jp/dp/4774190640/

HTML5とCSSの基本を理解して、さらにデザインの基礎も学べる一冊です。サンプルコードもダウンロードできます。


5.さいごに

以上、HTMLでの色の指定方法やカラーコードについて解説しました。

Webサイトの配色は複数のデバイスで閲覧されることなどを考慮しなければならないこともありますので、あまり多用せずに、あっさり指定のほうがいいのかな、と個人的には思っています。

色の指定方法は簡単ですが、使いどころを考えてWebサイトの目的に沿ったデザインを完成させてください。

※文中イラスト:サクマ

私たちは、全てのエンジニアに市場価値を高め自身の望む理想のキャリアを歩んでいただきたいと考えています。もし、今あなたが転職を検討しているのであればこちらの記事をご一読ください。理想のキャリアを実現するためのヒントが見つかるはずです。

『技術力』と『人間力』を高め市場価値の高いエンジニアを目指しませんか?

私たちは「技術力」だけでなく「人間力」の向上をもって遙かに高い水準の成果を出し、関わる全ての人々に感動を与え続ける集団でありたいと考えています。

高い水準で仕事を進めていただくためにも、弊社では次のような環境を用意しています。

  • 定年までIT業界で働くためのスキル(技術力、人間力)が身につく支援
  • 「給与が上がらない」を解消する6ヶ月に1度の明確な人事評価制度
  • 平均残業時間17時間!毎週の稼動確認を徹底しているから実現できる働きやすい環境

現在、株式会社ボールドでは「キャリア採用」のエントリーを受付中です。

まずは以下のボタンより弊社の紹介をご覧いただき、あなたの望むキャリアビジョンをエントリーフォームより詳しくお聞かせください。

コメント