Home > P.299

P.299

Last Modified: 2008年11月29日 19:56

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

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

Home
- works
  - 2008
    - 実践 Web Standards Design サポートページ
      - sample
        
        6 章
        
        P.299
前： P.298
次： P.300

解説

これまでの解説で、 p#pageImage 上には img 要素の左マージンによって余白ができました。ここにインフォメーションとナビゲーションを絶対配置し、ボックスを重ねて配置していきます。

div#siteInfo に position: absolute を指定し、 body からの基点を指定して絶対配置します。また、内容量が増えた場合を考え、一定の高さを超えた場合はスクロールバーを表示するように overflow: autoを指定します。

CSS

div#siteInfo {
  width: 240px;
  height: 130px; /* 高さの指定 */
  position: absolute; /* 絶対配置 */
  top: 320px;
  left: 12px;
  overflow: auto; /* heightで指定した高さに収まりきらない場合の表示方法を指定 */
}

div#siteInfo h2 {
  margin: 0;
}

div#siteInfo ul {
  margin: 0;
  padding: 0;
}

div#siteInfo li {
  margin: 0;
}