- ベストアンサー
HTMLのdivについて
HTMLで質問です。 DIVについて質問です 下の図で <body> <div="c"> <div id="a"> --------------- </div> <div id="b> ああああああああ いいいいいいい </diｖ> </div> ＜/body> という場合 <div＝”ｃ”> は全体のbody範囲でありますが divそのものを idで指定しなくても divだけでも全体を範囲しいた事にはならないのでしょうか？ ホームページ全体が範囲であり セレクタ範囲を後にCSSで装飾する場合 やはりIDで指定するのでしょうか？
- yonbakukan
- お礼率7% (11/148)
- ホームページ作成ソフト
- 回答数4
- ありがとう数1
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
divの目的は、 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。・・・・この両要素をスタイルシートやlang属性等と併用することで、HTMLを自身の必要や好みに応じられるようにできる。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )］より ですよ。 ここで言う構造とは、文書構造です。ところが、HTML4.01が勧告(1999年)されて12年たちますが、いまだにdivをデザインのためだと誤解され続けています。あくまで、『idやclass名で示された文書構造を元にデザインできる』ということですね。 TML5 では、そのわかりにくい説明の反省から、『文書をよりよく構造化するために、次の要素が新しく追加されました。( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )」』 すなわち、基本的に <header> ヘッダ </header> <section> 本文 </section> <footer> フッタ </footer> </body> のようにマークアップします。 これは、HTML4.01を、 <body> <div class="header"> ヘッダ </div> <div class="section"> 本文 </div> <div class="footer> フッタ </div> </body> とマークアップすることが期待されていたことを示します。 「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため」ですから、単にデザインのためだけに<div>で括ることはありませんし、わざわざ書かなくても良いはずです。なぜなら、ページの内容全体はbody要素で括られているのですから・・・ しかし、HTML5ですと次のような書き方をすることがあります。 <body> <article> <header> ヘッダ </header> <section> 本文 </section> <footer> フッタ </footer> </article> </body> ですが、それは 「articleが文書内で自己完結している場合ですね。」当然、内部に<header><section><footer>を持つと期待されますから <body> <div class="header"> ヘッダ </div> <div class="section"> 本文 <article> <header> ヘッダ </header> <section> 記事 </section> <footer> </footer> </article> <section> 記事 </section> </div> <div class="footer> フッタ </div> </body> もありえます。・・こちらが本来のarticleの使い方 「ホームページ全体が範囲であり」・・・意味不明です。そのページから「ホームページへ戻る」時はどこ??ウェブサイトを作る立場になったらホームページと言う言葉は、正しく使わないと意味が通じなくなります。→http://ja.wikipedia.org/wiki/%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8 「セレクタ範囲を後にCSSで装飾する場合やはりIDで指定するのでしょうか？ 」 上記のように、基本はclassです。idはそのページ内で一箇所しか指定できません。しかし、このサンプルのように、<article>,<header>,<section>,<footer>は、何度でも登場する可能性がありますから、HTML4.01に置き換えるとclassでないと、文書構造を示せないことになります。 じゃ、三つのsectionはどう区別するのか・・・それがセレクタです。 div.section{}はすべてのsectionになりますし、 div.section div.section{}はarticle内のsectionと二階層目のsectionになります。 div.section div.article+div.section{}は最後のsectionですね。 body>div.section{}だと、body直下のsectionのみです。 idではないので、 div.section{background-color:white;} のように一括して指定できますね。 idはjavascriptやリンクターゲットになるときなど、よほど特赦な状況でない限り使わないほうが良いです。詳細度が高すぎるため、一箇所しか指定できないため・・スタイルシート(もちろんHTMLも)が冗長化する原因となります。 質問は、文章全体を囲む場合<div>が必要か否かと言うことかと思いますが、基本必要ありません。
その他の回答 (3)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2281)
>No.2です。 編集ミスで日本語がおかしい所がありますが、無視してください。 ニュアンスはわかると思いますので。 ---------------------- <div id="c"> <article> <div id="a"> ・・・ </div> </article> <article> <div id="b"> ・・・ </div> </article> </div> と考えれば、 <div>の中に何が入っていようが、<div></div>という範囲は変わりませんし、 divの範囲がどこからどこまでか、というのもNo.2で説明した通りです。 <div>を使うべきか、他のタグを使うべきかというのは、 idがついているかどうかというのも関係ありません。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
No.1です。すこし言葉足らずでした。 ＞質問は、文章全体を囲む場合<div>が必要か否かと言うことかと思いますが、基本必要ありません。 本文要素を示すタグは<body></body>ですから、完結した記事が二つ以上ある場合 <body> <article> <header></header> <section></section> <footer></footer> </article> <article> <header></header> <section></section> <footer></footer> </article> </body> でもない限り、通常は不要のはずです。HTML4.01ですと、それぞれ <body> <div class="article"> <div class="header"></div> <div class="section"></div> <div class="footer"></div> </div> <div class="article"> <div class="header"></div> <div class="section"></div> <div class="footer"></div> </div> </body> です。ページ--厳密には本文全体という要素をマークアップするタグは<body></body>だということですから、 「divだけでも全体を範囲しいた事にはならないのでしょうか？」 bodyがあります。 ・そのページだけで完結している場合は HTML4.01では、class名に完結していることを示すためclass名にarticle HTML5だと、article要素でマークアップすることになります。 ・それ以外は、屋上屋を重ねる--「馬に乗馬した武士の侍が・・・」になって、いたずらにHTML、しいてはスタイルシートが煩雑にならないようにします。
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2281)
><div="c"> <div id="c">ですね。 idやclassは必須ではありません。 どこからどこまでが囲まれているかは、idなどではなく、あくまでタグ名の部分です。 <div></div>でも囲っている事になります。 ただ、スタイルを指定する場合、 としてしまうと、 <body> <div>(1-1)<div>(1-2)</div></div> </body> 入れ子になった内側や、 <body> <div>(2-1)</div> <div>(2-2)</div> </body> 並列する場合に、 div{} だけでは、(1-1)、(2-1)だけに適用したい場合に指定しづらくなってしまいます。 それを防ぐためにidやclassが使われます。 idかclassか迷った時は、classを使う事をお勧めします。 div+div+div+div+・・・などと書く事も出来ますが、私はわかりにくいと思います。 <style> #c{} #a{} #b{} #d{} </style> <body> <div id="c"> <div id="a">(2-1)</div> <div id="b">(2-2)</div> <div id="d">(2-3)</div> </div> </bldy> ------------ <style> div{} div div{} div div+div{} div div+div+div{} </style> <body> <div> <div>(2-1)</div> <div>(2-2)</div> <div>(2-3)</div> </div> </bldy>
関連するQ&A
- divの中に外部のHTMLを埋め込む
divの中に外部のHTMLを埋め込む（読み込む）ことはできますか？推奨されていますか？ その際には何というタグで読み込むのでしょうか？ IE8/9を対象にしています。 jqueryで作った独自のコンテンツ（html)を読み込みたいです。 なぜメインのHTMLに直接j独自コンテンツのソースを張ろうと思わなかったのは こちら側で作ったコンテンツを第三者に配布した場合、 jqueryで作ったページが利用しているCSSのidセレクタ名などがメイン（読込み先html）が利用しているCSSのidとかぶってしまう可能性があると思ったからです。 メインページが読み込むCSSはメインページが利用するCSSただ１つとしておきたいのです。 何かいい方法はありますか？
- ベストアンサー
- CSS
- 「css」 と 「div」の使い方について
例えば、「CSS」でページ全体の要素をクラス「contents」で設定した場合、 HTML では次のどちらの記述が正しいのでしょうか？ １．<body class="contents">・・・ </body> ２．<body> <div="contents">・・・ </div> </body>
- ベストアンサー
- その他（インターネット・Webサービス）
- HTML、divについて
HTMLについて質問です。 <head> <body> 文章 <hr> 文章 <hr> 文章 </body> </head> というページを作った時、上、中、下の文章はそれぞれを特にcssに設定したいことはないですが、divで囲ってグループ分け？すべきでしょうか。 このままでも構わないでしょうか。 もうひとつ、現在はhead部にtitleではなくTITLEを使うべきなのでしょか。 回答よろしくお願いします。
- ベストアンサー
- HTML
- HTML,CSSのみでDIVブロック
ＩＥで図のようなＤＩＶブロックを表示させたいと考えています ＤＩＶでなく他のＨＴＭＬ要素でもいいです jQueryなどライブラリを使わないで ＨＴＭＬとＣＳＳのみで図のような表示のサンプルプログラムが見れる サイトを教えてください また、グーグルなどで、これらを検索する際 適当なワードを教えてください よろしく、お願いします
- ベストアンサー
- ホームページ作成ソフト
- HTMLで横幅をCSSで設定できません。
HTMLで横幅をCSSで設定できません。 headerを作成しているのですが、画像のように横幅が外枠の wrapperをはみ出して表示されてしまいます。 はみ出した値は5pxとpaddingで指定した値と一致します。 headerをtableタグで作成した場合、横幅700pxの枠中での padding-left:5px;になり、横幅には変化はありません。 しかし、<div id="header">で横幅を700pxとし、 padding-left:5px;とすると、headerの横幅が 5px増えてしまいます。 <div id="header">の横幅を変化させずに、 paddingを指定することは可能なのでしょうか。 わかる方いらっしゃいましたら宜しくお願い致します。 ■HTML <html> <body> <div id="wrapper"> <div id="header"></div> </div> </body> </html> ■CSS #wrapper { width: 700px; } #header { width: 700px; padding-left: 5px; }
- ベストアンサー
- HTML
- ヘッダー・フッター固定HTMLに関して
ヘッダー・フッター固定HTMLに関して ヘッダー・フッター固定で（間）中段にFlashコンテンツを横100%縦100%で表示するHTMLを作成しようと思っております。 そこで、下記のHTMLソース、及びCSSで指定しているのですが、上手くいきません。 ヘッダー・フッター固定はできますが、Flashを表示しようとすると思うようにいきません。 「body > #wrapper」を「height:auto;」にすると、Flash部分の高さが小さく、 「body > #wrapper」を「height:100%;」にすると、フッター部分が消えてしまします。 【HTML】 ～～～～～～～～ <div id="head">～ヘッダー～</div> <div id="flashcontents">～Flashデータ～</div> <div id="foot">～フッター～</div> ～～～～～～～～ 【CSS】 ～～～～～～～～ html,body {margin:0; padding:0; overflow:hidden;} #head{～サイズなどを指定～} #flashcontents{margin: 0; height: 100%; width: 100%;} body > #flashcontents {height:100％; position: absolute;} #contents { position: fixed; overflow:hidden; bottom:0; 他サイズなど指定…} ～～～～～～～～ 以上、分かりにくい説明かと思いますが、もしお分かりになれば教えて頂けますでしょうか？ よろしくお願い致します。
- 締切済み
- CSS
- CSS・DIVについて
CSS初心者ですが、質問させていただきます。 ＜やりたいこと＞ 同一ページ内にて、下記の(1)(2)をCSSで指定したい。上から(1)(2)(1)の順で表示したい。 (1)幅700、文章中央揃え (2)幅600、文章左揃え ＜私が作成したもの＞ （関係ない部分は省略しています。） （実際は、(1)(2)の部分は半角英字の名前をつけています） <head> <style type="text/css"> body { text-align: center; } div#(1) { width: 700px; margin: 0 auto; text-align: center; } div#(2) { width: 600px; margin: 0 auto; text-align: left; } </style> </head> <body> <div id="(1)">タイトル</div> <div id="(2)">説明文</div> <div id="(1)">ホームに戻る</div> </body> ＜表示のされ方＞ (1)は正常に表示されているのですが、(2)にはCSS自体が適用されていないのです。 ちなみにIE9では私の思うように表示されるのですが、IE10になって表示されなくなりました。 なぜこのようになったか、お教えいただけますでしょうか。よろしくお願いいたします。
- 締切済み
- CSS
- divのクラス内のリンクの設定
CSSの設定でわからない点がありましたので質問させてください。 div自体にクラスを設定しているのですが、このブロック内にリンクがあります。このdivないの<a href="">のみのCSS指定をしたいのですが、どうやってやったらよいのでしょうか？ これまでは、divにidを指定して、 #id a:link {… とか、アンカー自体にクラスを指定してやっていたのですが、ここではHTML自体を変更せずにCSSでコントロールしたいのです。 ソース自体はこんな風になっています。 <div class="asset-more-link"> <a href="example.html">バージョンアップ</a>の続きを読む </div> これに対して、あれこれCSSを設定したのですが一向に反応してくれません。もしわかる方がいたらおしえてください。よろしくお願いします。
- ベストアンサー
- CSS
- 擬似クラスの子要素を指定するセレクタ
リンク色を変えるセレクタについて質問です。 以下のHTMLがある場合に、abcの文字色を変えるCSSセレクタを a:link { color:blue } ←これ以外で教えて下さい。 <div id="id"> <a href="#"><span>abc</span></a> </div> 以下のCSSでは色が変わりませんでした。 #id a:link { color:pink } #id a:link span { color:pink } #id a:link * { color:pink } （HTML構造は都度変わるため隣接セレクタではなく汎用性のある下位セレクタで指定したいです。）
- ベストアンサー
- CSS
- CSSでのdivタグに付いての質問です。
現在HTMLを学習し始めたばかりで困惑しております。 HTML内の<body>タグ内に<div>タグを作りidを"main"としました。 具体的には<div id="main">Main</div>と記述しました。 そこからCSSで#main {color: red;} と記述しましたが、文字色の変更が全く反映されない状態です。 他の<p>タグや<h1>タグ、また<body>タグは全て奇麗に反映されるのに<div>だけが全然ダメな状態です。 一体何が原因なのか教えて下さい。 初心者すぎる質問だと思いますが、どうぞよろしくお願い致します。
- ベストアンサー
- HTML
