5/5 キャプション付き画像を横向きに並べて配置する方法 [ホームページ作成] All About

ボックス群の末尾で回り込みを解除する

回り込みを解除するには、「clear」プロパティを使います。例えば、下記のHTMLとスタイルシートを、ボックス群の最後に記述すると、「後続の文章……」の直前で回り込みが解除されます。

<p style="clear: left;">
   後続の文章………
</p>

これによって、下図のように表示されます。実際にブラウザで表示を確認するには、サンプルページ6をご覧下さい。

回り込みを解除して、後続の文章をボックス群の下部に配置したところ。

clearプロパティに値「left」を指定すると、「左側に寄せることで後続を右側に回り込ませているレイアウト」の回り込みを解除できます。「right」を指定すると、「右側に寄せることで後続を左側に回り込ませているレイアウト」の回り込みを解除できます。「both」を指定すると、両方の回り込みを解除できます。従って、ここでは、「left」または「both」と指定すれば良いことになります。

キャプション付き画像を横向きに並べて配置するサンプル

キャプション付き画像を横向きに並べて配置するサンプルページ

写真を12枚並べたサンプルページを用意しました。ウインドウ幅を変化させると、横一列に表示される画像数も変化します。ブラウザでの表示確認や、具体的なページ全体の記述方法の参考にして下さい。ソース中には簡単なコメントも加えてあります。

ボックスを並べたサンプルページ

ウインドウ幅を様々に変化させてみて、ボックスの並びがウインドウ幅に合わせて変化することを試してみて下さい。

inline-blockを使って横方向に並べる方がやや楽

今回は、floatプロパティを使ってボックスを横方向に並べる方法をご紹介いたしました。しかし、displayプロパティにinline-blockを指定して「ブロックレベル要素をインライン要素のように並べる」デザインの方が、回り込みの解除が不要なので楽かもしれません。inline-blockはIE7以前の古いブラウザでは使えませんでしたが、もはやIE7以下を気にする必要はないでしょうから問題なく使えます。

inline-blockを活用する方法は、例えば記事「ul要素で作るリストを、横向きメニューに装飾する方法」などで解説しています。ぜひご参照下さい。