- ベストアンサー
HTMLとスタイルシート
HTMLとスタイルシート HTMLとスタイルシートで添付したようなバックグラウンドを作りたいのですが、 （ペイントで作ったので少し汚いですが） 一番簡単なコードを教えてもらえますか。 縦と横に黒い線のようなバックグラウンドです。 画像を使わなくては無理でしょうか。 よろしくお願いします。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
私は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>
その他の回答 (1)
やろうと思えばできますが(下記参照)、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>
お礼
ご回答ありがとうございます。書いてもらったコードをhtmlに拡張子を直してみたところ、 なんだかおかしな画面になってしまいました。 今私が張った画像を見たら、少し違っていて、上と下の黒い線はなくてもいいです。 やはり画像を使うべきですか。
補足
<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の幅の縦線を入れることは画像を使わなくては無理ですか。
お礼
ありがとうございました。repeat-yとpositionで解決できました。 やはり、背景は画像を使うべきですね。