ここから本文です

HTMLでbodyとbodyの一番上から一番下までくくってあるcontainerという名前がつくこ...

e_w********さん

2012/6/1721:50:38

HTMLでbodyとbodyの一番上から一番下までくくってあるcontainerという名前がつくことがよくあるdivタグの差がわかりません。

教えてください!
よろしくお願いします!



<body>
<div id="container">

~~~
~~~~
~~~~~

</div>
</body>

閲覧数:
35,945
回答数:
2
お礼:
25枚

違反報告

ベストアンサーに選ばれた回答

dob********さん

2012/6/1815:15:17

レイアウト目的のdivです。
違いといっても使ってみるとすぐ解ると思いますが
例えばbodyにwidthを直接指定する事ってあまり無いですよね。


あまり良い例じゃないけど
-------------------------
条件)
ページの背景は赤
内容物の背景を白、
なおかつ横幅940pxで横位置中央配置する場合

-------------------------
#containerを使わなかった場合
html
<body>
<div id="header">ヘッダー</div>
<div id="navi">ナビゲーション</div>
<div id="contents">ページの内容</div>
<div id="footer">フッター</div>
</body>

css
body{background:#f33;}
#header,#navi,#contents,#footer{width:940px;margin:0 auto;background:#fff;}
-------------------------
#containerを使ったら
html
<body>
<div id="container">
<div id="header">ヘッダー</div>
<div id="navi">ナビゲーション</div>
<div id="contents">ページの内容</div>
<div id="footer">フッター</div>
</div>
</body>

css
body{background:#f33;}
#container{width:940px;margin:0 auto;background:#fff;}


他にも
#header,#navi,#contents,#footerそれぞれの上下にborderが入る場合
containerがなければ位置調整はpaddingしか使えないですよね
そもろも内容物部分の背景がページ上部から下部にかけての長いグラデーションにしたかった場合
#container的なdivを使わずに実装するのは面倒臭かったりします。

質問した人からのコメント

2012/6/18 18:42:52

とてもわかりやすい回答ありがとうございました!
おかげさまで解決しました!

ベストアンサー以外の回答

1〜1件/1件中

ycc********さん

2012/6/1723:21:09

divは特に意味がないグループ化をするために使うもので、そのグループを操作するときの目印などとしてidを付けます。
idは識別子なので、そのページでそいつを特定できればいいわけです。だから同じ名前のidは1つのページに1つだけ。
ページ内に同じ名前がなければ
<div id="container">〜〜〜</div>
でも
<div id="dasklflkasdgajsddlkf">〜〜〜</div>
でも
<div id="div00000001">〜〜〜</div>
でも問題ないです。

ただ、ID名を変更して、そのIDを使用しているCSS、JavaScript側のコードがあればその点を書き換えないといけません。

あわせて知りたい

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる