CSS【 font color 】 ~ 文字色の指定

colmun_main5660

フォントについてよく使われる設定として、文字色の指定があると思います。
キーワードとなる文字の色を変えることで、内容が分かりやすくなるなど、効果的な文字色の指定は、閲覧者がサイトのイメージを持つ上で重要な役割を担っています。
今回は、文字色の指定についてまとめたいと思います。

目次

 1.colorプロパティ
 2.font color 指定
 3.fontタグは非推奨
 4.Webカラーネーム一覧

1.colorプロパティ

文字色を指定する場合は、colorプロパティを使用します。

そして、文字色を指定する際には、背景色にも注意を払うことが必要です。
ユーザ環境で背景色が指定されている場合には、強調したくて選んだ文字色が目立たなくなったり、背景色と同化して文字が読めなくなったりすることがあるからです。

colorプロパティの値は「色」ですが、色について、次のように複数の指定方法があります。

16進数で指定 color: #FF0000;
色を、RGBの各値を2桁ずつ、16進数で表す方法
#FF0000のようにRGB各色の数値が同じである場合は、#F00と3桁に省略可
色の名前(Webカラーネーム)で指定 color: red;
色を、各ブラウザで設定されているカラーネーム(約140色)で表す方法
10進数で指定 color: RGB(255,0,0);
色を、RGBの値をそれぞれカンマ(,)で区切って10進数で表す方法
10進数で透明度も指定 color: RGBa(255,0,0,0.5);
色について、RGBの値のあとに「 0(透明)~1(不透明) 」の数値で透明度も表す方法
HSLで指定 color: hsl(0,100%,50%);
色相環での角度( 0~359度 )で色を、そのあと彩度と輝度を%で、カンマ(,)で区切って表す方法
HSLで透明度も指定 color: hsla(0,100%,50%,0.5);
色について、HSLの値のあとに「 0(透明)~1(不透明) 」の数値で透明度も表す方法
%で指定 color: RGB(100%,0%,0%); または color: RGBa(100%,0%,0%,0.5);
色を、RGBの値をそれぞれカンマ(,)で区切って%で表す方法

上記の色指定について、詳しくはHTML 【 色指定 】 ~ colorの指定方法をご参照下さい。
また、カラーサンプルは、HTML 【 色見本 】 ~ カラーチャートをご覧下さい。

▲目次へ戻る

2.font color 指定

ユーザ環境によっては、独自の背景色を設定している場合があるので、文字色を指定する際には背景色にも注意を払います。

文字色を赤に、背景色をライトグレイに指定すると、次のように表示されます。

文字色はcolorプロパティで、背景色はbackground-colorプロパティで指定します。

ソースは次の通りです。

(CSS)
p#sample {
	padding: 20px;
	color: red;
	background-color: lightgrey;
	}

(HTML)
<p id="sample">
  文字色はcolorプロパティで、背景色はbackground-colorプロパティで指定します。
</p>

 
キーワードなど、ある文字だけ特に強調させたい場合は、部分的に文字色を指定します。

文字色はcolorプロパティで、背景色はbackground-colorプロパティで指定します。

ソースは次の通りです。

(CSS)
p#sample {
	padding: 20px;
	background-color: lightgrey;
	}
p#sample span {
	color: red;
	}

(HTML)
<p id="sample">
  文字色は<span>color</span>プロパティで、背景色は<span>background-color</span>プロパティで指定します。
</p>

▲目次へ戻る

3.fontタグは非推奨

以前は、font要素というものが使用可能で、「<font color=”red”>赤</font>」のような形でも文字色を指定することができました。
しかし、HTML5からfontタグが使用不可となったため、fontタグは使用しない方が無難です。

HTML5で使用不可となった要素は他にもあります。
詳しくはHTML5 【 要素と属性 】2 ~ 変更された要素と属性をご参照下さい。
 
どうしてもHTML要素のタグ内で文字色を指定したい場合は、style属性を使って次のような指定方法があります。

<p style="background-color: lightgrey">タグ内でstyle属性を使って<span style="color:red">style="color:red"</span>のように指定します。</p>

上記の記述で、次のように表示されます。

タグ内でstyle属性を使ってstyle=”color:red”のように指定します。

ただ、デザインの変更等、後々の保守作業の煩雑さを考えると、CSSで指定した方が良いです。

▲目次へ戻る

4.Webカラーネーム一覧

色をカラーネームで指定すると、CSSコードを見ただけでどんな色か予想できるので便利です。
但し、色によってはブラウザの違い等、Web環境によって正しく表示できないこともあるので注意が必要です。

