- ベストアンサー
<div>が2つ必要なのはなぜ？
<div>が2つ必要なのはなぜ？ いろんな人のhtmlソースを見てると <div id="container"> <div id="content"> 本文・・・・・ </div> </div> のように divを２つ使っていますが、なぜでしょうか？ divが１つだけだと何か問題あるのでしょうか？ よろしくお願いします。
- dicemiyagawa
- お礼率8% (8/100)
- その他（プログラミング・開発）
- 回答数1
- ありがとう数11
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- CSSでの2段組レイアウトでdiv#containerを導入する理由
CSSでの2段組レイアウトでdiv#containerを導入する理由 CSSを使って2段組みレイアウトを構成する場合、次のようにdiv#containerを導入したマークアップをよく目にします。 <body> <div id="container"> <div id="header"> </div> <div id="main"> </div> <div id="menu"> </div> <div id="footer"> </div> </div> </body> また、div#containerを導入せずにbody要素の直下に#header, #mainなどの領域を設けている場合も目にします。 body要素直下ではなく、div#containerを導入するのはどのような理由からなのでしょうか？
- ベストアンサー
- ホームページ作成ソフト
- 2カラムのレイアウト
2カラムのレイアウトにおいて、HTMLの記述部分において。 【例1】コンテナーの「★外」に、フッターがある場合と。 ・「コンテナー(コンテンツ+サイドバー)」 ・「フッター」 【例2】コンテナーの「★中」に、フッターがある場合。 ・「コンテナー(コンテンツ+サイドバー+フッター)」 があるように思いますが? ★どっちでもいいんでしょうか? (どっちも、同じレイアウトになるんでしょうか? そんな感じがします。) ^^ HTML/CSS 初心者なもので。。。よろしくです。 ^^ ---------------------------------------------------------------- 【例1】 <div id="container"> <div id="contents"> 本文 </div> <div id="sidebar"> サイド部分 </div> </div> <!--container部分終わり--> <div id="footer"> <p>著作権</p> </div> <!--footer部分終わり--> 【例2】 <div id="container"> <div id="contents"> 本文 </div> <div id="sidebar"> サイド部分 </div> <div id="footer"> <p>著作権</p> </div> <!--footer部分終わり--> </div> <!--container部分終わり-->
- ベストアンサー
- HTML
- スマホで横並びdiv
お世話になっております。 スマートフォンでdivの横並びをしようとしたのですが、 <html> <head> <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> </head> <body> <div style="height:30px;line-height:30px;width:100%;"> <div style="overflow:hidden;float:left;width:50px;">日付</div> <div style="overflow:hidden;float:left;">本文</div> </div> </body> とした場合、 本文が長いと日付の下に本文が来るようになってしまいます。 本文の末尾が消えてdivが横並びになるようにしたいのですが 良い方法はないでしょうか？ よろしくお願いします。 以上です。
- ベストアンサー
- CSS
- URL末尾に特定の文字を含む場合に非表示だったdivを表示に切り換えたいのですが。。
URL末尾に特定の文字を含む場合にcssで非表示だったdivを表示に切り換えるということをやりたいのですが。。 以下のようなソースになります。 このindex.htmlの末尾に?num2などを追加した場合に、 window.location.searchでURLの?以下を取得して 取得した値と一致したidを持つdivはdisplay:block;を上書きして表示するということをやりたいです。 なんとなくできそうな気がするのですが、実際にどのように記述すれば良いのかわかりません。。 また同様の方法で複数のdivを表示したい場合はどのようにすれば良いでしょうか？ 例えばnum1とnum4とnum5のdivを表示するなどです。 Javascriptにお詳しい方教えていただけますでしょうか？ 不躾な質問ですが、よろしくお願いします。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>test</title> <style type="text/css"> <!-- div#num0,div#num1,div#num2,div#num3,div#num4,div#num5 { width:100px; background-color:#ccc; margin:10px; display:none; } --> </style> </head> <body> <div id="num0">１番目</div> <div id="num1">２番目</div> <div id="num2">３番目</div> <div id="num3">４番目</div> <div id="num4">５番目</div> <div id="num5">６番目</div> </body> </html>
- 締切済み
- JavaScript
- 大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の入れ子で、FireFoxだとレイアウトが崩れる。
DIVの入れ子で、FireFoxだとレイアウトが崩れる。 http://www.cool-vivi.com/?p=222 このサイトの通りにやったのですが、 FireFoxだとうまく表示されません。 下記のソースから<div id="main">を消して、入れ子じゃない状態にするとうまくいきます。 どうすればいいでしょうか？ <div id="main"> <div id="menu"> </div> <div id="contents"> </div> </div>
- ベストアンサー
- ホームページ作成ソフト
- CSS適用ページで余分なDIVタグが要求される
CSS初心者です、質問させてください。 XHTMLに外部CSSを添付させています。 headerは３ブロック、 contentsは３ブロックに分けてから各ブロックに複数ブロックをいれています。それら複数ブロックはそれぞれ幅と高さを指定しています。 contentsとfooterには「clear: both;」をいれています。 ソースは以下の通りです。 <?xml version="1.0" encoding="Shift_JIS"?> <!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>無題ドキュメント</title> <link href="affiliate.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="header"> <div id="a_Left"> <div id="a1">A1</div> <div id="a2">A2</div> </div> <div id="a_right"> <div id="a3">A3</div> </div> </div> <div id="contents"> <div id="conLeft"> <div id="b1">B1</div> <div id="b2">B2</div> <div id="b3">B3</div> </div> <div id="conCenter"> <div id="c1">C1</div> <div id="c2">C2</div> <div id="c3">C3</div> </div> <div id="conRight"> <div id="d1">D1</div> <div id="d2">D2</div> <div id="d3">D3</div> <div id="d4">D4<div> </div> </div> </div> </div> <div id="footer">E1</div> </body> </html> 明らかにid="footer"の上にある</div></div>は不要なのですが、入れないと表示がおかしくなります。 なぜかさっぱりわかりません。 どうすればいいのでしょうか？ よろしくお願いします。
- ベストアンサー
- CSS
- スタイルシート DIVとDIVの間に隙間ができてしまいます。
DIVとDIVの間に１０ピクセルほどの隙間ができるのはなぜでしょうか？ ｈｔｌｍは <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 8.0.0.0 for Windows"> <META http-equiv="Content-Style-Type" content="text/css"> <META name="IBM:HPB-Input-Mode" content="mode/flm; pagewidth=750; pageheight=900"> <TITLE>タイトル</TITLE> <link rel="stylesheet" href="style_1.css" type="text/css"> </HEAD> <BODY> <DIV id=site> <DIV id=header> <DIV id=top-logo><IMG src="logo2.gif" border="0" alt="ロゴ"> </DIV> <hr color="#ffccff" width="750" height="2"> </DIV> </DIV> </BODY> </HTML> 上部の方はよくわからなくてホームページビルダーのをコピーして、残りはメモ帳で手打ちしました。 スタイルシートは、全て手打ちです。 *{ margin:0px; padding:0px; } #site { width: 760px; border: 2px solid pink; font-size: 90%; line-height: 150%; margin:0px; padding:0px; border: 1px solid red; } #header { width: 760px; border: 1px solid blue; } #top-logo { FLOAT: left; border: 1px solid green; } #siteと#headerの赤と青のボーダーはぴったりくっついているのに、#top-logoの上に隙間があります。 ｈｒの線の下にも１０ｐｘ分くらいの隙間があります。 なぜこのような隙間ができてしまうのでしょうか？
- ベストアンサー
- HTML
- divとdiv、本文とフッタの境目が開きます。
HTMLをテキスト打ちしているのですが、 本文とフッタの間、divとdivの境目が開いてしまい、困っております。 こちらにありますので、原因がお分かりの方がいらっしゃいましたら どうぞ教えて下さい。 http://pppits.com/work/demo/abend_demo/index.html ソースを開いていただければわかりますが、 記事1・2と記事3の境目です。 記事1・2が長くなった場合に、記事3とフッタをその下につけたいのですが うまくいきません。 納期が明日で、切羽詰っております。 宜しくお願い申し上げます。
- ベストアンサー
- デザイナー・クリエイティブ職
