まとまりのないブログ

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

internet explorer 向けのcss hack情報

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

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

html5でcanvas要素の下部に7pxのマージンが発生してしまう件

htmlのレンダリングに関することで、canvas要素を3つほど連続して配置したときに謎の空白が下部に発生するのを確認した。意味がわからないのは、<!DOCTYPE html> を文書先頭 …

no image

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

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