• ベストアンサー

bodyにidをつける理由は何ですか？

お世話になっています。 スタイルシートを勉強している者です。 いろいろなサイトのソースを見て疑問に思ったんですが、 下記のようにbodyタグにidやclassをつけているサイトがありました。 <body class="indexPage"> トップページにidを指定し階層ページには指定しないサイトもあれば、 トップページ、階層ページともそれぞれidを指定しているサイトもありました。 あとはどちらにもつけていないものもありました。 bodyにつけるスタイルは何が目的なんでしょうか？ 背景画像でしょうか？ ならば<body>下の<div id="wrapper">に指定すればいいのかなぁと思ったんですが… 何が利点なのか教えてください。。 よろしくお願いします！

  • HTML
  • 回答数4
  • ありがとう数6

質問者が選んだベストアンサー

  • ベストアンサー
回答No.2

ページごとにスタイルを変えたい場合bodyにidをつけておくと、少し程度のレイアウトの違いなら簡単に同じcssを使いまわすことができます。 /* 共通部分 */ a:hover { color:red; } /* 個別指定 */ body#hoge1 div { width:600px; } body#hoge2 div { width:500px; } 2つのページで同じスタイルシートを適用しても、bodyのidによって幅が変わります。 あと考えられる可能性としてはハックくらいしかないと思います。

tinyfuture
質問者

お礼

ご回答いただきありがとうございました。

その他の回答 (3)

  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.4

複数のページでスタイルシートやjavascriptを共用する場合に、グループ分けしたり一意付けるためにclassやidを付ける事はあります。 ページ単体で考えた場合は付ける必要性はないかと思います。

tinyfuture
質問者

お礼

ご回答いただきありがとうございました。

回答No.3

Web標準の文法としては、スタイルシートを目的としたタグの追加はよくありませんので、 特に意味もなく<div>を追加するのではなく <body id="wrapper">で可能なのであれば、<body>だけの方がいいです。

tinyfuture
質問者

お礼

ご回答いただきありがとうございました。

  • Chary_spy
  • ベストアンサー率40% (75/183)
回答No.1

意味なんか無いですよ。と言うのも正解。 意味はちゃんと有り・・と言うのも正解。 その程度の話です。ＤＯＭはご存知かと思いますが、スクリプト的にアクセスする場合、階層構造でアクセスするのと、ユニークなＩＤでアクセスする方法とありますが、実はＩＤは重複していても問題ありません。プログラマーが、アクセスしやすいように設計すればいいだけの話です。 例えばＩＤを引数にして、ＩＤでオブジェクトを取得して、戻り値を最初の子オブジェクトであるようなFuncitonを作った場合、BodyにIDを付けてもおかしくありませんよね。

tinyfuture
質問者

お礼

