■文章の行間を指定する

文書を読みやすくする方法。

(例)ページ全体の行間を指定する
body {line-height: 150%;}

(例)特定部分のみの行間を指定する
<div style="line-height: 150%;">〜</div>

文字を読みやすくするためには行間を設定する方法があります。

大きな文字を使っている時は読みにくいと感じることはあまりありませんが、
小さい文字を使っている場合画面いっぱいに文字が集合されてしまい大変読みにくくなります。

全体的に行間を指定するときはbody要素にline-heightを指定します。
値を150%に設定するとかなり読みやすくなるので1度試してみてください。(標準は100%)

また、line-heightは行間を指定するプロパティで値はpt,px,em.%のいずれかを使用します。
テキストの大きさを基準にして行の高さを指定します。




■ 読みやすい行間にする

実は読みにくかった、、、ということは良くあります。可読性を高める方法の1つはこんなに簡単。


作成ソフトを使っている人はきっと気付きませんが、
文章の途中で改行を入れるには改行<br>を書きます。
ホームページ作成ソフトでは自動的に挿入されるものです。


さて、読みやすくするための工夫として
スタイルシートの{line-height}をよく利用します。
読みやすい行間は130〜150%にすると良く、標準値に比べかなり読みやすさが上がります。

しかし、スタイルシートの{line-height}を
使っても行間が変わらない時があることを知ってますか?

それは<a>で囲まれたリンク部分です。
リンク部分には{line-height}が適用されません。


このようなときは段落タグ<p>を使うことで回避できます。

( 例 )
<p>htmlで改行するには<br>タグや<p>タグを利用します。</p>
※<p>はなるべく</p>で閉じるようにしておいてください。
(</p>を省略しても表示しますが、キッチリと囲むように心がけて下さい。)


もちろんこのままでは行間は変わりません。そのままです。

ここでスタイルシートを利用します。
まずこのように、リンク部分を段落タグで囲んでおいて、
p {margin:10px 0px;}
内部スタイルシートなどでこのように書きます。

<説明>
マージン{margin}は余白を制御するプロパティです。
ちなみに例のように指定することで、
「上下10px、左右0px」の余白をあけることが出来ます。
------------------------------------------------------------

あなたのWebサイトをじっくり見てみてください。
リンクのカタマリがダンゴ状態になってませんか?
簡単なテクニックですが、様々なところで活躍してれますよ。


微妙なデザインが気になる方向けの「気づかい」テクニックです。