- ベストアンサー
divを何重にも重ねる理由と、サイト作成の勉強方法
- なぜ多くのサイトでdivを何重にも囲むのかが分からない
- Qiitaのサイトを例にして、divの多重構造について疑問を抱いている
- 本格的なサイト作成に進むための学び方や書籍についてアドバイスを求めている
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
- t_ohta
- ベストアンサー率38% (5095/13317)
id、classの属性を複数適用するために<div>をいくつも重ねることがあります。 参考にされているようなサイトは1ページずつ人がHTMLを書いている訳ではなく、プログラムでHTMLを書き出すのでキレイなHTMLには成りにくい傾向にあります。 書籍で勉強できるのは入門編くらいまでです。 あとは実践で身に付けていくしかありません。 経験豊富な人と一緒に仕事をすると、一気にスキルアップできると思いますよ。
お礼
人が書いているのではなく、プログラムで書き出すとこうなるんですね。 現在、経験豊富な人が近くにいる状況ではないですが、トライアンドエラーで学んでいこうと思います。 ご回答ありがとうございました。
関連するQ&A
- レイアウトが崩れないようにするための、<div>を<div>で囲む理由
<div class="a">で一度幅や高さの指定をしているのに、ウインドウサイズを変更しても、レイアウトが崩れないようにするために、その<div>からさらに<div>で囲むのはなぜなんでしょうか？ <div id="wrapper"> <div class="a"></div> </div> div.a { width:900px; } #wrapper{ width:900px; }
- ベストアンサー
- HTML
- 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
- divで作成したレイアウトに背景画像を付けたいが付けられない
divでレイアウト作り背景画像を入れたいのですが背景画像が思うように適用されません。 以下のようなサイトのように、作成したレイアウトのコンテンツ部分（真ん中白い背景色部分）に背景画像をつけたいのですが、色々やってみたのですが背景画像が適用されません。 参考サイト：http://www.realbit.net/rb_results/index.html 私のソースコードは以下です。 HTML <body> <div id="header"> <p>ヘッダー</p> <p>あああ</p> </div> <div id="container"> <div id="incontainer"> <div id="main"> <p>メイン</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> </div> <div id="leftMenu"> <p>左メニュー</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> </div> </div> <div id="rightMenu"> <p>右メニュー</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> </div> </div> <div id="footer"> <p>フッター</p> <p>あああ</p> <p>あああ</p> </div> </body> CSS #header { background-color: #FF3; width: 920px; margin-right: auto; margin-left: auto; } #container { background-color: #F00; width: 920px; margin-right: auto; margin-left: auto; } #incontainer { float: left; width: 720px; } #main { float: right; width: 520px; background-color: #900; } #leftMenu { background-color: #00F; float: left; width: 180px; margin-left: 20px; } #rightMenu { float: right; width: 180px; background-color: #FF9; margin-right: 20px; } #footer { background-color: #F0F; clear: both; width: 920px; margin-right: auto; margin-left: auto; } 参考サイトのようにコンテンツ部分に背景画像を入れたい、私の場合container部分にフォトショップで作成した背景画像をいれたいのですが、まずは実験的に、上記のように背景画像を入れる前に赤い背景色を入れて見ましたが赤い背景が出てきません。背景画像もためしに入れてみましたが適用されません。 なにが間違っているのでしょうか？
- ベストアンサー
- HTML
- DIVの入り子のwidthの指定方法
DIVの入り子のwidthの指定方法がうまくいきません。 ＜ｃｓｓ＞ #main { width: 770px; margin: auto; padding: 0px; text-align: left; background-color: #cc0000; } .box_main{ width: 750px; background-color: #FFFFFF; margin: 0px 10px 10px 10px; padding: 0px; border: 0px; } .box_1{ margin: 5px 2px 5px 5px; padding: 0px; border: 0px; height: 299px; width: 236px; background: url(img/test2.jpg); float: left; } .box_2{ margin: 5px 5px 5px 0px; border: 0px; height: 295px; width: 491px; background-color: #33ff00; float: left; } .cl { clear: both; } この際、.box_mainの中にbox_1、box_2を横ならびにおきたいのですが うまくいきません。box_2のWIDTHの幅の指定がおかししのでしょうか？ HTMLは<html> <body> <div id="main"> <div class="box_main"> <div class="box_corner">あああああ</div> <div class="box_1"></div> <div class=box_2></div> <div class="cl"> </div> </div> </body> </html> です。
- 締切済み
- HTML
- DWでhtml5で記述するとCSSが反応しな
Dreamweaver CS6を使ってますが、なぜか、html5で記述すると、CSSが反応しません。 例えば、今までの、XHTML+cssですと、 <div id="header"> <div class="abc"> 中身 </div></div> だと、CSSパネルで、 #header .abc で、記述したら、もちろんデザインビューに反映してたのですが、 HTML5の記述で、例えば、 <haader id="header"> <section class="abc"> 中身 </section> </header> だと、CSSパネルで、 #header .abc と、しても反映されません。 ライブビューや、ブラウザでは、反映されている様です。 （しかし、一回一回、ライブビューに切り替えたり、ブラウザで確認しないとならないのは、非常に不便です。） ■Dreamweaverのデザインビューでは、HTML5は、対応してないのでしょうか？ ■Dreamweaverで、HTML5を使う、何かのプラグインなどあるのでしょうか？ ■その他、何が間違っているのでしょうか？ お詳しい方、お教え頂けますでしょうか。 宜しくお願い致します。
- ベストアンサー
- ホームページ作成ソフト
- autoを使ってもブラウザの中央に寄らない
先週からHTMLを学び始めた初心者です。外部スタイルシートを使ってHPを作成しています。同じ様な過去の質問を見たのですがどうも分かりません。申し訳ありませんが教えて下さい。 ベースボックスでautoを使ってブラウザの中央に位置させようとしても、左に寄ってしまいます。何故でしょうか？ cssには以下のように書いています。 body{ line-height:140%; font-size:12px; color:#000000; margin:0px; } .base{ width:680px; margin:0px auto 0px auto; background:url(img/base.gif); } .header{ height:93px; background:url(img/header.gif); background-repeat:no-repeat; } .left{ width:205px; float:left; background:url(img/haikei.gif); margin:0px 0px 0px 2px; } .center{ width:430px; padding:0px 15px 0px 5px; float:left; } .footer{ clear:left; height:65px; background:url(img/haikei.gif); background-repeat:no-repeat; } HTMLは以下の通りです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <TITLE>123株式会社</TITLE> <LINK rel="stylesheet" HREF="1111.css" type="text/css"> </HEAD> <BODY> <DIV CLASS="base"> <DIV CLASS="header"></DIV> <DIV CLASS="left"></DIV> <DIV CLASS="center"></DIV> <DIV CLASS="footer"></DIV> </DIV> </BODY> </HTML>
- ベストアンサー
- HTML
- ＣＳＳレイアウトの２カラム左メニューでコンテンツを先にＨＴＭＬに記述できる方法をおしえてください。
趣味でＨＰを作成しております。 一般的なＣＳＳレイアウト２カラム左メニューにしたいのですが、 ＨＴＭＬ部分で左メニューよりコンテンツを先に記述し、 ＣＳＳで左メニューで右にコンテンツがくるようにしたいです。 現在のＣＳＳは * { margin:0; padding:0; } .wrapper { width: 750px; margin: 0 auto; } .header { width: 750px; height: 100%; } .main { width: 750px; } .menu { float: left; width: 200px; } .contents { float: left; width: 550px; } .footer { clear: both; width: 750px; height: 100%; } .menu ul { list-style: none; } このような記述です。 つづきましてＨＴＭＬ部分は <body> <div class="wrapper"> <div class="header"> ヘッダー部分 </div> <div class="main"> <div class="contents"> コンテンツ部分 </div> <div class="menu"> メニュー部分 </div> </div> <div class="footer"> フッター部分 </div> </div> </body> このような感じです。 しかしこれだとＨＴＭＬ部分はコンテンツが先にきておりますが、 メニューが右になってしまいます。 これをＨＴＭＬ部分を変えずにＣＳＳでメニューを左に配置する方法はありますでしょうか？ １週間くらい試行錯誤したのですが、できませんでした。 お詳しい方教えてください。
- ベストアンサー
- HTML
- 補足・修正・訂正あればお願い致します。
windowsのIE9ではきれいに表示することができました。 しかし、横幅やマージン、パディングの箇所の数値がいまいち 理解できていないため完璧にできたという実感がありません。 もっと論理的にきれいな値をプログラムできると思っています。 私のプログラムで補足・修正・訂正あればお願い致します。 ＊＊＊＊＊＊＊＊＊＊＊＊index.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>無題ドキュメント</title> <link rel="stylesheet" type="text/css" href="css/base.css" > </head> <body> <div id="page"> <div id="header"> <p>header</p> <!-- /#header--></div> <div id="contents"> <!--メインコンテンツ（商品リスト）--> <div id="main"> <div class="products"> 商品1 </div> <div class="products"> 商品2 </div> <div class="products"> 商品3 </div> <div class="products"> 商品4 </div> <div class="products"> 商品1 </div> <div class="products"> 商品2 </div> <div class="products"> 商品3 </div> <div class="products"> 商品4 </div> <!-- /#main--></div> <!--メインコンテンツ（商品リスト）--> <div id="sub"> <p>sub</p> <!-- /#sub--></div> <!-- /#contents--></div> <div id="footer"> <p>footer</p> <!-- /#footer--></div> <!--/#page --></div> </body> </html> ******************base.css***************************** /* CSS Document */ body{ text-align:center; } #page{ width:860px; height:600px; margin:0 auto; background:#690; text-align:left; } #header{ width:860px; height:100px; background:#D1D1DE } #contents{ float:left; width:840px; height:380px; margin:10px; padding-left:0; background:#690; } *html #main{ width:560px; } #main{ float:right; width:570px; height:380px; background:#fff; } #sub{ float:left; width:260px; height:380px; background:#fff; } #footer{ width:860px; height:100px; clear:both; background:#fff; background:#D1D1DE } .products{ float:left; width:130px; margin-left:10px; margin:10px 0px 10px 10px; height:170px; background:#F3F59C }
- 締切済み
- CSS
- 横並びdivで一部の初期高さがずれる理由について
いつもお世話になっております。 きわめて初歩的な質問とは思うのですが・・・どうしても上手くいかず分からない事なので教えて欲しいです。 divブロックを横並びにして、divブロック４つ、検索formを含んだdivフォームを1つ配置したいのですが、 [css] #hoge{ overflow: hidden;} #head{ width: 750px; height: 35px; margin: 0px auto; position: relative; border: 1px solid;} #head div { display: inline-block; margin: 0px; border: 1px solid;} #test1{ width:100px; height:33px;} #test2{ width:100px; height:33px;} #test3{ width:100px; height:33px;} #test4{ width:100px; height:33px;} #test5{ width:250px; height:33px;} #Form input{ margin:auto 0px; font-size: 70%; width: 150px; } #Form button{ font-size: 70%; width: 50px; } [html] <div id="hoge"> <div id = "head"> <div id="test1"></div> <div id="test2"></div> <div id="test3"></div> <div id="test4"></div> <div id="test5"> <form id = "Form"> <input name="list"/> <button>テスト</button> </form> </div> </div> </div> この場合、表示は画像のように、test5のdivだけ初期の高さが沈み込んでしまいます。 また、divとdivの間に余計な隙間が作られてしまいます。 ここで分からないことは、 １．たぶん折り返しをするような必要がないはずなのになぜdiv test5だけが一つ沈み込んでいるのか？ ２．div test1-5の間で横に奇妙な隙間がでてきている根本的な原因は？ ３．cssのinline-block等の属性を変えずに隙間を詰めることはできるか？ 等が知りたいです。お手数ですが、どなたかご教示いただけませんでしょうか。m(_)m
- ベストアンサー
- CSS
- スタイルシートの外部リンク方法は間違っていますか？
外部ＣＳＳファイルからＨＴＭＬファイルへリンクしてみましたが 文字化けの羅列になります ページのレイアウトの枠組みなのですが homepageフォルダにindex.html style.cssの2つのファイルを作成し style.cssのファイルの中に body { text-align:center; } #outline { width:750px; text-align:left; margin:0 auto; } .outline-margin { margin:0 10px; } .main { width:480px; float:right; } .side { width:260px; float:left; } .c-both { clear:both; } と記述しtext2.cssと名前を付けたカスケードスタイルドキュメントを入れてあります これをＨＴＭＬに <html> <herd> <link rel="styleseet" href="style.css" type="text2.css"> </herd> <div id="outline"> <div class="header"> タイトルなど </div><!-- end header --> <div class="outline-marign"> <div class="main"> メインスペース </div><!-- end main --> <div class="side"> サイド </div><!-- end side --> <div class="c-both"><br></div> </div><!-- end outline-marign --> <div class="footer"> フッターなど </div><!-- end footer --> </div><!-- end outline --> </html> のように記述しました リンク方法はこれで間違えていますでしょうか？ ブラウザで見ると文字化けの羅列です ＣＳＳをＨＴＭＬに組み込むときちんと表示されるのでブラウザの問題ではない初歩的ミスだと思うのですが 御教授お願い致します
- ベストアンサー
- その他（インターネット・Webサービス）
お礼
URLの末尾から、どのように作成されたのか分かるとは知らなかったです。 またdivを多用するのは、多くの人が携わった結果だという回答には、なるほどと思いました。 学習の仕方について、ごもっともだと思います。学びたい機能を知って、調べて、繰り返して勉強したいと思います。 ご回答ありがとうございました。