レイアウト
横並び
画像を単に横に並べるだけであれば、p要素の中に改行なしでimg要素を複数並べるなどHTMLの範疇なので比較的容易であるが、画像とその見出しやキャプションととしてテキストをセットで横並びにするためには、CSSでレイアウトを行う必要がある。
例えば以下のように、画像と文章をグループで横並びにしたい場合である。
figure要素を利用する
良い方法は、figure要素というキャプションの図などを示すための要素を利用することである。
figure要素は横並びの場合だけではなく、画像などにキャプションを付ける際に利用される。
HTMLでは、画像と文章をfigureで囲み、class名を指定する（以下の 。class名は任意）。キャプションの文章は（p要素ではなく）figcaption要素とする（以下の ）。
<body>
<h1>家の近くに咲いていた花</h1>
<h2>庭</h2>
<figure class="gazo-box">
<img src="north_pole.jpg" alt="ノースポールの画像" width="320" height="240">
<figcaption>ノースポール</figcaption>
</figure>
<figure class="gazo-box">
<img src="tanpopo.jpg" alt="たんぽぽの画像" width="320" height="240">
<figcaption>たんぽぽ</figcaption>
</figure>
<h2>道端</h2>
<p>○○○○</p>
</body>
CSSでは、グループに利用したfigure要素にfloat: leftを指定する（以下の ）。
float: leftを指定したボックスが（通常の表示から独立し）左に移動し、以下、横並びに表示される。
float: leftを指定した以降、後続する要素が全て横に並ぶので、横並びを解除したい要素に、clear: bothを指定する（以下の ）。
h1 {
font-size:1.75em;
color:#333333;
}
h2 {
clear: both;
}
figure.gazo-box {
float: left;
padding-right: 20px;
}
div要素を利用する
figure要素ではなくdiv要素を利用する（キャプションはp要素とする）方法もあるが、旧来の方法である。
HTMLでは、画像と文章をdiv要素で囲み、クラスを指定する（以下の 。class名は任意）。
<body>
<h1>家の近くに咲いていた花</h1>
<h2>庭</h2>
<div class="gazo-box">
<p><img src="north_pole.jpg" alt="ノースポールの画像" width="320" height="240"></p>
<p>ノースポール</p>
</div>
<div class="gazo-box">
<p><img src="tanpopo.jpg" alt="たんぽぽの画像" width="320" height="240"></p>
<p>たんぽぽ</p>
</div>
<h2>道端</h2>
<p>○○○○</p>
</body>
CSSでは、グループに利用したdiv要素にfloat: leftを指定する（以下の ）。
float: leftを指定したボックスが（通常の表示から独立し）左に移動し、以下、横並びに表示される。
float: leftを指定した以降、後続する要素が全て横に並ぶので、横並びを解除したい要素に、clear: bothを指定する（以下の ）。
h1 {
font-size:1.75em;
color:#333333;
}
h2 {
clear: both;
}
div.gazo-box {
float: left;
padding-right: 20px;
}