紹介ページabout.htmlの見出しをデザイン

売れるホームページの作り方 ⇒ 速攻HTML ⇒ 見出しをデザイン


速攻HTML

紹介ページの見出しをデザインします

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



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


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


・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;    サイズを1倍
      border-left: solid 16px #66aa66;    左境界を横サイズ16で色を緑
      padding-left: 5px;    左余白設定
      margin-bottom:0;    下コンテンツとの余白0
      margin-top: 30px; }    上コンテンツとの余白30


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



● h3見出し(小見出し)


以下を追加します。


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


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


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


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





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


  個別ページ