TGWS>HP作成論>

画面幅によって横並びと縦並びを切り替える

だめサンプル

<!-- ↓float:leftな画像 -->
<img src="psiball.png" alt="[画像]" style="float:left;">
<!-- ↑float:leftな画像 -->
<!-- ↓何かコンテンツ -->
<p>~中略~</p>
<!-- ↑何かコンテンツ -->

floatで浮かせた画像の横に解説文を置いておくという、割とよく見かけるスタイルのレイアウトです。
しかし、画像が大きくて画面が狭いと、解説文の幅が狭くなって、その文ものすごく縦に細長い読みにくいページになってしまうわけです。
画面幅の大部分が画像で占められてしまうとき、解説文は画像の下に出したいところです。

そこで、HTMLとCSSをちょっと工夫して、空いた部分が一定未満の割合(今回は空き40%)になると解説文が下に出るようにしてみます。
次のように、2つのdiv要素を追加するのです。

いいサンプル

<!-- ↓float:leftな画像 -->
<img src="psiball.png" alt="[画像]" style="float:left;">
<!-- ↑float:leftな画像 -->
<!-- ↓一定割合未満で強制的に行送り -->
<div style="width:40%;height:0;margin:0;float:right;"></div>
<div style="width:0;height:0;clear:right;"></div>
<!-- ↑一定割合未満で強制的に行送り -->
<!-- ↓何かコンテンツ -->
<p>~中略~</p>
<!-- ↑何かコンテンツ -->

要するに、float:rightで必要に応じて行送りさせ、clear:rightで行送りを確定させるわけです。