見出しタグ（H1～H6）のスタイルを指定する
ホームページやブログなどのウェブサイトで 見出しタグ（H1～H6）で囲まれた文字は、文章中の重要な部分として扱われますから、ページタイトルや記事タイトル、その他重要な語句はレベルの高い見出しタグを使用したいところですが、デフォルトのままでは異様に文字が大きかったり、不必要に上下に余白がとられてしまったりしてページのデザインを崩してしまいがちです。
そんな場合は、見出しタグにスタイルを指定して使いましょう。見出しはH１～H６までありますので、ある程度用途を決めておくとよいかもしれません。見出しタグはブロックタグですので、<p>タグや<div>タグとほとんど同じようにスタイル指定できます。
H1 ページタイトルなど
H2 ページ説明など
H3 記事のタイトルなど
普通の行。本文、記事内容など。H4 本文中で、重要な語句など
普通の行。本文、記事内容など。上記サンプルのソースは、次のようになります。
<h1 style="font-size:28px;background:#98FB98;margin:5px 0px;color:white;padding:5px;">
H1 ページタイトルなど</h1>
<h2 style="font-size:14px;background:#98FB98;margin:5px 0px;color:#3CB371;padding:5px;">
H2 ページ説明など</h2>
<h3 style="font-size:17px;background:url('http://html.appelle.jp/sample/img_title_sample.gif') no-repeat #EEEEEE;margin:5px 0px;color:#3CB371;padding:3px 5px 3px 28px;">
H3 記事のタイトルなど</h3>
普通の行。本文、記事内容など。
<h4 style="background-color:#EEEEEE;font-size:12px;color:#3CB371;margin:5px;">
H4 本文中で、重要な語句など</h4>
普通の行。本文、記事内容など。
H1 ページタイトルなど</h1>
<h2 style="font-size:14px;background:#98FB98;margin:5px 0px;color:#3CB371;padding:5px;">
H2 ページ説明など</h2>
<h3 style="font-size:17px;background:url('http://html.appelle.jp/sample/img_title_sample.gif') no-repeat #EEEEEE;margin:5px 0px;color:#3CB371;padding:3px 5px 3px 28px;">
H3 記事のタイトルなど</h3>
普通の行。本文、記事内容など。
<h4 style="background-color:#EEEEEE;font-size:12px;color:#3CB371;margin:5px;">
H4 本文中で、重要な語句など</h4>
普通の行。本文、記事内容など。
ソース中青字部分で見出しタグのスタイルを指定していますが、デフォルトがデフォルトだけにソースが長くなりがちです。別途スタイルシートに記述して、class 指定したほうが繰返し使えますし、ソースがすっきりするかも知れません。
スタイルシートの記述方法について、詳しくはこちらをご覧ください。
ランキングに参加中です! お役に立てたらクリックをお願いします→
コンピュータとインターネット > データ形式 > HTML > リファレンス