【ホームページ作成】キャプション付き画像を横に並べて配置する

アルバムのように、画像にキャプションを付加。
しかも、横方向に並ぶだけたくさん並べたい！

写真をたくさん掲載したい場合、単に写真だけを並べるのではなく、何か一言タイトルやコメントを書いておきたいと思うことがあります。

画像だけを横に並べるのはとても簡単ですが、「画像とキャプション」を1セットにして、複数のセットを横方向に配置するにはどうすれば良いでしょうか？

表組み（テーブル）を使う方法もありますが、横方向に並ぶ個数（＝列数）が固定されてしまうデメリットがあります。 ここはやはり、閲覧者のウインドウ幅に合わせて、横方向に並ぶ個数が自動的に変化する「リキッドレイアウト」が望ましいでしょう。 例えば、下図のように。

スタイルシートを使ってレイアウトを作れば、こんなことも簡単に実現可能です。 今回は、「キャプション付き画像」を、横方向にリキッドレイアウトで並べる方法をご紹介いたします。

目次

• STEP1：画像とキャプションのセットボックスを作る
• STEP2：ボックスを横方向に配置できるようレイアウトする
• STEP3：上下左右のボックスとの距離を調整する