見出しをデザイン

このサイトについて サイトマップ


アフィリエイトで稼ぐのは厳しい ⇒ 速習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を指定します。




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

  個別ページ