ホームページ作成/レイアウトの作成・調整 (HTML,CSS)

キャプション付き画像を横向きに並べて配置する方法(4ページ目)

アルバムのように、キャプション(タイトル名)を加えた画像を横方向にたくさん並べてみましょう。横に並ぶ数を指定せず、ウインドウサイズに応じて自動的に配置される「リキッドレイアウト」で実現する方法をご紹介。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

3. 隣り合うボックス同士の間隔を調整する

ボックス間の上下左右の間隔を調整するには、ボックスのマージン(=外側の余白)量を指定します。以下のようにスタイルシートを追記します。
div.imagebox {
   border: 1px dashed #0000cc; /* 枠線 */
   background-color: #eeeeff;  /* 背景色 */
   width: 130px; /* 横幅 */
   float: left; /* 左に配置 */
   margin: 5px; /* 周囲の余白 */
}
「margin」プロパティは「外側の余白」を指定するプロパティです。値として「5px」を指定すれば、周囲(上下左右それぞれ)に5ピクセルの余白が設けられます。このスタイルシートを使って表示させると、下図のように見えます。ここでは、ボックスを4つ掲載しています。実際にブラウザで表示を確認するには、サンプルページ4をご覧下さい。

間隔を空けてボックスを4つ並べたところ (横に並ぶ個数は描画領域の横幅次第)

間隔を空けてボックスを4つ並べたところ (横に並ぶ個数は描画領域の横幅次第)


これで、隣り合うボックス同士に適度な間隔が空き、見やすくなりました。

画像群の末尾で、後続の文章が回り込んでしまう

「float」プロパティを使ってボックスを左へ寄せているため、このままだと、下図のように画像群の後に続く文章も、画像の右側に回り込んでしまいます。実際にブラウザで表示を確認するには、サンプルページ5をご覧下さい。

回り込み解除の記述がない場合は、このように表示されてしまう。

回り込み解除の記述がない場合は、このように表示されてしまう。


このような表示になるのを防ぐには、末尾に「回り込みを解除する記述」を加えておく必要があります。最後に、ボックス群の末尾で回り込みを解除する方法をご紹介いたします。
  • 前のページへ
  • 1
  • 3
  • 4
  • 5
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます