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

特に難しいところはないでしょう。単に、画像をp要素で囲み、キャプションもp要素で囲み、その全体をdiv要素で囲んでいるだけです。 図解すると以下のような構造になっています。

HTMLソースの構造

ボックスをスタイルシートで装飾する

この「画像とキャプション」1セットに対して、スタイルシートで装飾を施します。

まずは、「横方向に並べる」という部分を忘れておいて、それ以外の装飾を記述しましょう。 ボックスそのものの装飾と、「画像とキャプション」それぞれに対する装飾です。

[1～2]：ボックスの枠線と背景色を指定。
[3～4]：画像とキャプションの配置を指定。
[5～6]：キャプション文字列の装飾を指定。

それぞれの記述内容を簡単に説明しておきます。

1. ボックスの枠線を指定しています。太さ1ピクセルで濃い青色（#0000cc）の破線（dashed）を引いています。
2. ボックスの背景色を指定しています。とても薄い青色（#eeeeff）です。
3. 画像とキャプションを共にセンタリング（中央寄せ）で表示させる指定です。
4. 画像の周囲・キャプションの周囲に、それぞれ5ピクセルの余白を設ける指定です。（隣接する余白は重なるので、画像とキャプション自体の間隔も5ピクセルになります。）
5. キャプションの文字サイズを指定しています。「80%」というのは「標準の文字サイズの8割の大きさ」という意味です。
6. キャプションの文字色を指定しています。濃い青色（darkblue）です。

上記の各装飾は、もちろん好みに応じて修正して構いません。
上記のスタイルシートで先ほどのHTMLを表示すると、以下のような感じになります。

ボックスに横幅を指定していないので横方向に大きく広がっていますが、今は気にしなくて構いません。 次に、このボックスを横方向にたくさん並べられるようスタイルシートを記述します。その段階で、横幅も指定します。

STEP2. ボックスを横方向に配置する方法へ >>