少し前に 文章の可読性 -読みやすさとは- を、背景色と文字色の組み合わせに焦点をあててみましたという記事を書いたのですが、この時はタイトル通り、色に焦点を当てていましたが、今回はHTMLタグに焦点を当ててみました。
今日は、その中でもブログでよく使うHTMLタグについて考察。
ブログを書いていく上でよく使うタグ
私は、いろいろなブログを読むのが大好きです。
素敵なデザインのブログや、とても勉強になる技術ブログ、読んでいるととても楽しくなるブログなどなどいろいろと読んでいます。
このブログも、結構、色やフォントをいろいろ考えて決めてはいるのですが、見慣れてきてしまうといいますか、もっとよく見えるやり方があるのではないかと思うわけです。
ということで以下。気をつけていきたいまとめ。
ブログを書いていく上でよく使うタグ。
- タイトル ← h1～h6
- 文章中の文字 ← p
- 強調したい文字 ← b, strong
- リンク文字 ← a
などは必ず使われているタグかと思います。
１番初めに書いたタイトルについての考察は言わずもがな、いろいろなサイトで考察されているので今回は割愛。
次の文章中の文字、これすごく大事だと思うのです。
実際、ブログを読んでいて１番気になるところかと思います。
文章中の文字 『P』
まずは、文字の大きさ。
今は、モニターが大きくなったのであまり小さな文字にはしないほうがいいと思います。
１番読みやすいのは、pxにすると14～16pxかなと思います。
次に行間。
行間を詰めてしまうと、ぎゅうぎゅう詰めで読みにくくなってしまいます。
和文を含むテキストの場合は、フォントサイズの 1.4から1.5倍が望ましい行の高さとされていますが、私は、少し大きめの1.6倍で設定しています。
あとは、文字と文字の間隔。
文字と文字の間隔は『letter-spacing』
ちょっとしたところですが、読みやすいなと思うブログは、このプロパティが指定されていたりします。
これらをまとめると
|
1 2 3 4 5 |
p{ line-height: 1.6; margin: 20px 0; letter-spacing: 1px; } |
line-heightプロパティは行間を指定するものではなく、行ボックスの高さ（行の高さ）を指定するものであることに注意してください。 行間とは、たとえば p要素の line-heightプロパティの値が "20px"、font-sizeプロパティの値が "16px" の場合は、行の高さである "20px" からフォントサイズの "16px" を引いた "4px" のすき間のことを言います。 参照サイト：World Wide Web Guide
強調したい文字 『b, strong』
ブログを書いていると、その記事の中で、必ず一回は出てくるだろう『b, strong』
しっかり強調したいのだから、太字にするだけでは勿体無いなと思うのです。（しかも太字にすると、フォントによっては、何が書いてあるのか読み取りづらくなってたりする場合も。。）
例えばこんな感じに
文字色を変更する
|
1 |
strong{color: #f93e00; font-size: 20px;} |
背景色を付ける
|
1 |
strong{background-color: #99ccff; color: #1A1A1A; font-size: 20px;} |
線で囲う
|
1 |
strong{border: 3px double #ccc; color: #1A1A1A; font-size: 20px;} |
リンク文字 『a』
※ リンクについては、文中リンク限定でここでは書きます。
外部リンクに行きますよというお知らせをどのようにするかということなのですが、これは、WEBを見慣れている人だとこれは多分リンクだろうなという感覚で分かったりするのですが、わからない人はわかりません。
この間、知り合いにWEBページを見てもらって、どれがリンクだと思うかと聞いたところh2を指差されました。。感覚のズレとは、こういう事なんだろうなと思った次第です。 （もう :before擬似要素で『LINK』という文字を出してやろうかと思いました。）
ということで、これも強調と同じようにアイコンを使うなどひと手間の工夫をする必要があるなと感じました。
これらのタグというのは、きちんと意味があります。
これらをそれぞれ生かし(機能)ていけば、メリハリがついて、今よりは読みやすさが増すのではないかと思います。
