Home > P.146

P.146

Last Modified: 2008年11月24日 17:06

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

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

Home
- works
  - 2008
    - 実践 Web Standards Design サポートページ
      - sample
        
        4 章
        
        P.146
前： P.143
次： P.148

解説 (1)

img 要素に float: right を指定して反対側への流し込みを許可させ、後の h3 要素に clear プロパティを指定し、ここでフロートによる流し込みを解除させます。

XHTML

<p><img src="baloon.png" height="153" width="187" alt="バルーン" />流し込みの解除を指定したボックスは、上方マージン、それでも足りない場合はクリアランスと呼ばれる特殊な隙間を広げ、フロートしたボックスの下方に位置するように調整されます。</p>
<h3>clear: bothの指定されたh3要素</h3>
<p>clear: bothの指定されたh3は流し込みが禁止され、フロートしたボックスの下に配置されます。clearの指定からは、ボックスは通常フローのとおり配置されます。</p>

Download(1)

4-1-5.html

解説 (2)

フロートした画像の横には若干の余白があり、本来なら続く h3 要素のテキストはこの余白に流し込まれるはずですが、 h3 要素には clear: both が指定されているので、流し込まれずにフロートした画像の下に配置されています。

CSS

img {
  float: right;
}
  
h3 {
  padding: 0.2em 16px;
  clear: both;
  color: #666;
  background-color: #eee;
  font-size: 80%;
}

p {
  margin: 0.5em 16px;
  line-height: 1.5;
  color: #333;
  font-size: 80%;
}