スタイルシートは難しい、、、

質問

テーブルデザインよりスタイルシートに挑戦しているものです。
素人なりに下記のソースを作成してみたのですがもっとスマートなソースはどのようなものになりますか？
作りたいものは三枚の画像を使い上部、中部、下部で
一つのわくのなかに文字（この場合h1、h2、p要素）を表示させたいです。しかしこの場合、それぞれの要素にマージンを指定しないと画像の先端と重なってしまいます。divに空きを指定すると背景画像で指定した中部がずれてしまいました、、、

<div class="test">
<img src="top.gif" height="30" width="500" alt=""><BR>
<h1>あいうえお</h1>
<h2>あいうえお</h2>
<h3>あいうえお</h3>
<p>あいうえお</p>
<p>あいうえお</p>
<img src="bottom.gif" height="30" width="500" alt=""></div>

.test {
width:500px;
background-image: url(middle.gif);
background-repeat:repeat-y;
}

回答No.3

ao_

補足をお願いします。
＞それぞれの要素にマージンを指定しないと画像の先端と重なってしまいます。
とありますが、具体的にどの要素のどの方向にマージンが必要なんですか？また、画像の先端とは画像のどの部分ですか？画像がないので最終的にどのようなデザインにしたいのかわかりません。
まず、1つの画像を3つに分ける理由から教えていただけませんか？

回答No.2

HappyDaysRarara

ちょっと邪道かもしれませんが、以下の様な感じでできないでしょうか…

<div id="top"></div>
<div id="content">
<h1>あいうえお</h1>
<h2>あいうえお</h2>
<h3>あいうえお</h3>
<p>あいうえお</p>
<p>あいうえお</p>
</div>
<div id="footer"></div>

h1, h2, h3, p, div {
margin: 0px; padding: 0px;
}
p {
padding-bottom: 10px; }
#top {
height:30px; width:500px;
background: url(top.gif) no-repeat;
}
#content {
margin: 0px; padding: 10px;
width:500px;
background: url(middle.gif) repeat-y;
}
#footer {
height:30px; width:500px;
background: url(footer.gif) no-repeat;
}

これだと、スタイルシートが効かない場合、画像は全く表示されません。
しかし、上下の画像も意味の無いただの飾りなら、情報は伝わると思われます。

回答No.1

UKY

まず、根本的な考え方が間違っています。

HTML では文章のみを記述し、デザインに関する一切は全てスタイルシートで行うのです。(文章と見た目の分離)
ご質問にある例では三つの画像を組み合わせることで一つのデザインができるはずなのに、三つのうち二つが HTML に、一つがスタイルシートにあり、情報が分散してしまっています。これでは絶対にうまくいきません。
文章と見た目の分離がちゃんと行われていれば、三つの画像に関する情報はすべてスタイルシートに書かれているはずです。

もう一つの間違いは、テーブルデザインでやっていたことをスタイルシートで (正確には CSS で) 再現しようとしていることです。
テーブルデザインでできたことがすべて CSS でもできるとは限りません。
例えば (今回の質問のように) 複数の画像を組み合わせて枠を作るということはテーブルデザインではよく行われていましたが、今の CSS ではこのようなことはできません。(なぜできないのかという理由はここでは割愛します)
できないことを無理やりやろうとして悪戦苦闘していては「スタイルシートは難しい、、、」というのも当然でしょう。

はっきり言って、今の CSS のデザイン能力はテーブルデザインに劣ります。それでもなぜスタイルシートが勧められるのかというと、文章と見た目の分離による作業能率の向上、アクセシビリティの向上などのメリットがあるからです。
CSS でテーブルデザインよりもかっこいいデザインが出来ると思っているならそれは間違いです。CSS でできるのは「賢い」デザインです。