読みやすい文字色にするには

読みやすい文字色は、背景色「白」、文字色「黒」が基本です。ある語句を強調する場合やデザインを重視する場合は、白黒にこだわる必要はありませんが、背景色と似た文字色を使用すると非常に読みにくくなります。できるだけ読み手のことを考慮した背景色と文字色の組み合わせを使用してください。


文字色を指定するには、color というプロパティを使用します。

＜スタイルシートの記述例＞

.content p { color: #666666; }

文字色の指定方法には、「#666666」のように16進表記で指定する方法と、 「blue」のようにカラーネームで指定する方法があります。

■ 16進表記で指定

color: #666666;

16進表記で指定する場合、WEBセーフカラーを使用すると、より多くの環境で意図通りの色で表示させることができます。
WEBセーフカラーとは、8ビットカラー256色のうち、MacintoshとWindowsで異なる40色を除いた216色のWEBカラーのことです。WEBセーフカラーを使用すれば、表示の際に色が変換されてしまうことが少なくなり、 より多くの環境で意図通りの色で表示させることができます。

■ カラーネームで指定

color: blue;

16進表記の他にカラーネームで色を指定することができます。
カラーネームによる指定の場合、色名によっては使用OSやブラウザのバージョンなどの環境により、 正しく表示できないことがあるので注意してください。

HTML4.01とXHTML1.0、CSS2で共通して正式に使用できるカラーネームは、下記の16色です。

■ カラーチャート表（標準カラー16色）

Aqua #00FFFF	Yellow #FFFF00	Fuchsia #FF00FF	White #FFFFFF
Teal #008080	Olive #808000	Purple #800080	Gray #808080
Blue #0000FF	Lime #00FF00	Red #FF0000	Silver #C0C0C0
Navy #000080	Green #008000	Maroon #800000	Black #000000

ブログ別！カスタマイズ方法

では、文字色のカスタマイズ方法について、ブログ別に説明します。カスタマイズをする場合は、利用しているブログを選択してくださいね。

[MovableType]	→ 文字色の変更（MT3.2編） → 文字色の変更（MT3.17編）
[livdoor Blog]	→ 文字色の変更（livedoorBlog編）
[FC2 ブログ]	→ 文字色の変更（FC2ブログ編）

以上、文字色の指定方法について説明しました。
是非、参考にして、読みやすい文字色にカスタマイズしてください。

[次の講義へ] → 行間を広げるには

参考になりましたら、1クリックの応援お願いします。