まとまりのないブログ

something which something is something

css

HTML要素自体にCSSを適用する

投稿日:

HTMLのスタイルシートについて、今までHTML要素とbody要素には特にスタイルシートを設定することは意図的に避けていたが、適用するとまずいこととかあるのだろうか。そういうことをしている人があまりいないというのもあって、そういうものというかbody要素の中の要素に対してだけスタイルシートを当ててデザインするのが当たり前だと思っていた。body要素にはせいぜいmargin:0;padding:0;という設定をするぐらい。

で、HTML要素とBody要素にcssを適用してレイアウトしてみたらどうなるか試してみた。


<html>
<head>
<title>css テスト</title>
<style>
html{background-color:#000;padding:0;margin:0;}
body{background-color:#fff;width:700px;margin:20px auto;padding:0;}
h1{background-color:#ccc;}
</style>
</head>
<body>
<h1>CSS テスト</h1>
</body>
<html>

テストしてみたところ、上の画像とソースのように特に問題はなさそうに見える。これでいいのなら今度からhtmlt要素とbody要素にもcssを適用していこうかと思う。div要素が一つ減らすことがきてソースが簡潔になるし。ただやってる人がいなさすぎて大丈夫かなというのはあるが、多分大丈夫だろう。

-css

執筆者:


comment

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

関連記事

no image

apache2のgzip圧縮によるレスポンス改善

googleのウェブマスターツールでgzipで圧縮するとファイルサイズが半分になる,とアドバイスされたが,6KBのCSSファイルが半分の3KBになったところでどれだけ効果があるのかねぇ・・・と半信半疑 …

no image

a要素の記述 その順番

a要素のスタイルを記述する場合には、 a:link a:visited a:hover a:active という順番で記述しなければならない。そうしないと記述通りに表示がされない模様。例えばa:vis …

no image

internet explorer6で印刷プレビューした時に背景画像が表示されない

背景画像を表示させる要素に、スタイルシートでwidthまたはheightの値を設定してあげなければ印刷プレビューした時に画像が表示されなくなってしまう。firefoxやopera、ie7では問題はなか …

no image

JavaServerPage においてCSSのmedia=print が働かない現象について

JSPにて表示するウェブページのスタイルシートを別途プリント用のスタイルシートを用意して適用させてみようとテストしたところ,表示されないという現象があった。下記のような感じで記述をしてみたのだが,どう …

no image

internet explorer 向けのcss hack情報

リンク集のようなもの 参考サイト 【特集】正式版完全対応! Internet Explorer 7 CSS攻略法 (16) 04-02 CSSハックの利用(1) | クリエイティブ | マイコミジャー …