見出しをデザイン

　　この文字をクリックするとサンプルダウンロード出来ます。


ヘッダと配置の整備　←　｜　→　紹介ページの記事を入力


見出しを次の様にデザインします。

・見出し毎に大きさを調整

・h1見出し（大見出し）は白抜きにする。
・h2見出し（中見出し）は先頭に■マークを付加する。
・h3見出し（小見出し）は先頭に●マークを付加して全体に色下線をつける。

全てはスタイルシートで設定します。

●　h1見出し（大見出し）

設定済みのh1セレクタの色部分を修正する

h1　　　{　font-size: 1.5em;
　　　　　　font-family: Verdana, Helvetica, sans-serif;
　　　　　　color: #000000;
　　　　　　　　　　　　　↓　修正する
　　　　　　color: #ffffff; 　色を白に変更する。
　　　　　　margin-bottom: 0;　}


●　h2見出し（中見出し）

以下を追加します。

h2　　　{　font-size: 1em;		サイズを１倍
border-left: solid 16px #66aa66;		左境界を横サイズ16で色を緑
padding-left: 5px;		左余白設定
margin-bottom:0;		下コンテンツとの余白０
margin-top: 30px;　}		上コンテンツとの余白３０

　■マークは、左境界の幅を16pxの太い緑線にすることで実現しています。
　下のh3見出しの様に画像を使用しても構いません。


●　h3見出し（小見出し）

以下を追加します。

h3　　　{　font-size: 0.875em;		サイズを0.875倍
border-bottom: solid 2px #66aa66;		下境界を２pxの緑線に設定
padding-bottom: 3px;		下境界との余白を３
background: url(mark.gif)　no-repeat;		背景画像ファイル名を指定
padding-left: 20px;}		左境界との余白を２０にする

h3見出しでは●を画像ファイルで準備して使用します。

background: url(ファイル名)　で指定します。

また、繰り返し表示を禁止する為、 no-repeatを指定します。

---

表示して見ます。見出しがデザインされました。