関西大学大学院 総合情報学研究科 博士課程にて情報学を学ぶ傍ら、ホームページに関する書籍の執筆や企業…
デジタル関連コミュニティ
北欧好きが、愛用の北欧モノを見せ合うコミュニティ
ホームページ作成
【ホームページ作成】キャプション付き画像を横に並べて配置する
レイアウトの作成・調整 (HTML,CSS)
更新日：2007年05月02日
キャプション付き画像を横に並べて配置する
アルバムのように、キャプション(タイトル名)を加えた画像を横方向にたくさん並べてみましょう。横に並ぶ数を指定せず、ウインドウサイズに応じて自動的に配置される「リキッドレイアウト」で実現する方法をご紹介。
ボックス群の最後で回り込みを解除する
回り込みの解除を記述しなかった場合は、以下のように表示されてしまいます。
砂浜と海と空
富良野の平原
このように、ボックス群の後に続く文章も、ボックスの右側に回り込んでしまいます。 このようなレイアウトで構わない場合はそのままで良いのですが、たいていそれでは困るでしょう。 画像群の最後で、回り込みを解除する必要があります。
回り込みを解除するには、clearプロパティを使います。
以下のHTMLとスタイルシートを、ボックス群の最後に記述すると、「後続の文章…」の直前で回り込みが解除されます。
<p style="clear: left;">
後続の文章………
</p>
後続の文章………
</p>
clearプロパティに値「left」を指定すると、「左側に寄せることで後続を右側に回り込ませているレイアウト」の回り込みを解除できます。
「right」を指定すると、「右側に寄せることで後続を左側に回り込ませているレイアウト」の回り込みを解除できます。
「both」を指定すると、両方の回り込みを解除できます。（ここでは、「left」または「both」と指定すれば良いことになります。）
具体的なページ全体の記述方法は、先ほども示したボックスを並べたサンプルページのHTMLソースをご参照下さい。ソース中に簡単なコメントを加えてあります。
おわりに
今回は、アルバムページなど、たくさんの写真をキャプションと共に掲載する際に便利なレイアウト方法をご紹介いたしました。 ぜひ、ご活用下さい。
【関連記事】
この記事の担当ガイド
関連キーワード[PR]
住まいには、人の個性がよく現れるもの。同じ空間をどのように使うかで、雰囲気も、快適さも大きく変わってくる。ここでは、「建築家と家を建てる」ガイド の川畑博哉氏が厳選した10軒を紹介し、建築家それぞれのこだわりのポイントを紹介しよう。建築のプロたちが考え出した、マネしたくなるアイデアが満載！ さぁ、いますぐチェック！
人気ホームページ作成ランキング
Powered by 価格.com
関連キーワード[PR]
関連キーワード[PR]
メルマガ登録
【デジタルメルマガ】オトナのオトコなら知っておきたい、PCやデジモノに関する情報をお届けします。
おすすめ厳選サイト
季節特集
専門家を探せる、相談できる。
All About モバイル
