HTMLとスタイルシート

私はIE8, Firefox3, Opera10, Safari4 (Windows版)で同じ結果を得ることを確認してから回答したのですが、「おかしな」画面とはどのようなものでしょうか。

上下の黒い線は要らないというのはわかりました。投稿された画像は白地に黒十字だったのですね。画像が表示される際の上下に隙間(黒く表示される)も画像に含まれると勘違いして、白地に「王」のような画像であると勘違いしました。(改訂版の例は下記の通りです。)

画像を使わなければ無理ということはありません。やろうと思えばできます。しかし、文章の構造をHTMLで示し、装飾をCSSスタイルシートで行うという本来の使い方からはかけ離れています。なぜ背景画像を使うのではいけないのか、なぜそのようなことをしなければならないのか、その理由によっては別の適切なやり方があるかもしれません。

---
<html>

<head>
<title>test</title>
<style type="text/css">
* { margin: 0; padding: 0; z-index: 1;}
body { background-color: #fff; }
div.background { position: absolute; z-index: 0; background-color: #000;}
#b1 { left: 60%; width: 10px; height: 100%; }
#b2 { top: 80%; width: 100%; height: 10px; }
div.container { position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
</style>
</head>

<body>
<div class="container">
<p>本文</p>
</div>
<div id="b1" class="background"></div>
<div id="b2" class="background"></div>
</body>

</html>

投稿日時 - 2010-02-11 01:07:21

お礼

ありがとうございました。repeat-yとpositionで解決できました。
やはり、背景は画像を使うべきですね。

投稿日時 - 2010-02-11 15:51:47

回答を評価する（0）

通報する

ANo.2

noname#137826

はい

2人が「このQ&Aが役に立った」と投票しています

[ 前へ | 次へ ]

ベストアンサー以外の回答（1件中　1～1件目)

ANo.1

noname#137826

やろうと思えばできますが(下記参照)、HTMLの本来の意味から言うと推奨されるものではありませんね。画像を作成して、それをcssで背景画像として指定すべきところです。

以下は、やろうと思えばできるという例です。バックグラウンドと言っても、画面全体に広がるものなのか、繰り返しなのか不明ですが、ここでは前者だとしています。

---
<html>

<head>
<title>test</title>
<style type="text/css">
* { margin: 0; padding: 0; z-index: 1;}
body { background-color: #000; }
div.background { position: absolute; z-index: 0; }
#b0 { top: 10px; bottom: 10px; width: 100%; background-color: #fff; }
#b1 { left: 60%; width: 10px; height: 100%; background-color: #000; }
#b2 { top: 80%; width: 100%; height: 10px; background-color: #000; }
div.container { position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
</style>
</head>

<body>
<div class="container">
<p>この行は背景に重なった部分が見えにくいです。</p>
<p>div.container で top: 10px; とすれば見えるようになります。</p>
</div>
<div id="b0" class="background"></div>
<div id="b1" class="background"></div>
<div id="b2" class="background"></div>
</body>

</html>

投稿日時 - 2010-02-10 23:22:58

補足

<html>

<head>
<title>background</title>
</head>
<style>
body
{
background-color:white;
}

P.1{

background-color:black;
height:30PX;
margin-top:450px;
}

</style>
</head>

<body>

<P class="1"></p>

</body>

</html>

ここまでは自分でかけたのですが（厳密には背景でないかも）これに縦方向に
黒い30pxの幅の縦線を入れることは画像を使わなくては無理ですか。