文字サイズと間隔の調整方法

hタグを使うことにより見出しとして強調できることを前回解説しましたが、単にhタグを使うだけでは、全体のバランスを考えた場合、文字が大きすぎたり周囲との行間が広すぎたりして、決して見栄えが良くありません。

そこで今回はCSSを使ってhタグの文字サイズや行間を調整する方法について解説したいと思います。

本題に入る前にまずは人気ブログランキングをご覧下さい。

ここではこのブログで使っているhタグの中からh1タグを対象にしたCSSを例にしたいと思います。

h1 {
font-weight:bold;
font-size:24px;
margin:0px;
padding: 5px;
}

1行目ではh1タグで囲まれる文字列を太字にすると定義しています。また2行目では、文字サイズを24pxにすると定義しています。

一般にh1タグはサイトタイトルをコンテンツ内に配置する際に良く使われます。またそうすることによりSEO対策にも効果的となります。このブログもそうですが、コンテンツの一番最初の表示部分にタイトルを入れることは非常に重要です。何故なら検索ロボットがページをチェックする際、上に表示されているものほど重要だと判断するからです。その上、見出しの中でも一番強力なh1タグを使っていれば、自ずと最重要ターゲットとして捉えられることになるんですね。

このブログではh1タグを太字で24pxとすることにより、他の文字(記事部分の文字サイズは14px)との差異を明確にしています。

次に3行目に移ります。ここでは周囲とのマージン幅を設定しています。未設定状態でh1タグを使うとマージン幅がかなり多めに取られてしまい、結果的に周囲から浮いた状態で表示されてしまいますので、私は0pxに設定しています。この設定は非常にお勧めですので、みなさんも是非使ってみて下さい。

そして4行目ですが、ここでは枠内のパディング幅を5pxに設定しています。

マージンとパディングは共に周囲との幅を設定するものなので、どのような違いがあるのか混乱するかもしれませんが、目に見えない枠線が引かれているボックスを考えてみると良いと思います。

マージンとは枠線とその外側にある間隔のことで、パディングとは枠線とその内側にある間隔のことです。似ているようで意味合いが全く違いますので注意して下さい。

このようにCSSで文字サイズや周囲との幅を変えることによって、標準の見栄えよりもずっと綺麗な見栄えにすることが可能になります。

h1以外にもh2〜h6タグも同様に設定を行うことができますので、上手に設定してみて下さい。

ちなみにh1タグを使う回数はページ内で1回に留めておいた方が良いと思います。h1タグは最も強い力を持っていますが、それだけに最も強調したいはずのタイトルを表示させる部分で使うのが効果的ですし、乱用してもメリットはほとんどありません。

posted by ひっそり | Comment(0) | TrackBack(0) | h1〜h6
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。