- ベストアンサー
div要素って
mitonekoの回答
- mitoneko
- ベストアンサー率58% (469/798)
本来のdiv要素の使い方は、例示でいくつかあげられているような、構造を示すタグが「ない」構造を表示するために存在します。 例えば、ナビゲーション用のサイドバー、本文が同時に存在するページを考えてみます。サイドバーや本文を示すようなタグはありませんね。(実は、html5には存在します。） でも、立派な文書構造としてのグループではあります。 このような時に、クラス名をいわば構造名として定義するような感じで使います。 <div class="sidebar"> なんて感じですね。 文書の構造として、意味があれば、正しいdivの使い方でしょう。目安としては、class名に指定した名前が、文書の構造を表しているなら、多分、正しい使い方です。これが、文書の内容に踏み込んでいたら、少し考えた方が良いかもしれません。 でも、時に、乱用が見られるのは事実です。
関連するQ&A
- jqueryで特定の要素をdivで囲う
jqueryを使い、HTMLの特定の要素をdivで囲いたいと思っています。 元のHTMLのソースは、 ========= <div class="tabWrap02 tabSwitcher materialityRefine"> <h2 class="headline06 jqa mb20" style="display: none;"></h2> <ul class="tabNav range9Col textSmall organizationRefine range17Col upper"> <li class="needTitle active" style="height: 50px;"></li> <li></li> <li></li> </ul> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-1" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-1" class="tabDetail" style="display: none;"> </div> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-2" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-2" class="tabDetail" style="display: none;"> </div> <h2 class="headline06 mb20">×××</h2> <ul class="tabNav range8Col textSmall mb50 range17Col upper"> <li class="active" style="height: 65px;"></li> <li></li> <li></li> </ul> <h2 class="headline06 jqa mb20" style="display: none;"></h2> <ul class="tabNav range9Col textSmall organizationRefine range17Col upper"> <li class="needTitle active" style="height: 50px;"></li> <li></li> <li></li> </ul> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-3" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-3" class="tabDetail" style="display: none;"> </div> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-4" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-4" class="tabDetail" style="display: none;"> </div> </div> ========= このようになっております。 上記のソースを、以下のように２か所<div class="wrap">で<ul class="spAcodNav">を囲いたいと思っています。 ========= <div class="tabWrap02 tabSwitcher materialityRefine"> <h2 class="headline06 mb20">●●●</h2> <ul class="tabNav range8Col textSmall mb50 range17Col upper"> <li class="active" style="height: 65px;"></li> <li></li> <li></li> </ul> <h2 class="headline06 jqa mb20" style="display: none;"></h2> <ul class="tabNav range9Col textSmall organizationRefine range17Col upper"> <li class="needTitle active" style="height: 50px;"></li> <li></li> <li></li> </ul> <div class="wrap"> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-1" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-1" class="tabDetail" style="display: none;"> </div> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-2" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-2" class="tabDetail" style="display: none;"> </div> </div> <h2 class="headline06 mb20">×××</h2> <ul class="tabNav range8Col textSmall mb50 range17Col upper"> <li class="active" style="height: 65px;"></li> <li></li> <li></li> </ul> <h2 class="headline06 jqa mb20" style="display: none;"></h2> <ul class="tabNav range9Col textSmall organizationRefine range17Col upper"> <li class="needTitle active" style="height: 50px;"></li> <li></li> <li></li> </ul> <div class="wrap"> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-3" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-3" class="tabDetail" style="display: none;"> </div> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-4" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-4" class="tabDetail" style="display: none;"> </div> </div> </div> ========= jqueryでwrapAllなどを使って試しているのですが、うまいいかず、 お分かりいただける方いらっしゃいましたらご教授いただけますと幸いです。 よろしくお願い致します。
- ベストアンサー
- JavaScript
- div要素をランダムに表示させたい
お世話になります。Javascriptについて質問させていただきます。 拙い説明で分かりにくいかと思いますが、ご教授いただけたらと思います。 javascriptとcssを使用して、ページをリロードする度に、divの要素をランダムに表示させるようにしたいと考えています。 ランダムで表示させるにはfunction test(no)関数のどこかにランダムで値を取得できるようにする必要があると思っているのですが、上手く設定ができずに悩んでいます。 ご回答頂けたら幸いです。 ■ html <body onLoad="test(no)"> <div id="link"> <div class="link01"> <p>文章1</p> </div> <div class="link02"> <p>文章2</p> </div> <div class="link03"> <p>文章3</p> </div> </div> <ul> <li><a href="#" onclick="showChanger(1);">リンク1</a></li> <li><a href="#" onclick="showChanger(2);">リンク2</a></li> <li><a href="#" onclick="showChanger(3);">リンク3</a></li> </ul> ■javascript function test(no){ var parenObj=document.getElementById("link"); for(var i in parenObj.childNodes){ var childObj=parenObj.childNodes[i]; if(childObj.tagName=="DIV"){ if(no == 1){ if(childObj.className=="link01"){ childObj.style.display = "block"; }else{ childObj.style.display = "none"; } } if(no == 2){ if(childObj.className=="link02"){ childObj.style.display = "block"; }else{ childObj.style.display = "none"; } } if(no == 3){ if(childObj.className=="link03"){ childObj.style.display = "block"; }else{ childObj.style.display = "none"; } } } } } ■css .link01 { display:block; margin-bottom:10px; } .link02 { display:none; margin-bottom:10px; } .link03 { display:none; margin-bottom:10px; }
- ベストアンサー
- JavaScript
- div要素の用途について
div要素は、リンクの文字をそろえたり、文章でCSSのレイアウトなどに使用されると思いますが、本来のdiv要素の目的というのはどういうものなのでしょうか？ 回答よろしくお願いします。
- ベストアンサー
- HTML
- div要素について質問
『div要素自身は特別な意味を持ちません』という解説が参考書であったのですが、これは『文章の構造（見た目など）には影響を与えない』という意味でしょうか？
- ベストアンサー
- HTML
- <div>テキスト</div>
HTMLを記述する際に文書構造を明確に…と考えています。 見出しにはHタグ、本文にはPタグ、リストにはliなどなど。 ある書籍でbody直下にテキストを配置するのはいけない、と書いてありました。テキストに意味付けがなされていないから、というようなことが理由として書いてありました。 そこで思ったのですが、divはもともと意味をなさないブロック要素ですが、この直下にテキストを配置すると、このテキストは文書構造上意味を持たないものになって、文法上間違っているのでしょうか？ 今のところ、 <div><p>テキスト</p></div> のように、pで意味付けをするのが正しいのかな、と考えていますが、W3Cのホームページではdiv直下にテキストを配置しているものがありました。 皆さんのご意見を伺いたいです。 div直下のテキストは正しいのか、間違っているのか、どうでもいいのか？
- ベストアンサー
- HTML
- div 展開方法
こんにちは、 divの展開方法についてお伺いしたいのですが 下記の内容ですと、 テストを押すと、あ行に飛び、あ行を押すと divが展開される動きなのですが、 これをテストを押して、あ行に飛んだときに 自動で展開するようにする方法なありますでしょうか？ <a href="./#anc1">テスト </a> <h3 id="anc1">あ行</h3> <div id="slidetog1"> <h4>～あ～</h4> <ul> <li>内容</li> </ul> <h4>～い～</h4> <ul> <li>内容</li> </ul> </div> </div> css #slidetog1{display:none;} スクリプト $("#anc1").click(function(){ $("#slidetog1").slideToggle("slow"); });
- 締切済み
- JavaScript
- CSSで、親要素にだけ中央揃えをかけたい
既出の質問でしたら申し訳御座いません。見つけられませんでしたので、ご相談致します。 CSSでの記述について、 <body> <p>あいうえお</p> <ul> <li>かきくけこ</li> <li>さしすせそ</li> </ul> </body> という構造であった場合、body（ページ自体）は表示域の中央によせ（margin: auto;とtext-align: center;の双方を使うつもりです）、その中の「あいうえお」や「かきくけこ」は左寄せを維持したいのですが、個々のpやulに左寄せをかけずに、bodyへの指定のみでこれを実現する方法はありますでしょうか？bodyの子要素以下を一つのdivで括って左寄せをかける方法も考えたのですが、スマートでない気がします。方法があるようでしたらお教え下さい。
- ベストアンサー
- CSS
- 大divの中に小divを配置して回り込ませる方法。
大divの中に小div3つを配置したいのですが、回り込み及び、小divの枠線の表示ができません。配置は大div clearの中の左側にdiv menu、右側にdiv contents、下部にdiv footerを配置したいと思っていますが、回り込みができず、表示したい箇所は下記のように表示されてしまいます。 • xxxx • xxxxx • xxxxx xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxx 更にliタグの・を消したいのですが、cssにlist-style-type:noneと記述しても消すことができませんでした。 記述のどこに問題がありますか？ ご教授お願い致します。 (css) div#image {margin-left : auto ; margin-right : auto ;width:800px;border:solid 1px #660000;} div#container {margin-left : auto ; margin-right : auto ;width:800px;height:30px;background-color:#000000;border:solid 1px #660000;} h1 {margin:0px;color:#330000;font-family:Geogia,Times New Roman,sans-selif;} h2 {font-size:18px;padding-left:20px;padding- top:5px;margin:0px;color:#ffffff;font-family:Geogia,Times New Roman,sans-selif;} div#clear{border:solid 1px #660000;margin-left : auto ; margin-right : auto ;width:800px;height:1500px;background-color:#ffffff;] ul {border:1px solid #660000;} li {list-style-type:none;} h3 {font-color:#ffffff;} p {font-color:#ffffff;} div#menu {border:solid 1px #660000;width:100px;height:200px;float:left;} div#contents {border:solid 1px #660000;width:500px;height:700px;float:right;} div#footer {border:solid 1px #660000;width:700px;height:100px;clear:both;} (html) <!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> <meta http-equiv="content-type" content="text/html;charset=Shift_JIS"/> <title>xxxxxxx</title> <link href="./style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="image"> <h1><img src="xxxxxx.jpg" alt="xxxxxxxxx" /></h1> </div> <div id="container"> <h2>xxxxxxxxxxx </h2> </div> <br> <div id="clear"> <div id="menu"> <ul> <li> xxxxxx </li> <li> xxxxxx </li> <li> xxxxxx </li> </ul> </div> <div id="contents"> <h3>xxxxxxxxxx</h3> <p>xxxxxxxxxxx</p> <p>xxxxxxxxxxx</p> <br> <p>xxxxxxxxxxxxxxxxxx</p> </div> <div id="footer"> <p>xxxxxxxx</p> </div> </div> </body> </html>
- ベストアンサー
- HTML
- <div>と<div>の隙間を無くす方法
ヘッダーの<div>を作って、その下に横長（ヘッダーと同じ長さです）ナビのメニューの<div>を作りたいのですが、ヘッダーの下とナビの上に20ｐｘほどの隙間が空いてしまいます。なぜでしょうか？マージンを0に設定してもできてしまいます。 また、ナビメニューはボタンの画像にして文字を埋め込んであります。全部で6つです。それをulで右にフロートさせ、liを左にフロートさせています。DWで作っていますが、DWのプレビュー画面で確認すると、メニューがulで右にフロートしてありますが、liが左にフロートされてなくブロック状態で表示されます。しかし、IEやfirefoxなどのブラウザで確認すると、ちゃんとインライン表示されます。それが原因しているのでしょうか？ また、メニューボタンはjavascriptでスワップイメージにしました。 どなたかわかる方いらっしゃいますか？ とても困っています。できましたら至急にお願いいたします。 コードを載せておきます。 <div id="header"> <div id="aa"> <h1>*********</h1> <h2>*********</h2> <p>**********<br /> *************</p> </div><!--aa--> <div id="bb"> <p>********</p> </div>><!--bb--> </div><!--header--> <!--navi--> <div id="navi"> <ul #menu> <li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li> <li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li> <li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li> <li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li> <li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li> li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li> </ul> </div> <!--navi--> ヘッダー部分のcss #header{ width: 800px; height: 120px; background-image: ***; background-repeat: repeat-y; margin: 0px; } ナビ部分のcss #navi{ width: 800px; height: 35px; } } ul#menu{ float: right; display: inline; margin: 0; } li{ float: left; margin: 0;
- ベストアンサー
- CSS
- HTML5 | 見出しよりも先にメタ要素
こんばんは、 現在ブログをHTML5へと作り変えています。お伺いしたいのですが、以下のように見出しよりも先にそのメタ要素を記述する構造は良くないのでしょうか? <article> <header> <ul><li>日付</li><li>カテゴリ</li></ul> <h1>タイトル</h1> </header> … </article> 見出しを先に記述した後に、CSSで入れ替えることはもちろんできるのですが。よろしくお願いします。
- 締切済み
- HTML