ご回答いただきありがとうございました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • ■divにid指定して子供タグに適応(ソース付)

    みなさん、よろしくお願いします。 上の段と下の段を表示上同じ結果にしたいと思います。 現在、上の段のようにdivタグ以下の全てのタグに、GrayMojiを 指定しています。 本番のソースでは、これが大量にあるので、簡潔に書きたいと思っています。 そこで、下の段のように、１つだけidを指定しただけで、divタグに含まれている 全タグにGrayMojiを適応させたいと思っています。 でも、このソースでは、同じ結果が得られません。 どのようにすれば、良いかアドバイスをいただけないでしょうか。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> <!-- a:link{ color: #0033EE;} #GrayMoji {color: #666666;} --> </style> </head> <body> <div> <a id="GrayMoji" href="main/about.html">div-AタグClass</a> <p id="GrayMoji">div-pタグClass</p> </div> ------------------------------------ <div id="GrayMoji"> <a href="main/about.html">divタグClass-A</a> <p>divタグClass-p</p> </div> </body> </html>

    • ベストアンサー
    • HTML
  • mozillaで背景が表示できない

    mozillaでbodyの背景色Aを指定しdiv(1)に別の背景色Bをidで指定すると表示されますが そのdiv(1)の中にdiv(2)を入れidまたはclassを指定すると背景色Bが表示されなくなってしまいます。 ■色々と試してみました ie6では問題なく表示されます。 div(1)の中に複数divを入れた場合、やはり表示されませんが div(1)の閉じタグ</div>の前に&nbsp;(他の文字ではダメでした)を入れた場合、一部のdivに対してだけ背景が適用されました。 ＃適用されない部分のソースに間違いがあるのではとソースを入れ替えてみましたが、やはり適用されない部分は適用されないままでした。 div(2)のidまたはclassを指定しない場合は想定どおり表示されます。 上記を踏まえ、div(2)をidまたはclassを指定しないdivで囲ってみましたが、やはり適用されませんでした。 長々とわかりにくい説明で申し訳ございませんが、 どのようにしたらdiv(1)の背景を表示させられますか？ アドバイス等思いついたことでも構いません。 結構試しましたが手詰まり状態なのです(T_T よろしくお願いします。 <body> <div id="zentai"> aaa </div> </body> bodyに背景色A、zentaiに背景色B 結果：OK <body> <div id="zentai"> <div id="nakami"> aaa </div> </div> </body> bodyに背景色A、zentaiに背景色B 結果：NG bodyに背景色A、zentaiに背景色B、nakamiに背景色B 結果：nakamiのみ背景色が適用される

  • ページのトップへ戻るためのidの仕込み方

    ページのトップに戻るidを設定したいと思っています。 ただ、その中に要素を配置したくないので、以下のように考えています。 <body>すぐ下に <div id="pagetop" style="display: none;"></div> (1)空タグはまずい、と聞きますが、これではよくないのでしょうか？そして、なぜまずいのか、もよくわからない次第で…。お分かりでしたらお教えください。 (2)また、display: none;と書くのはSEO的にはどうですか？ どうぞ、よろしくお願いします。

    • ベストアンサー
    • HTML
  • HTMLのidについて

    タグは独学なので基本的な質問ですが宜しくお願いします。 例えば、<div id="○○">～</div>の使い方ですが、「id」は同一ページ上に１回だけ使えるというルールは理解していますが、同じサイトでも異なるページであれば同じ「id="○○"」と書いて、「css」で指定する事は文法上、あるいは構造指定という観点からでも間違いではないのでしょうか。 要は「class」で指定しておけば問題ないのですけれども。 基本的すぎる質問ですが、回答宜しくお願いいたします。

    • ベストアンサー
    • HTML
  • レイアウトが崩れないようにするための、<div>を<div>で囲む理由

    <div class="a">で一度幅や高さの指定をしているのに、ウインドウサイズを変更しても、レイアウトが崩れないようにするために、その<div>からさらに<div>で囲むのはなぜなんでしょうか？ <div id="wrapper"> 　<div class="a"></div> </div> div.a { width:900px; } #wrapper{ width:900px; }

    • ベストアンサー
    • HTML
  • css　で背景のリピート設定についておしえてください。

    css　で背景のリピート設定についておしえてください。 htmlもcssも初心者で初めてホームページの制作をしています。 タグをコピーします。 <body> <div id="header"> </div> 　　　<div id="globalnavi"> 　　<ul> <li id="menu"><a href="#">メニュー</a></li> <li id="menu"><a href="#">メニュー</a></li> <li id="menu"><a href="#">メニュー</a></li> 　　　</ul> 　　</div> 　</div> <div id="haikei_repeat"> <div id="content1"> <div class="inner_top"></div> <div class="inner_repeat"> ここにテキスト </div> <div class="inner_bottom"></div> </div> <div id="body_right"> <div class="inner_top2"></div> <div class="inner_repeat2">ここにもテキスト</div> <div class="inner_bottom2"></div> </div> </div> </body> bodyにも背景画像を使い、ヘッダ以下の コンテント部分の<div id=haikei_repeat> にy方向にリピート画像を指定しました。 <div id="haikei_repeat"> の中にある、 div classにもそれぞれ背景画像をしていし、topとbottomはリピートさせず、 真ん中のinner_repeatのみ背景画像をリピートしています。 このdivにテキストやimgを挿入し、後ろのhaikei_repeatもinnerrepeatの大きさに合わせて縦に リピートしてほしいのですが、うまくできません。 <div id="haikei_repeat">と <div id="inner_repeat">のボックスサイズは 横は指定し、縦のみauto　にしています。 inner_repeatはきちんと内容の量にあわせてレピート表示できていますが、 背景リピートはできていません。 どのようにしたらいいでしょうか？？？ どなたかおねがいします。

    • ベストアンサー
    • HTML
  • javascriptでid要素の取得について

    お世話になります。 最近、javascriptの勉強を始めたたのですが、 以下の違いがよくわかりません。 ------------------------------------------------------- <html> <head><title>Test</titile></head> <body> <div id='wrapper'></div> </body> </html> <script language='javascript'> function aaa() { document.getElementById("wrapper").style.display = "none";//---(1) wrapper.style.display = "none"; //---(2) } </script> (2)は、document等省略してますが、その違いは無視して 頂ければと思います。 (1)でわざわざgetElementByIdを使用してid要素を取得 するメリットがわかりません。 初心者の質問で申し訳ありませんが、よろしくお願い致します。

  • ウインドウを小さくするとbody上部ボーダが切れる

    ブラウザウインドウを小さくし（スクロールバーが表示された状態） スクロールバーを右に動かすと、bodyに設定してあるboder-topのボーダーが途中で切れます。 ウインドウサイズを小さくしてもページ上部のボーダーは常に両端までくる形にしたいです。 ＩＥ８でもFirefox3.6.12でも同じです。 サイトボックスとして、 <div id="site_box"> </div> でサイトＢＯＸは900pxとしており、 ＣＳＳで #site_box{ width: 900px; margin-right: auto; margin-left: auto; } として中央寄せをしています。（body自体はそのまま） ************XHTML************** <body> <div id="site_box"> <div id="header"> <div id="header_msg"><p>ページトップコメント</p></div> <div><img src="img/logo.gif" width="250" height="52" /></div> </div> <div id="main"> <div> <p>テスト</p> <p>テスト</p> <p>テスト</p> <p>テスト</p> </div> </div> <div id="footer"> <div class="copy"><p>Copyright &copy; ******* All Rights Reserved.</p></div> </div> </div> </body> </html> *********ＣＳＳ**************** *{ margin:0px; padding:0px; } body{ border-top-width: 3px; border-top-style: solid; border-top-color: #0066FF; } #site_box{ width: 900px; margin-right: auto; margin-left: auto; } #header{ width: 900px; } #main{ margin-top: 10px; height: 600px; } #footer{ } /***　ヘッダー部　***/ #header_msg{ text-align: right; margin-top: 10px; } .copy p{ text-align: center; } よろしくお願いします。

    • ベストアンサー
    • HTML
  • firefoxでセンター表示されない

    制作上の質問です。 インターネットエクスプローラーではきちんと センター表示されているのですが firefoxだとセンターに表示されません 以下のようにソースを組んでいます。※単純化しています。 ＜body＞ ＜div id="header"＞＜/div＞ ＜div id="wrapper"＞＜/div＞ ＜/body＞ スタイルシートで ＜body＞に背景画像Aとbackground-position:center;を 設定しています。 背景画像Aはfirefoxでもセンターに表示されます。 センター位置にこないのは id="header"や id="wrapper"です。 中身がセンターに表示されず、画面の左寄りになってしまいます。 background-position:center;などを 入れてみましたが、変化なし、でした。 根本的な間違いでもしているのでしょうか。 ご経験おありの方、ご存知の方お教えください。 ※客観的に説明できるように努力していますが 　足らない部分があれば、お伝えください。

    • ベストアンサー
    • XML
  • cssでの高さの調整がうまくいきません

    はじめまして。当方css初心者です。 現在DreamWeaver8でCSS+XHTMLでホームページを作成しているのですが、どうもうまくいかないことがあります。よければご意見下さいませ。 以下のソースでmaincontentsに情報を盛り込み、bodyで背景に色をつけてるため、wrapperの背景を白にしてコンテンツ部を白にしたいのですが、maincontentsの情報が少し増えるとwrapperの枠を飛び出してしまいます。wrapperの高さを指定しておけばその範囲では大丈夫なのですが、ページによってmaincontentsの情報量が異なるので「高さ：自動」にすると、contentsの高さまでしか広がってくれません。 各ページの情報量が異なるためwrapperの高さも自動で広がって欲しいのですが、どのようにすればよろしいでしょうか。ソースの間違えあると思います。お手数ですが、よろしくお願い致します。 html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>無題ドキュメント</title> <link href="file:///E|/testweb/css.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wrapper"> <div id="header"> id "header" の内容がここに入ります</div> <div id="contents"> <div id="maincontents"> <p>id "maincontents" の内容がここに入ります</p> </div> <div id="sidenavi"> id "sidenavi" の内容がここに入ります</div> id "contents" の内容がここに入ります</div> id "wrapper" の内容がここに入ります</div> </body> </html> css #wrapper { height: auto; width: 850px; } #header { height: 50px; width: 850px; } #contents { width: 850px; } #contents #maincontents { width: 680px; float: left; } #contents #sidenavi { float: right; width: 90px; }

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する