其の16 要素の重要度に応じた見出しタグをつける | デザインってオモシロイ -MdN Design Interactive-
【サイトリニューアル!】新サイトはこちらMdNについて
タイトル画像

レベル中級其の16

要素の重要度に応じた見出しタグをつける


見出しタグを間違った方法で使用しているサイトがある。

見出しタグとは、その名の通り文章の見出しに定義するのに使われるタグで、< h1 >から< h6 >まで6段階用意されている。この数字を単に文字の大きさが違うだけと思い、制作者が使いたい文字のサイズを選べばいいと考える人もいるが、1~6の数字にはきちんとした意味があり、見出しタグはSEOの面からいっても重要な役割をもっているタグなのだ。

< h1 >~< h6 >の見出しタグは、< h1 >< h2 >< h3 >< h4 >< h5 >< h6 >の順に重要度も高い。特に< h1 >タグは検索エンジン上で、そのページ上で重要な要素と認識される。ただ、だからといって、この< h1 >を1ページ上で複数に渡り使用してはならない。あくまでも大見出し< h1 >はひとつなのだ。

また、< h1 >~< h6 >の数字を飛躍させたり、順序を逆に数字の大きいものから使用するのもよくない。< h4 >の後に< h2 >があるのは適切ではない。キチンと< h1 >~< h6 >の順番を踏まえて使用しよう【1】。

サイト上< h1 >~< h6 >のタグの重要性は理解しているが、文字の大きさなど見た目がよくないから……という場合は、CSSを使用して(特に< h1 >と< h2 >)などは整形するとよい【2】。

見出しタグを用いた例
< body >
< h1 >WEBデザインのマナー< /h1 >
< h2 >CSS編< /h2 >
< h3 >ボックスの使い方をマスターする< /h3 >
< /body >
【1】大見出し、見出し、小見出しの順に使用しなければならない。ただし、このままだと見た目がとても悪くなってしまう。

CSSを用いて整形した例
h1 {
font: bold 18px "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
color: #333333;
}
【2】それぞれのマージンやフォントの見栄えを整形するとまとまりが出る

お作法一覧へ
twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在