Home > P.265

P.265

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

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

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

Home
- works
  - 2008
    - 実践 Web Standards Design サポートページ
      - sample
        
        6 章
        
        P.265
前： P.263
次： P.271

解説 (1)

div#main に float: right とwidth を指定して右に寄せます。また、背景画像を右上に読み込ませ、角丸の一部を表現します。

CSS(1)

div#content div#main {
  margin-right: 8px;
  display: inline; /* IE 6対応（マージンの値が増えるバグへの対処） */
  float: right; /* 右寄せ */
  width: 610px;
  background: url(img/bg_main-corner.gif) right top no-repeat;
  background-color: #fcf; /* ボックスの確認用 */
}

解説 (2)

続いて、 dl#subNavi に float: left と width を指定し、左に寄せます。

CSS(2)

div#content dl#subNavi {
  margin: 10px 0 0 18px;
  padding: 0;
  display: inline; /* IE 6対応（マージンの値が増えるバグへの対処） */
  float: left;
  width: 178px;
  background-color: #9cf; /* ボックスの確認用 */
}

解説 (3)

div#content の最後の子要素にあたる p.return には、 2 つのフロートを解除するための clear: both を指定します。

CSS(3)

div#content p.return {
  margin: 0;
  padding-right: 20px;
  clear: both; /* 流し込みの解除 */
  text-align: right;
  background-color: #9f6; /* ボックスの確認用 */
}

div#content p.return img {
  border: none;
}