フォントについてよく使われる設定として、文字色の指定があると思います。
キーワードとなる文字の色を変えることで、内容が分かりやすくなるなど、効果的な文字色の指定は、閲覧者がサイトのイメージを持つ上で重要な役割を担っています。
今回は、文字色の指定についてまとめたいと思います。
なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3%で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。
▶ 参考:
プログラマカレッジの評判や口コミを200件分析!無料の理由や違約金、適性検査も解説【エンジニア転職術】
最終更新日:2023年8月3日
文字色を指定する場合は、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 【 色見本 】 ~ カラーチャートをご覧下さい。
ユーザ環境によっては、独自の背景色を設定している場合があるので、文字色を指定する際には背景色にも注意を払います。
文字色を赤に、背景色をライトグレイに指定すると、次のように表示されます。
文字色は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>
以前は、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で指定した方が良いです。
色をカラーネームで指定すると、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 【 色見本 】~ カラーチャートをご覧下さい。
INTERNOUS,inc. All rights reserved.