超初心者でも簡単!あなたもできるHP作成!− Make easily  
|| トップページ || HTML || Style Sheet || リファレンス || Web素材 || Contact Us || サイトマップ || 初めての方 || 

見出し

このリファレンスの見方については「リファレンスの見方」をお読みください。
見出しを指定するタグは、 <h*> </h*> を使います。

*には、1から6までの数字が入ります。

【HTMLタグ】
<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>

それぞれ見出しの大きさは次のようになります。

見本の文字の大きさを見る

スタイルシートを使えば見出しの文字色を変えたり、背景に色をつけたりすることができます。
見出しは「ブロック系要素」なので、背景色を変えると端まで全体に色がつきます。

スタイルシートは一度に複数の要素を指定できるので、文字色の指定と背景色の指定を一緒に記述してみます。

見出しの色を変える

【スタイルシート インライン】
<h1 style="color:#FFFFFF; background-color:#9999cc;">見出し見本</h1>
【スタイルシートヘッダ、外部ファイル】

h1 {
color: #FFFFFF;
background-color: #9999cc;
}


BODY部分は

<h1>見出し見本</h1>

見出しの開始部分を右に寄せる

今度は見出しの文字の開始部分をもう少し右に寄せてみましょう。
【スタイルシート インライン】
<h1 style="color:#FFFFFF; background-color:#9999cc; padding-left:30px;">見出し見本</h1>
【スタイルシートヘッダ、外部ファイル】

h1 {
color: #FFFFFF;
background-color: #9999cc;
padding-left:30px;
}


BODY部分は

<h1>見出し見本</h1>

「padding」というのは、内側の余白のことを示します。
上記の場合は、見出しの文字の左に30pxの余白を入れています。
数字には必ず単位(px)を付けてください。

「padding」とよく間違うのが「margin」です。
「padding」と「margin」の違いについては「リファレンス−余白」をご覧ください。

▲このページのトップに戻るTop