TOPページ >  特殊文字、その他, スタイルシート(CSS)の記述 > 見出しタグ(H1~H6)のスタイルを指定する

見出しタグ(H1~H6)のスタイルを指定する

ホームページやブログなどのウェブサイトで 見出しタグ(H1~H6)で囲まれた文字は、文章中の重要な部分として扱われますから、ページタイトルや記事タイトル、その他重要な語句はレベルの高い見出しタグを使用したいところですが、デフォルトのままでは異様に文字が大きかったり、不必要に上下に余白がとられてしまったりしてページのデザインを崩してしまいがちです。

そんな場合は、見出しタグにスタイルを指定して使いましょう。見出しはH1~H6までありますので、ある程度用途を決めておくとよいかもしれません。見出しタグはブロックタグですので、<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>
普通の行。本文、記事内容など。

ソース中青字部分で見出しタグのスタイルを指定していますが、デフォルトがデフォルトだけにソースが長くなりがちです。別途スタイルシートに記述して、class 指定したほうが繰返し使えますし、ソースがすっきりするかも知れません。

スタイルシートの記述方法について、詳しくはこちらをご覧ください。

ランキングに参加中です! お役に立てたらクリックをお願いします→

同一カテゴリ内一覧
専門用語を表示する
住所や連絡先を表示する
引用文を表示させる
一定時間後に別のページへジャンプする
見出しタグ(H1~H6)のスタイルを指定する
見出しを表示する
テキストをそのまま表示する
特殊文字を表示する
HTMLに使用される長さの単位一覧
Latin-1 コード表(特殊記号)
IEの方はこちらから当サイト ブックマークできます。
ランキング参加中!お役に立てたら クリックをお願いします。
当サイト掲載カテゴリは
Yahoo! JAPAN コンピュータとインターネット > データ形式 > HTML > リファレンス