写真の上0pxにタイトルバーをhtmlで作りたい

質問

HTMLで写真の真上にhtmlで作った色付き棒の中に文字を表現したいです。
それを３列ずつ複数行作成したいです。

・写真と写真の横幅の間は30pxあける。
・上下は50pxあける。
・ウインドウ幅の中央に常に表示
・ウインドウが写真よりも狭くなってもレイアウトが崩れない

このようにしたいと思って、自分で作ってみましたが、
まったくうまくできませんでした。
どのようにすればいいのか教えて下さい。
よろしくお願いいたします。

～～～～～～　HTML　～～～～～～～

<link href="aa.css" rel="stylesheet" type="text/css" />

<div class="aaa"><!-- と汎用ブロックで囲んで -->
<div class="bbb">いのしし<div>
<div class="bbb">たつ<div>
<a href="" ><img src="" alt="" width="350" height="270" /></a>
<a href="" ><img src="" alt="" width="350" height="270" /></a>
<div class="ccc">うさぎ<div>
<div class="ccc">とら<div>
<div class="ccc">たぬき<div>
<a href="" ><img src="" alt="" width="232" height="166" /></a>
<a href="" ><img src="" alt="" width="232" height="166" /></a>
<a href="" ><img src="" alt="" width="232" height="166" /></a>
</div>

～～～～～～　CSS　～～～～～～～

@charset "Shift_JIS";

a img{
border:none;
}
div.aaa{
margin-top:0px;
width:760px;
margin-left:auto;
margin-right:auto;
text-align:center;
}

div.bbb{
background-color: #ffcc66;
width: 350px;
height: 30px;
}

div.ccc{
background-color: #ffcc66;
width: 232px;
height: 30px;
font-size: 20px;
font-color:
}

回答No.1

metametamu · ベストアンサー

まずhtmlの方をすっきり簡単にしましょう。
今回は写真の一覧なので、ulタグを使います。
liタグの中にタイトルの文字と画像を入れます。

<div id="Gallery">
<ul>
<li>うさぎ<a href="" ><img src="" alt="" width="350" height="270" /></a></li>
<li>うさぎ<a href="" ><img src="" alt="" width="350" height="270" /></a></li>
<li>うさぎ<a href="" ><img src="" alt="" width="350" height="270" /></a></li>
<li>うさぎ<a href="" ><img src="" alt="" width="350" height="270" /></a></li>
<li>うさぎ<a href="" ><img src="" alt="" width="350" height="270" /></a></li>
<li>うさぎ<a href="" ><img src="" alt="" width="350" height="270" /></a></li>
</ul>
</div>

cssの方ではまずブラウザの初期の余白を消します。

#Gallery,
#Gallery * {
margin: 0;
padding: 0;
}

横に並べるのにfloatを使います。今回はli要素に指定します。
floatを使う時はwidthとdisplay:inline;を一緒に指定します。
さらに横に並べた時の余白と背景色もここで指定します。余白は上と左に指定して間隔を取っていきます。
下の分の余白をul要素に指定します。(省略できる右への指定は省きます。)
floatは本来clearしなければならないのですが、上手く指定できる要素が無いので代わりにul要素にoverflow:hidden;を指定します。

#Gallery,
#Gallery * {
margin: 0;
padding: 0;
}

#Gallery ul {
overflow:hidden;
padding-bottom: 50px;
}

#Gallery ul li {
display: inline;
width: 350px;
float: left;
margin: 50px 0 0 30px;
background: #ffcc66;
}

基本的にインラインボックスはバグが起こりやすかったり、デザインの統一が取りにくいので画像周りはブロックボックスにします。
ついでにリンク画像のボーダーも消します。

#Gallery,
#Gallery * {
margin: 0;
padding: 0;
}

#Gallery ul {
overflow:hidden;
padding-bottom: 50px;
}

#Gallery ul li {
display: inline;
width: 350px;
float: left;
margin: 50px 0 0 30px;
background: #ffcc66;
}

#Gallery ul li a,
#Gallery ul li img {
display: block;
border: 0;
}

最後に全体をセンタリングします。
margin: auto;でのセンタリング時には幅を指定する必要があります。幅は余白を含めると1170pxです。
古いIEはtext-align:center;のバグを利用してセンタリングします。この指定でついでにタイトル文字もセンタリングできます。

#Gallery,
#Gallery * {
margin: 0;
padding: 0;
}

#Gallery {
text-align: center;
}

#Gallery ul {
width:1170px;
margin:auto;
overflow:hidden;
padding-bottom: 50px;
}

#Gallery ul li {
display: inline;
width: 350px;
float: left;
margin: 50px 0 0 30px;
background: #ffcc66;
}

#Gallery ul li a,
#Gallery ul li img {
display: block;
border: 0;
}

完成です。

お礼

バッチシです。
丁寧な解説とご指導有難うございました。