f99aq8ove's blog

読みやすいブログを書く方法

tag: css and Blog
04 December 2005

このエントリは 2005-12-04 に書かれました。 内容が古くなっていたり、もはや正しくないこともありますので、十分検証を行ってください。

気合を入れて書き始めてみたが、途中で飽きてα版 ver 0.1 (2005-12-04)

理由なくフォントを変えない

Windows環境で明朝体は読みづらいです(明朝体を別の見やすいフォントに変えてない場合)。読み手はブラウザの設定を変更して、自分が読みやすいフォントを指定しています。コードやアスキーアートを貼る時のように理由がある場合を除いてむやみにフォントを変更するのはやめましょう。

フォントサイズを変えない

読み手は、フォントと同じようにフォントサイズを自分が読みやすいように設定しています。実際にモニタに表示される文字の大きさは環境によって大きく変わります。フォントサイズはデフォルトにしておいて、読み手に任せましょう。(でも、それだと大きすぎるって言う人が多いでしょうねぇ。)

行間は50%開けよう

line-height: 150%;

以上をスタイルシートの適当な位置に書き込んで行間を開けましょう。日本語の文章ではこれがちょうどいいのです(独断と偏見)。

不要な強調はしない

普通の文章の中にぽつんと強調された文字があるから目立つのです。強調ばかりの文章は、どれを強調しているのかわかりにくいだけでなく、非常に読みにくいです。ムダに色を変えているものも、ですね。

均等割付をしよう

行末がそろっていないとなんだか読みにくい気がします。そこで、Firefox 1.5 でサポートが向上した均等割付を使ってみましょう。

text-align: justify;

<p></p>で段落を切る

何行も文が続いた後で段落分けが行頭一文字下げだけだと、詰まった感じがして読みにくくなります。段落は <p></p> で切っておいて、字下げや段落間隔はスタイルシートで指定したほうが楽です。

段落の切れ目以外で改行しない

メールを書くときには何文字かごとに改行を入れますが、それをまねる必要は有りません。作成した環境ではきれいに改行されているように見えても、フォントや文字の大きさが違う環境では、ずれたところで改行されてしまいます。また、視覚効果を狙って一文毎に一行空けで書いている人もいますが、やりすぎは禁物です…。

明度差を十分とる

文字色と背景色が近いと、読みづらいどころか読めません。色の組み合わせチェック - 読みやすい前景色と背景色 などでチェックしてみましょう。(明度差が十分でも水色背景に赤文字なんて駄目ですよ…。)

文字の余白率を考える

漢字ばっかり、ひらがなばっかり、だと読みにくい感じがします。「メールを書く時には何文字か毎に改行を」よりも、「メールを書くときには何文字かごとに改行を」のほうが…。この例は微妙ですね…。

飽きたのでここまで。技術的なものだけにしておけばよかったかなぁ。

Related Posts