Home > P.275

P.275

Last Modified: 2008年11月29日 17:07

このページは、株式会社技術評論社より刊行されている実践 Web Standards Design に記載しているソースコードのサンプルを呈示しています。書籍該当部分と照合しやすいように前後の解説文も掲載していますが、あくまで照合用のため、適宜前後を省いたり内容を省略したりしています。 書籍を読みながら実際にサンプルを表示する際の補助資料として活用してください。

また、 XHTML ソースと CSS ソース、関連画像を含めた全サンプルの ZIP アーカイブ (3,104,743 Bytes) もダウンロードできます。（ ZIP アーカイブには解説文は含まれていません。）

Home
- works
  - 2008
    - 実践 Web Standards Design サポートページ
      - sample
        
        6 章
        
        P.275
前： P.274
次： P.276

解説

h1 要素には、次の画像を背景として読み込みます。

bg_savanna.gif（幅 305px 、高さ 107px ）

この画像には、ヘッダーエリアの左下の角丸が含まれています。 CSS 2.1 の仕様では、ボックスには background-image を 1 つしか指定できません。 div#header はすでに別の背景画像が指定されているので、このように重なる h1 要素の背景に含ませるといった工夫をします。

また、 div#header に position: relative を指定し、後に絶対配置させる ul.feeds と form#blogSearch の基点となるように設定しておきます。

CSS

div#header {
  padding-top: 6px;
  position: relative; /* 子孫要素を絶対配置する際の基点に設定 */
}

div#header h1 {
  margin: 0 8px;
  padding: 20px 10px 50px 10px;
  background: url(img/bg_savanna.gif) no-repeat;
}

div#header h1 img {
  vertical-align: bottom;
  border: none;
}