詰め CSS

お題目
float: left による画像に対しての文字の回り込みと clear:both

目標

HTML と CSS の目標

HTML として見て，へんなマークアップにならない
画面のレイアウトの情報は CSS に分離
div 要素の意味付けになるように class アトリビュート値を定義

文書の論理構造とレイアウトの目標

画像があって，画像の下には画像のタイトルが添えられる
画像の右側にテキストが回り込む
画像とその画像についての文章が，グループ化される

解説

HTML だけで設定する場合
- align="left" としてブロックを左側に配置して，それに続くテキストを回り込ませる
- <br clear="all"> で回り込みを解除する
CSS で設定する場合
- align="left" の変わりに float: left
- clear="all" の変わりに clear: both

画像と同じ幅のブロック要素(div.css-image-part)を定義します．そのブロック要素の中に画像と説明文が入ります．ブロック要素(div.css-image-part)に float を定義して，続くブロック要素内のテキストを回り込ませます．そしてどうにかして次のブロック要素(div.css-image-part)が出現するまでに clear: both で回り込みを解除します．

ブロック要素(div.css-image-part) に clear: both を指定してみましたが，うまくいきません．Netscape 6.x/Mozilla と IE 5.x / IE 6 ではなんか違うことになるようです．

あきらめて <br clear="all"> をそのまま残すのが確実なのですが，できれば <br clear="all"> を見た目のために HTML の中に入れるのは避けたいところ．

h3 { clear: both } なんてやれば回り込み解除は簡単にできます．

<div></div> って div の中身を空にして，これに clear: both を定義しても解除ができますが，中身が空の div 要素ってやな感じです．

ブロック要素(div.css-image-part) と続くテキストのブロック要素をさらに別のブロック要素(div.css-caption-block)で囲みます．div.css-image-part{ clear: both } と定義すると Netscape 6.x/Mozilla と IE 5.x / IE 6 で期待した画面描画ができるようです．

例

r & m Birdy

折り畳み自転車 BD-1．ぼくの相棒．はじめての輪行してのサイクリングはこの自転車でした．麦草峠，センチュリーラン笠間，いろいろなところを走りました．

Bike Friday と言ったら Small Wheel Folding Bike のメーカです．その Bike Friday のリカンベントが Sat R Day です．他の Bike Friday が 451 もしくは 406 と呼ばれる 20 インチのホイールを使っているのに対して Sat R day はさらに小さい 346 と呼ばれる 16 インチホイールを使っています．

CSS の例示

    .css-caption-box img:after {content: attr(title);}
    
    .css-caption-block {
        clear: both;
    }
    
    .css-caption-block > p {
        margin-top: 0px;
    }

    .css-caption-box {
        float: left;
        width: 120px;
        margin-top: 0;
        margin-right: 0.5em;
        text-align: center;
        font-weight: bold;
        font-size: 0.8em;
        color: #696969;
        background-color: #fffaf0;
    }
    
    .css-caption-box img {
        width: 100%;
        height: auto;
    }

細かい解説は，ここではしません．どこかの CSS リファレンスを参照してください．

HTML の例示

<div class="css-caption-block">
<div class="css-image-part">
<!-- 直接 画像のタイトルのテキストを記述する場合 -->
<p class="css-caption-box"><img src="image/DSC01252bd-1.JPG"
 alt="" />r & m Birdy</p>
</div>
<p>折り畳み自転車 BD-1．ぼくの相棒．
はじめての輪行してのサイクリングはこの自転車でした．
麦草峠，センチュリーラン笠間，いろいろなところを走りました．</p>
</div>
<div class="css-caption-block">
<div class="css-image-part">
<!-- 画像のタイトルは img の title にする場合 -->
<p class="css-caption-box"><img src="DSC01423-riding-sat.JPG"
 alt="" title="Sat R Day Recumbent" /></p>
</div>
<p>Bike Friday と言ったら Small Wheel Folding Bike のメーカです．
その Bike Friday のリカンベントが Sat R Day です．
他の Bike Friday が 451 もしくは 406 と呼ばれる 20
インチのホイールを使っているのに対して Sat R day はさらに小さい
346 と呼ばれる 16 インチホイールを使っています．</p>
</div>

</div>の前後の改行を省くと IE では，表示が変化することがあるようです．

Mozilla 0.9.7+ のレンダリング例(キャプチャー画像)

Mozilla 0.9.7+ のレンダリング例としてのキャプチャー画像

注意点

Internet Explorer は 2002 年 1 月の時点で，img:after {content: attr(title);} に対応していません．
Netscape Communicator 4.x は float: left; とかやるとめちゃくちゃになるようです．float 関係を別ファイルの css ファイルにして，メインの css ファイルから @import "ex1.css"; とするとその部分を読み込まないので，問題を回避できます．
Internet Explorer 5 とか Internet Explorer 6 は，HTML ソースの改行を変更すると期待していたのと違う表示結果になったりします．