2008年10月24日

コメント付きの画像をCSSで横に並べてみる

今回はCSSを使って複数の画像を横に並べていってみましょう。参考にしたサイトはキャプション付き画像を横に並べて配置する - [ホームページ作成]All Aboutです。

さて、まず皆さんならどのようにしてウェブサイトに写真を横に順番に並べていきます?表組み(テーブル)を使っても構いませんが、横の幅が固定されてしまうのであまりお勧めできませんよね。とりあえずサンプルを作りましたのでご覧下さい。

サンプル(1)

コメント(1)

サンプル(2)

コメント(2)

サンプル(3)

コメント(3)

サンプル(4)

コメント(4)

サンプル(5)

コメント(5)

サンプル(6)

コメント(6)

All Aboutで紹介されている見本をそのまま使用すると、Another HTML-lint gatewayなどでは若干エラーが出てしまうので少し私なりにアレンジしてます。ついテーブルを使いたくなる人もいらっしゃるかもですが、私は最近これをコピペしてフル多用!!手抜き。^^;

▼CSS
div.imagebox {
border: 1px solid #5390d1;
background-color: #eeeeff;
width: 105px;
float: left;
text-align: center;
margin: 0.5em 3px 1em 3px;
}
p.image, p.caption {
text-align: center;
margin: 5px;
}
p.caption {
font-size: 80%;
color: #00008b;
}
p.clear {
clear: both;
}
▼HTML
<div class="imagebox">
<p class="image">
<a href="http://v0-0v.up.seesaa.net/image/member_l.gif"><img src="http://v0-0v.up.seesaa.net/image/member_s.gif" alt="サンプル(1)" width="90" height="90" /></a>
</p>
<p class="caption">
コメント(1)
</p>
</div>
<div class="imagebox">
<p class="image">
<a href="http://v0-0v.up.seesaa.net/image/member_l.gif"><img src="http://v0-0v.up.seesaa.net/image/member_s.gif" alt="サンプル(2)" width="90" height="90" /></a>
</p>
<p class="caption">
コメント(2)
</p>
</div>
<div class="imagebox">
<p class="image">
<a href="http://v0-0v.up.seesaa.net/image/member_l.gif"><img src="http://v0-0v.up.seesaa.net/image/member_s.gif" alt="サンプル(3)" width="90" height="90" /></a>
</p>
<p class="caption">
コメント(3)
</p>
</div>
<div class="imagebox">
<p class="image">
<a href="http://v0-0v.up.seesaa.net/image/member_l.gif"><img src="http://v0-0v.up.seesaa.net/image/member_s.gif" alt="サンプル(4)" width="90" height="90" /></a>
</p>
<p class="caption">
コメント(4)
</p>
</div>
<div class="imagebox">
<p class="image">
<a href="http://v0-0v.up.seesaa.net/image/member_l.gif"><img src="http://v0-0v.up.seesaa.net/image/member_s.gif" alt="サンプル(5)" width="90" height="90" /></a>
</p>
<p class="caption">
コメント(5)
</p>
</div>
<div class="imagebox">
<p class="image">
<a href="http://v0-0v.up.seesaa.net/image/member_l.gif"><img src="http://v0-0v.up.seesaa.net/image/member_s.gif" alt="サンプル(6)" width="90" height="90" /></a>
</p>
<p class="caption">
コメント(6)
</p>
</div>
<p class="clear">
ここで回り込みの解除を必ず指定します。
</p>

言うまでもありませんが、FLOATを使用してますので、最後は必ず回り込みを解除する必要があります。ちなみに、このリキッドレイアウトなら、ウインドウ幅(ページの横幅)に合わせ、ウェブページが重くならない範囲で20個でも50個でも写真(画像)をコメント付きで配置できるため、パターンを1度作って使い回しすると非常に重宝します。

ラベル:画像配置 CSS
posted by メガネ君 v0-0v at 14:36 | TrackBack(0) | Webサイト制作 | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。