カラーサンプル カラーネーム 16進数 読み方
lightpink #FFB6C1 ライトピンク
pink #FFC0CB ピンク
crimson #DC143C クリムゾン
palevioletred #DB7093 ペールバイオレットレッド
lavenderblush #FFF0F5 ラベンダー・ブラシ
hotpink #FF69B4 ホットピンク
deeppink #FF1493 ディープピンク
mediumvioletred #C71585 ミディアムバイオレットレッド
orchid #DA70D6 オーキッド
magenta #FF00FF マゼンタ
fuchsia #FF00FF フクシャ
darkmagenta #8B008B ダークマゼンタ
purple #800080 パープル
violet #EE82EE バイオレット
plum #DDA0DD プラム
thistle #D8BFD8 シスル
mediumorchid #BA55D3 ミディアムオーキッド
darkviolet #9400D3 ダークバイオレット
darkorchid #9932CC ダークオーキッド
indigo #4B0082 インディゴ
blueviolet #8A2BE2 ブルーバイオレット
mediumpurple #9370DB ミディアムパープル
mediumslateblue #7B68EE ミディアムスレートブルー
slateblue #6A5ACD スレートブルー
darkslateblue #483D8B ダークスレートブルー
blue #0000FF ブルー
mediumblue #0000CD ミディアムブルー
darkblue #00008B ダークブルー
navy #000080 ネイビー
midnightblue #191970 ミッドナイトブルー
lavender #E6E6FA ラベンダー
ghostwhite #F8F8FF ゴーストホワイト
royalblue #4169E1 ロイヤルブルー
cornflowerblue #6495ED コーンフラワーブルー
lightsteelblue #B0C4DE ライトスティールブルー
lightslategray #778899 ライトスレートグレイ
slategray #708090 スレートグレイ
dodgerblue #1E90FF ドジャーブルー
aliceblue #F0F8FF アリスブルー
steelblue #4682B4 スティールブルー
lightskyblue #87CEFA ライトスカイブルー
skyblue #87CEEB スカイブルー
deepskyblue #00BFFF ディープスカイブルー
lightblue #ADD8E6 ライトブルー
powderblue #B0E0E6 パウダーブルー
cadetblue #5F9EA0 カデットブルー
cyan #00FFFF シアン
aqua #00FFFF アクア
darkturquoise #00CED1 ダークターコイズ
darkcyan #008B8B ダークシアン
teal #008080 ティール
darkslategray #2F4F4F ダーク・スレート・グレイ
paleturquoise #AFEEEE ペールターコイズ
lightcyan #E0FFFF ライトシアン
azure #F0FFFF アズール
mediumturquoise #48D1CC ミディアムターコイズ
lightseagreen #20B2AA ライトシーグリーン
turquoise #40E0D0 ターコイズ
aquamarine #7FFFD4 アクアマリン
mediumaquamarine #66CDAA ミディアムアクアマリン
mediumspringgreen #00FA9A ミディアムスプリンググリーン
springgreen #00FF7F スプリンググリーン
mintcream #F5FFFA ミントクリーム
mediumseagreen #3CB371 ミディアムシーグリーン
seagreen #2E8B57 シーグリーン
lime #00FF00 ライム
green #008000 グリーン
forestgreen #228B22 フォレストグリーン
palegreen #98FB98 ペールグリーン
lightgreen #90EE90 ライトグリーン
darkseagreen #8FBC8F ダークシーグリーン
honeydew #F0FFF0 ハニーデュー
darkgreen #006400 ダークグリーン
limegreen #32CD32 ライムグリーン
chartreuse #7FFF00 シャルトリューズ
lawngreen #7CFC00 ローングリーン
greenyellow #ADFF2F グリーンイエロー
darkolivegreen #556B2F ダークオリーブグリーン
yellowgreen #9ACD32 イエローグリーン
olivedrab #6B8E23 オリーブドラブ
lightgoldenrodyellow #FAFAD2 ライト・ゴールデンロッド・イエロー
yellow #FFFF00 イエロー
olive #808000 オリーブ
lightyellow #FFFFE0 ライトイエロー
beige #F5F5DC ベージュ
ivory #FFFFF0 アイボリー
darkkhaki #BDB76B ダークカーキ
palegoldenrod #EEE8AA ペールゴールデンロッド
khaki #F0E68C カーキ
lemonchiffon #FFFACD レモンシフォン
gold #FFD700 ゴールド
cornsilk #FFF8DC コーンシルク
darkgoldenrod #B8860B ダークゴールデンロッド
goldenrod #DAA520 ゴールデンロッド
wheat #F5DEB3 ウィート
oldlace #FDF5E6 オールドレース
floralwhite #FFFAF0 フローラルホワイト
orange #FFA500 オレンジ
moccasin #FFE4B5 モカシン
papayawhip #FFEFD5 パパイヤホイップ
navajowhite #FFDEAD ナバホホワイト
blanchedalmond #FFEBCD ブランチド・アーモンド
tan #D2B48C タン
antiquewhite #FAEBD7 アンティークホワイト
burlywood #DEB887 バーリーウッド
darkorange #FF8C00 ダークオレンジ
bisque #FFE4C4 ビスク
peru #CD853F ペルー
linen #FAF0E6 リネン
peachpuff #FFDAB9 ピーチパフ
sandybrown #F4A460 サンディブラウン
saddlebrown #8B4513 サドルブラウン
chocolate #D2691E チョコレート
seashell #FFF5EE シーシェル
sienna #A0522D シエナ
lightsalmon #FFA07A ライトサロモン
orangered #FF4500 オレンジレッド
coral #FF7F50 コーラル
darksalmon #E9967A ダークサロモン
tomato #FF6347 トマト
salmon #FA8072 サロモン
mistyrose #FFE4E1 ミスティローズ
red #FF0000 レッド
darkred #8B0000 ダークレッド
maroon #800000 マルーン
firebrick #B22222 ファイアブリック
brown #A52A2A ブラウン
indianred #CD5C5C インディアンレッド
lightcoral #F08080 ライトコーラル
rosybrown #BC8F8F ロージーブラウン
snow #FFFAFA スノウ
white #FFFFFF ホワイト
whitesmoke #F5F5F5 ホワイトスモーク
gainsboro #DCDCDC ゲインズボロ
lightgrey #D3D3D3 ライトグレイ
silver #C0C0C0 シルバー
darkgray #A9A9A9 ダークグレイ
gray #808080 グレイ
dimgray #696969 ディムグレイ
black #000000 ブラック

他のカラーサンプルについては、HTML 【 色見本 】 ~ カラーチャートをご覧下さい。

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です