間隔を空けるにはどうしたらいいでしょうか？
- コンテンツとコンテンツの詰まり、Windows XP あるいは8、HTML 4.01において、あああああ と いいいいいの間隔はあいているのにいいいいい と うううううの間隔はなぜか詰ってしまっています。間隔を空けるにはどうしたらいいでしょうか？コードは以下の通りです。
- コンテンツとコンテンツの詰まりに関する問題が発生しています。あああああといいいいいの間隔は問題なく空いていますが、いいいいいとうううううの間隔が詰まってしまっています。この問題の解決方法を教えてください。
- コンテンツとコンテンツの間に空白を作る方法を教えてください。現在、あああああといいいいいの間隔は適切に空いていますが、いいいいいとうううううの間隔が狭くなってしまっています。どのように修正すれば良いでしょうか？
- ベストアンサー
コンテンツとコンテンツの詰まり
Windows XP あるいは8 HTML 4.01 コピー ～ TOP.html copyTOP.css あああああ と いいいいいの間隔はあいているのに いいいいい と うううううの間隔はなぜか詰ってしまっています。 間隔を空けるにはどうしたらいいでしょうか？ コードは以下の通りです。 [ HTML 側 ] <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/Transitional.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" Content="text/html;charset=Shift_JIS"> <META HTTP-EQUIV="CONTENT-STYLE-TYPE" CONTENT="～"> <title>aaaaaaaaaa</title> <link rel="stylesheet" href="copyTOP.css" type="text/css"> </head> <body> <div id="zentai"> <div id="part"> <p class="title">あああああ</p> <div id="partnerwaku"> <div id="partnerimage"> <a href="" alt="のロゴ" class=""></a> <a href="" alt="のロゴ" class=""></a> <a href=""><img src=".gif" alt="のロゴ" class=""></a> <a href=""><img src=".jpg" alt="のロゴ" class="A"></a> <a href=""><img src=".jpg" alt="のロゴ" class=""></a> </div> </div> </div> <div id="PR"> <PR> <br> <div id="PRsection"> <br> <a href=""> <img src="" alt="" class="PRimage01"></a> </div> </div> <div id="PR2"> <br> <PR> <br> <div id="PRsection2"> <br> <a href=""> <img src="" alt="" class="PRimage02"></a> </div> </div> <div id="columnwaku"> <div id="columnbun"> <p class="title">いいいいい</p> <div id="columncontents"> <p><a href=""><img src =".jpg" class="columnarticle01"></a></p> </div> </div> </div> <br> <br> <br> <br> <div id="PR3"> <br> <PR> <br> <div id="PRsection3"> <br> <a href=""><img src="" alt="" class="PRimage03"></a> </div> </div> <br> <br> <br> <br> <br> <div id="questionnairesection"> <div id="questionnaire"> <p class="title">ううううう</p> <div id="questionnairecontents">えええええ</div> </div> </div> <div id="PR4"> <br> <ddd> <br> <div id="PRsection4"> <br> <a href=""> <img src="" alt="" class="PRimage04"></a> </div> </div> <div id="pagetop"> <br> <br> <a href="#logoimage">ページの先頭へ▲</a> </div> <hr class="beforefooter"> <div id="aboutus"> <div id="aboutussection"> <p class="aboutustitle">管理会社</p> <p><a href="Aboutus.html"><img src ="Aboutus.jpg" class="aboutusimage"></a></p> </div> </div> <br> <br> <hr class="beforefooter"> </div> <!--全体のdiv--> </body> </html> [ css側] @charset "Shift_Jis"; body { overflow-y:auto overflow-x:auto text-align:center; cursor:url("images/.png"); } #allitem{ cursor:url("images/.png"); } #zentai{ width:1000px; margin-left:auto; margin-right:auto; } .title{ margin-top:0px; margin-bottom:0px; font-size : 20px; border-style:solid; width:592px; background-color:#FFFF99; padding:3px; } #part{ clear:left; float:left; height:180px; width:642px; padding-right:147px; font-size : 20px; } #partnerwaku{ height:140px; width:600px; border-style:solid; border-color: #000099; } #PR{ float:left; width:180px; height:120px; } #PRsection{ border-style:solid; border-color: #000099; } #PR2{ float:left; width:185px; height:150px; } #PRsection2{ border-style:solid; border-color: #000099; } .PRimage01{ width:170px; height:80px; } .PRimage02{ width:165px; height:100px; } #kuhaku{ clear:left; height:20px; } #columnwaku{ float:left; clear:left; height:130px; width:790px; } #columnbun{ height:120px; width:600px; } #columncontents{ height:140px; width:600px; border-style:solid; border-color: #000099; } .columnarticle01{ height:70px; width:400px; background-color:#CC99CC; } #PR3{ float:left; width:185px; height:150px; } #PRsection3{ border-style:solid; border-color: #000099; } .PRimage03{ width:165px; height:100px; } #questionnairesection{ clear:left; float:left; height:130px; width:1050px; } #questionnaire{ width:600px; border-radius: 20px; } #questionnairecontents{ height:140px; width:600px; border-style:solid; border-color: #000099; } #PR4{ float:left; width:185px; height:150px; } #PRsection4{ border-style:solid; border-color: #000099; } .PRimage04{ width:165px; height:100px; } 文字制限のため省略
- KAIJI-000
- お礼率45% (225/492)
- HTML
- 回答数4
- ありがとう数15
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
スタイルシート部分です。 CSS2の本来の書き方に則しています。 CSS2では、基点となるセレクタに続いて「つなげるセレクタ」でつなげていきます。そのため*(全称セレクタ)が追加されています。 #PRとは、*#PRと感謝腐れます。idがPRの値のすべての要素と言う意味です。 しかし、基点となるセレクタを書く癖をつけたほうが後々楽です。他のページで別の箇所に同じPRidが使われていても適用されないので混乱しなくてすみます。 ★子孫セレクタ、隣接セレクタ、属性セレクタなどを活用して、HTMLの文書構造にしたがってセレクタを書く技術を身につけましょう。ものすごく分かりやすくなります。極端に言うとHTMLを見なくてもデザインできるようになります。 [例] div.section div.section p.Logo{ はsection(本文)ブロックの内=子孫(半角スペース)のsectionブロック内のclass属性にLogoを持つp要素と読みます。 div.section div.section+div.section{margin-top:50px;} は、そのうちのdiv.sectionと隣接した(+)sectionについてのmargin-topの指定です。 div.section div.section{}で指定したmargin:0を上書きでます。 詳細度が大きいからです。 ￣￣￣￣￣￣￣￣￣￣￣￣ div.section div.section+div.section 詳細度 [0 0 3 3] ・・・33 div.section div.section 詳細度[0 0 2 2] ・・・22 div.section 詳細度[0 0 1 1] ・・・11 ⇒5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html ) ⇒6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html ) はスタイルシートを理解する時に必須です。これを知っていると知らないとでは、まるで違います。いちいちidやclassを書かなくて良くなるので楽です。メンテナンス性が劇的に改善される。 以下、スタイルシート部分 ★タブは＿に置換してあるので戻す。 ＿<style type="text/css"> <!-- html,body{margin:0;padding:0;} /* ディスプレイ幅に影響されないようリキッドにしておく */ /* スマホでも超幅広ディスプレイでも利用可能 */ div.header, div.section, div.footer{ ＿width:90%;min-width:630px;max-width:890px; ＿margin:0 auto;padding:5px; } div.header div#contentTable h3, div.section div.section h3{ ＿margin:0;line-height:1.8em; ＿border-bottom:2px gray solid; ＿padding:0 0.5em; ＿background-color:rgb(255,255,200); } div.header div#contentTable ol, div.header div#contentTable ol li{ ＿list-style:none;margin:0;padding:0; ＿text-align:ceter; } div.header div#contentTable ol li{ ＿margin:3px; } div.header div#contentTable ol li{ ＿display:inline-block; ＿width:22%; ＿position:relative; } div.header div#contentTable ol li img{ ＿display:block;/* 画像をblockにしてサイズ変更するように */ ＿width:90%;height:auto; } div.section{position:relative;} div.header div#contentTable, div.section div.section{ ＿min-width:0;width:auto; ＿margin-right:170px; ＿border:solid 2px gray; ＿min-height:160px;/* 挿絵画像のサイズが大きい場合はHTML側で指定 */ ＿padding:0; ＿position:relative;/* 子孫のサイズ基にするためrelative */ } div.section p{ ＿margin:0 1em; ＿text-indent:1em; ＿line-height:1.6em; } /* 二つ目以降(隣接セレクタ)のsub sectionの上マージンを指定*/ div.section div.section+div.section{ ＿margin-top:50px; } div.header div#contentTable p.Logo, div.section div.section p.Logo{ ＿margin:0;height:100%;/* relativeな親ブロックのサイズを基準 */ ＿position:absolute; ＿top:0;right:-170px; ＿width:160px; ＿text-align:center; } p.Logo img{ ＿display:block;/* 画像をblockにしてサイズ変更するように */ ＿width:90%;height:auto; ＿margin:5px auto; } div.guest h3:before{content:"Gest ";}/* ゲスト記事の目印 */ /* 分かりやすいように色をつけておく */ div.header{background-color:yellow;} div.section{background-color:silver;} div.footer{background-color:aqua;} div.section div.section{background-color:white;} div.header div#contentTable{background-color:lime;} div.section div.section p.Logo{background-color:fuchsia;} div.header div#contentTable p.Logo{background-color:orange;} div.section div.column h3{background-color:red;} --> ＿</style>
その他の回答 (3)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
遅くなって申し訳ない。なかなか時間が取れなくて・・ ＞イメージとしては ＞コラム コラム記事パートナー枠が１つ ＞ゲスト記事 ここにゲスト記事パートナー枠が１つ ＞ゲスト記事 ここにゲスト記事パートナー枠が１つ ＞ゲスト記事 ここにゲスト記事パートナー枠が１つ との事ですから、勝手に解釈して、分かりやすいようにHTML5的に文書構造を整理すると <body> <header> <div id="tableContent"> ・・・ゲストパートナーの記事へのリンク(目次) <div> </header> <section> <section> <h2>コラム</h2> 記事 <p><a href="">画像</a></p> </section> --- <section> ↑ <h2>ゲスト記事</h2> 1セット 記事 ↓ <p><a href="">画像</a></p> --- </section> --- <section> ↑ <h2>ゲスト記事</h2> 1セット 記事 ↓ <p><a href="">画像</a></p> --- </section> ・・・・略 </section> <footer> </footer> </body> subSectionに、リンク先として画像がひとつ含まれているとします。 ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣ と勝手に判断してHTMLを書いてみました。 1)いずれにしても、文書構造をHTMLでしっかりとマークアップする。 結果的にそれが分かりやすいデザインに通じますが、この段階ではデザインは考えない。 2)そうして示された文書構造にしたがって、スタイルシートでデザイン ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣ これが、すべての基本です。文書構造しかHTMLに書かれていないため、将来内容やデザインの変更も楽ですし、誰が見てもわかる物になるでしょう。 あなたのHTMLと比較してみてください。ポイントが分かると思います。 面倒くさいかもしれませんが、理解しやすいように・・ ★用意する物 ./images/Logo/A.gif～D.gif width:140px height:140px ./images/Figure/PR.jpg width:120 height:80px ./images/Figure/column.jpg width:120 height:80px ./images/Figure/A.jpg～D.jpg width:120 height:80px <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>ページタイトル</h1> ＿＿<div id="contentTable" > ＿＿＿<h3>パートナー枠</h3> ＿＿＿<ol> ＿＿＿＿<li><a href="#A"><img src="./images/Logo/A.gif" width="140" height="140" alt="A社"></a></li> ＿＿＿＿<li><a href="#B"><img src="./images/Logo/B.gif" width="140" height="140" alt="B社"></a></li> ＿＿＿＿<li><a href="#C"><img src="./images/Logo/C.gif" width="140" height="140" alt="C社"></a></li> ＿＿＿＿<li><a href="#D"><img src="./images/Logo/D.gif" width="140" height="140" alt="D社"></a></li> ＿＿＿</ol> ＿＿＿<p class="Logo"> ＿＿＿＿<a href=""><img src="./images/Figure/PR.jpg" width="120" height="80" alt="写真"></a> ＿＿＿</p> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<div class="section column" id="column"> ＿＿＿<h3>コラム</h3> ＿＿＿<p> ＿＿＿＿コラム記事 ＿＿＿</p> ＿＿＿<p class="Logo"> ＿＿＿＿<a href=""><img src="./images/Figure/column.jpg" width="120" height="80" alt="コラム用・・・の写真"></a> ＿＿＿</p> ＿＿</div> ＿＿<div class="section guest" id="A"> ＿＿＿<h3>ゲスト記事A</h3> ＿＿＿<p> ＿＿＿＿記事 ＿＿＿</p> ＿＿＿<p class="Logo"> ＿＿＿＿<a href=""><img src="./images/Figure/a.jpg" width="120" height="80" alt="Aへ"></a> ＿＿＿</p> ＿＿</div> ＿＿<div class="section guest" id="B"> ＿＿＿<h3>ゲスト記事B</h3> ＿＿＿<p> ＿＿＿＿記事 ＿＿＿</p> ＿＿＿<p class="Logo"> ＿＿＿＿<a href=""><img src="./images/Figure/b.jpg" width="120" height="80" alt="Bへ"></a> ＿＿＿</p> ＿＿</div> ＿＿<div class="section guest" id="C"> ＿＿＿<h3>ゲスト記事C</h3> ＿＿＿<p> ＿＿＿＿記事 ＿＿＿</p> ＿＿＿<p class="Logo"> ＿＿＿＿<a href=""><img src="./images/Figure/c.jpg" width="120" height="80" alt="Cへ"></a> ＿＿＿</p> ＿＿</div> ＿＿<div class="section guest" id="D"> ＿＿＿<h3>ゲスト記事D</h3> ＿＿＿<p> ＿＿＿＿これらの記事はいくつ増減しても構いません。 ＿＿＿</p> ＿＿＿<p class="Logo"> ＿＿＿＿<a href=""><img src="./images/Figure/d.jpg" width="120" height="80" alt="Dへ"></a> ＿＿＿</p> ＿＿</div> ＿＿<p class="goTop"><a href="#Top">ページの先頭へ▲</a></p> ＿</div> ＿<div class="footer"> ＿＿<h2>管理会社</h2> ＿＿<address><a href="Aboutus.html"><img src ="Aboutus.jpg"></a></p> ＿</div> </body> </html>
お礼
こちらこそ亀レスですいません。
- dragon_blade
- ベストアンサー率33% (1/3)
ぱっと見た感じではとても分かりにくい印象を受けました。 まず、<p class="title">は見出し要素の<h1>や<h2>などに変え、 <br>の使い方も前の方が言われてるとおり不適切だと思います。 <!-- コンテンツその１ ここから --> <div class="section" id="content1"> <h2>あああああ</h2> <ul> <li><a><img src="" alt="～のロゴ"></a></li> <li><a><img src="" alt="～のロゴ"></a></li> <li><a><img src="" alt="～のロゴ"></a></li> <li><a><img src="" alt="～のロゴ"></a></li> </ul> </div> <!-- コンテンツその１ ここから --> <!-- コンテンツその２ ここから --> <div class="section" id="content2"> <h2>いいいいい</h2> <p><img src="" alt="" width="" height=""></p> </div> <!-- コンテンツその２ ここまで --> <!-- コンテンツその３ ここから --> <div class="section" id="content3"> <h2>ううううう</h2> <p>えええええ</p> <p><ddd></p> </div> <!-- コンテンツその３ ここまで --> </body> みたいな書き方もあると思いますので、 まずは誰もがわかる様なHTMLに書き換えたり、コメントなどを入れた方が、 今後管理していく上でも、質問等される場合にもいいと思いました。 あと余白はスタイルシート上で必要な部分にmarginやpaddingを設定してあげると、もしかしたら上手くいくかもしれません。
補足
<div class="section" id="content1"> の部分ですが、僕の書いたもののどれにあたるのでしょうか？ 少しだけでもcssの方も提示していただけませんか？
- ORUKA1951
- ベストアンサー率45% (5062/11036)
ご苦労様としか・・ とても苦労して書かれたHTML,CSSだと言うことだけは分かりますが、書かれた、ご自身でも難儀している物・・他人には地獄です。数年後の将来あなたがメンテナンスしようにも手がつけられないと思います。 ここまで書かれているくらいですから、下記に色々なリンクを上げて説明しておきます。その上で、最後のサンプルコードを元にHTMLを書き直してください。その上でどのように配置したいかの図を示されると良いでしょう。【だいたいは分かりました(^^)】 スタイルシートをきちんと適用させようとしたら、『CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。.( http://jigsaw.w3.org/css-validator/#validate_by_input )』 ・HTMLには文書構造以外書かない!! スタイルシートを使うときの前提です。 ⇒2.4.1 構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 ) ・HTMLはstrictで記述する 『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』 ・DIVはデザインのために書かない。HTMLに用意されている要素で文書構造が示しきらない時に 『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』 その際、idではなくclassで指定するのが原則です。class名はHTML5の【新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )】がその用途と共にとても参考になります。 ※細かいことのようですが大事なこと a) 余白を開けるために<br>を使うのは誤りです。スタイルシートで指定します。 b) 各セクションには必ず見出しを入れるようにします。(実際には描画しなくても) c) 文書は基本的に、header、section(本文)、footerで構成されているはずです。 記事と直接関係ないものは、asideになり、本文より後に書きましょう。 検索エンジンは、HTML5の新しい要素名になったようなclass名は理解できてます。 e) スタイルシートはHTMLの文書構造を元に記述します。 ★下記のようなHTMLでしたら、私の書いた物であっても他人のあなたで簡単にテキストの追加や変更ができるでしょう。文書構造しか書いてないから・・。 ・パートナーの紹介？？？と思われるセクションは、このページの内容とは直接関係しないと判断してsectionの後半にasideとして回しました。もし重要ならsectionにして前に移動する。 ・PRは当然asideとして最後にまわしてあります。 ・リンクのターゲットとして必要そうな物以外idはつけていません。 これ以上のid,class名は不要なはずです。 それでいて、スタイルは書けます。それもはるかに簡単に分かりやすく。 ★タブは＿に置換してあるので戻すこと。 投稿時にはまた＿に直して・・ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- --> ＿</style> </head> <body> ＿<div class="header" id="TOP"> ＿＿<h1>ページタイトル</h1> ＿</div> ＿<div class="section"> ＿＿<div class="section" id="column"> ＿＿＿<h3>コラム</h3> ＿＿＿<p> ＿＿＿＿<img src="./images/Figure/a.jpg" width="120" height="80" alt="コラム用・・・の写真"> ＿＿＿＿コラム記事 ＿＿＿</p> ＿＿</div> ＿＿<div class="section" id="guest"> ＿＿＿<h3>ゲスト記事</h3> ＿＿＿<p> ＿＿＿＿<img src="./images/Figure/a.jpg" width="120" height="80" alt="・・・の写真"> ＿＿＿＿ここにゲスト記事記事 ＿＿＿</p> ＿＿</div> ＿＿<div class="aside" > ＿＿＿<h3>パートナー枠</h3> ＿＿＿<ol> ＿＿＿＿<li><a href="A"><img src="./images/Logo/A.gif" width="140" height="140" alt="A社"></a></li> ＿＿＿＿<li><a href="B"><img src="./images/Logo/B.gif" width="140" height="140" alt="B社"></a></li> ＿＿＿＿<li><a href="C"><img src="./images/Logo/C.gif" width="140" height="140" alt="C社"></a></li> ＿＿＿＿<li><a href="D"><img src="./images/Logo/D.gif" width="140" height="140" alt="D社"></a></li> ＿＿＿</ol> ＿＿</div> ＿＿<div class="aside"> ＿＿＿<h3>PR枠</h3> ＿＿＿<div class="section"> ＿＿＿＿<h3>PR1</h3> ＿＿＿＿<p><img src="./images/Logo/Pr1.gif" width="160" height="120" alt=""></p> ＿＿＿</div> ＿＿＿<div class="section"> ＿＿＿＿<h3>PR2</h3> ＿＿＿＿<p><img src="./images/Logo/Pr2.gif" width="160" height="120" alt=""></p> ＿＿＿</div> ＿＿＿<div class="section"> ＿＿＿＿<h3>PR3</h3> ＿＿＿＿<p><img src="./images/Logo/Pr3.gif" width="160" height="120" alt=""></p> ＿＿＿</div> ＿＿＿<div class="section"> ＿＿＿＿<h3>PR4</h3> ＿＿＿＿<p><img src="./images/Logo/Pr4.gif" width="160" height="120" alt=""></p> ＿＿＿</div> ＿＿</div> ＿＿<p class="goTop"><a href="#TOP">ページの先頭へ</a></p> ＿</div> ＿<div class="footer"> ＿＿<h2>管理会社</h2> ＿＿<address><a href="Aboutus.html"><img src ="Aboutus.jpg"></a></p> ＿</div> </body> </html>
お礼
本当に、本当に丁寧にすいません。20ptでは足りなくらいのご解説です。1度試してみます。取り急ぎ、お礼文を書かせていただきました。 素人の勢いでやり過ぎました。
補足
ゲスト記事をあと２つ足したいです。そしてパートナー枠がその右に並びます。 イメージとしては コラム コラム記事 パートナー枠が１つ ゲスト記事 ここにゲスト記事 パートナー枠が１つ ゲスト記事 ここにゲスト記事 パートナー枠が１つ ゲスト記事 ここにゲスト記事 パートナー枠が１つ という感じです。 ページの先頭へ 以下は大丈夫です。
関連するQ&A
- レイアウト、フッターが崩れてしまいます。
横800pxの外枠にフッター部分を枠内の下に綺麗に収まるよう配置したいのですが、ブラウザーで確認するとフッター部が上に配置されてたり、mainのテキスト部分や外枠のレイアウトが表示されてなかったり、崩れてしまいます。またｓａｆａｒｉ、firefoxを使って確認してるのですが、同じように表示されません。どこが間違っているのか、教えて頂けると助かります。 ＊html <body> <div id="wrapper"> <div id="headir"> <h1>The highest hiphop design All group</h1> <div class="logo"><img src="＃”></div> </div> <span id="menu"><ul><li><img src="＃" alt="＃" width="200" height="100" /></li><li><img src="＃" alt="＃" width="200" height="100" /></li><li><img src＝”＃" alt="＃" width="200" height="100" /></li><li><img src="＃" alt="＃" width="200" height="100" /></li></ul></span> <h2><img src="＃" alt="＃" /></h2> <span id="sidemenu"> <ul> <li><a href="#">TOP</a></li> <br /> <li><a href="#">NEW</a></li> <br /> <li><a href="#">Line</a></li> <br /> <li><a href="#">Fine</a></li> <br /> <li><a href="#">Mail</a></li> <br /> <li><a href="#">TOP02</a></li> <br /> <li><a href="#">NEW02</a></li> <br /> <li><a href="#">Line02</a></li> <br /> <li><a href="#">Fine02</a></li> <br /> <li><a href="#">Mail02</a></li> </ul> </span> <div id="main"> ～～ ～～ </div> <div id="footer"> <span align="center">©＃</span> </div> </div> </body> </html> ＊css body { font-family: "ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3"; margin:0px; padding:0px; } #wrapper { margin: auto; padding:auto; height: 100%; width: 800px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-left-style: solid; border-top-color: #000000; border-right-color: #000000; border-left-color: #000000; border-bottom-style: solid; border-bottom-color: #000000; } #headir { padding: 0px; margin:0px; height: 220px; width: 800px; } #headir h1{ margin: 0px; padding: 0px; height:20px; font-family: "ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3"; font-size:small; text-align: left; } .logo{ padding-bottom:20px;} #menu ul { padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; width:800px; height:100px; list-style-type : none; } #menu li{ display:inline; padding-bottom:20px; } span#sidemenu { height: 300px; width: 50px; float:left; margin-top: -19px; margin-right: 8px; margin-bottom: 0px; margin-left: 0px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #000000; border-right-color: #000000; border-bottom-color: #000000; border-left-color: #000000; font-size: smaller; } span#sidemenu li{ list-style-type:none; text-indent: -30px; } span#sidemenu{ padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; } div#main { margin-top: 20px; margin-right: 40px; margin-left:30px; margin-bottom:20px; font-size: small; text-align: left; left: 150px; light: 50px; height: 400px; width: 600px; } div#main p { padding-left:10px; padding-light:20px; padding-top:10px; padding-bottom:20px; } #footer{ height:３0px; width:100%; background-color: #CC9933; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border: 1; border-left-width: 1px; border-left: 1; z-index: 2; position: relative; margin: 0; padding: 20px 0 0 20px; }
- 締切済み
- その他([技術者向] コンピューター)
- 初歩的かもしれませんが回り込みが上手くできません
初歩的かもしれませんが回り込みが上手くできません イメージ的には、図のようなdivを４つ横に並べて改行、同じように繰り返したいです。 ■■■■ ■■■■ しかし、下記の様にすれば ■■■ ■ ■■■ ■ に、なってしまいます。 こういう場合、どうすればいいのでしょうか？？ <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave1</a></div> <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave2</a></div> <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave3</a></div> <div class="sample" style=" width:120px; "><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave4</a></div> <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave5</a></div> <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave6</a></div> <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave7</a></div> <div class="sample" style=" width:120px; "><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave8</a></div>
- ベストアンサー
- CSS
- お世話になっております。fc2でblogを運営しているものです。
お世話になっております。fc2でblogを運営しているものです。 テンプレートをいじってロールオーバーボタンを作ってみたいのですがどうしてもできません。 以下ソースになります。 HTML： <!--navi--> <div id="navi"> <div class="navi01"> <a href="○○○○○○"><img src="○○○○○○" alt="blog ボタン トップ" border="0" width="120" height="30" /></a> </div> <div class="navi02"> <a href="○○○○○○"><img src="○○○○○○" alt="blog ボタン イラスト" border="0" width="120" height="30" /></a> </div> <div class="navi03"> <a href="○○○○○○"><img src="○○○○○○" alt="blog ボタン マンガ" border="0" width="120" height="30" /></a> </div> <div class="navi04"> <a href="○○○○○○"><img src="○○○○○○" alt="blog ボタン その他" border="0" width="120" height="30" /></a> </div> <div class="navi05"> <a href="○○○○○○"><img src="○○○○○○" alt="blog ボタン 掲示板" border="0" width="120" height="30" /></a> </div> <div class="navi06"> <a href="○○○○○○"><img src="○○○○○○" alt="blog ボタン メール" border="0" width="120" height="30" /></a> </div> </div> <!--navi--> CSS： #navi { margin : 0 auto; margin-top : 5px; width : 800px; } .navi01 { float : left; margin-left: 15px; } .navi02 { float : left; margin-left: 10px; } .navi03 { float : left; margin-left: 10px; } .navi04 { float : left; margin-left: 10px; } .navi05 { float : left; margin-left: 10px; } .navi06 { float : left; margin-left: 10px; } です。navi01～navi06までがボタン。それをnaviでグループ化しているイメージです。 ○○○○○○には当然ソースが書いてあります。各ボタンのロールオーバー用ボタンは用意してあります。 どのようなHTML、CSSを書けばよろしいでしょうか。よろしくお願いいたします。
- ベストアンサー
- ブログ
- ドロップダウンメニューの方法を教えてください
■ドロップダウンメニューでサブメニューが横並びで出るようにしたいと思っています。 HTMLは下記のように記述しています。どのようにJavascriptを記述すると良いのか教えてください。よろしくお願いします。 【html】 <div id="menuber"> <a href="#"><IMG src="test/m1.gif" width="101" height="20" border="0" align="left"></a> <div class="hiddenmenus"> <span id="sub"> <a href="#"><IMG src="test/sub1.gif" width="101" height="20" border="0" align="left"></a> <a href="#"><IMG src="test/sub2.gif" width="101" height="20" border="0" align="left"></a> <a href="#"><IMG src="test/sub3.gif" width="101" height="20" border="0" align="left"></a> <a href="#"><IMG src="test/sub4.gif" width="101" height="20" border="0" align="left"></a> </span> </div> </div> 【CSS】 .hiddenmenus {position:absolute; top: 20px; left: 0px;} #sub1 { visibility: hidden; }
- ベストアンサー
- JavaScript
- Divの入れ子とHeight
こんにちわ。初歩的な質問かもしれませんがお願いします。 DivのContainerの中にPosition:Absoluteの３つのDivを入れ子にしたいんですが、Containerの高さを中身のDivの高さに依存する形にしたいのですが、うまくいきません。 Containerの高さと中身のコンテンツの高さをAutoにした場合、中身のほうは内容に依存する形で高さが自動になるんですが、Containerのほうがうまくいきません。FloatをつかわずにPosition:Absoluteでして、Containerを中身の高さに依存、という風にする方法はないのでしょうか？ こちらがコードです。 HTML CODE <HTML> <HEAD> <link rel="stylesheet" href="hp.css" type="text/css" /> </HEAD> <BODY> <div class="container"> <div class="banner"> </div> <div class="menu"> </div> <div class="main"> a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br> </div> </div> </BODY> </HTML> CSS CODE * {margin:0;padding: 0;} div.container{border:2px solid RGB(888888); position: absolute; top:20px; left:50px; width:900px; height:auto;} div.banner { position: absolute; top:20px; left:80px; width:700px; height:150px; border:2px solid RGB(888888);} div.menu{ position: absolute; top:190px; left:30px; width:150px; height:300px; font-weight:bold; border:2px solid RGB(888888);} div.main{ position:absolute; top:190px; left:200px; width:600px; height:auto; border:2px solid RGB(888888);}
- ベストアンサー
- HTML
- <div>この余白は・・・
<div>で作ったボックスの中に、さらに<div>のボックスを二つ（box、box2）並べたいのですが、float:leftでboxを左に寄せると、次に回り込んで表示されるbox2との間にかなりの余白があります。 CSSでbox、box2にmarginは指定していないのですが、この余白は何なんでしょうか？ また、このbox、box2をある程度間に余白を持たせた上でセンタリングしたいのですが、これもなぜかうまくいきません・・・。 ▼HTML <div class="out"> <div class="title"> <img src="img/title.jpg" width="700" height="75" border="0"> </div> <div class="main"> <img src="img/main.jpg" width="700" height="375" border="0"> </div> <div class="menu"> <img src="img/home_a.jpg" width="100" height="35" border="0"> <img src="img/first.jpg" width="100" height="35" border="0"> <img src="img/info.jpg" width="100" height="35" border="0"> <img src="img/order.jpg" width="100" height="35" border="0"> <img src="img/support.jpg" width="100" height="35" border="0"> <img src="img/link.jpg" width="100" height="35" border="0"> <img src="img/question.jpg" width="100" height="35" border="0"> </div> <div class="area"> <div class="box"> <h5>AAAAAAAAA</h5> <img src="img/kari.gif" width="250" height="100" border="0"> </div> <div class="box2"> <h5>BBBBBBBBB</h5> <img src="img/kari2.gif" width="250" height="100" border="0"> </div> </div> </div> ▼CSS div.out{ width:700px; background-color:#ffffff; } div.main{ border-style:solid none solid none; border-width:10px; border-color:#666666; } div.menu{ margin-bottom:50px; } div.area{ text-align:center; padding:0.7em; border:solid; border-color:red; } div.box{ float:left; width:250px; border-style:none solid solid solid; border-width:1px; border-color:#99ccff; background-color:#99ccff; } div.box2{ width:250px; border-style:none solid solid solid; border-width:1px; border-color:#99ccff; background-color:#99ccff; } h5{ margin-bottom:0px; padding:0.5em; } どなたか知恵をお貸しください。よろしくお願いいたします。
- ベストアンサー
- HTML
- CSSで表示が、、、
写真を並べているページなのですが、 firefox と IE での縦のスペースの空き具合が異なってしまいます。 IEで見ると、firefoxよりも大きく立て幅が空いてしまい 揃ってくれません。 回避策をググって色々試してみたのですが 上手くいきませんorz ひょっとしたらコード的にどこかおかしいのかも しれないのですが、、、どなたか助言をお願いしますm(_ _)m -- html-- <div class="navi" > <div class="pic2"><a href="01.html"><img src="pic/1mini.jpg" width="200" height="150" border="0" /></a></div> <div class="pic2"><a href="02.html"><img src="pic/2mini.jpg" width="200" height="150" border="0" /></a></div> <div class="pic2"><a href="03.html"><img src="pic/3mini.jpg" width="200" height="147" border="0" /></a></div> <div class="pic2"><a href="04.html"><img src="pic/4mini.jpg" width="200" height="151" border="0" /></a></div> </div><!--navi--> -- 外部CSS -- .pic2 { float: left; margin-left:30px; margin-top:20px; } .navi { clear:both; margin-top:40px; }
- ベストアンサー
- CSS
- borderの範囲
cssコーディングに関しての質問です。 現在以下のようなスタイルとHTMLを組んでいます。 ==css============ #style1 { width:500px; padding: 15px 0 0 15px; border-left:1px solid #ccc; border-top: 1px solid #ccc; } #style1 p { margin:0; padding:0; } .style2 { float:right; clear:both; margin:0 0 20px 30px; } .style2 img{ margin:0; padding:0; } ==html============ <body> <div id="style1"> <div class="style2"><img src="sample.jpg" width="200" height="200"></div> <div class="style2"><img src="sample.jpg" width="200" height="200"></div> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> </body> イメージをfloat:right;に指定し、 縦並びにしたいので、clear:both;を入れた所、 border-left:1px solid #ccc;のborderが文字までは表示されるのですが、 画像の延長上は無くなって表示されてしまいます。 右に画像を配置し borderを伸ばしたい時はどのようにすればよいのでしょうか？ よろしくお願いします！
- ベストアンサー
- HTML
- div枠のレイアウトが崩れてしまいます
２×２段の枠を作るために、下のような段組にしました。 100％表示ではうまく表示するのですが、ウィンドウを縮小すると、 div要素が勝手に改行してしまい、レイアウトが崩れてしまいます。 同じような質問を参考にして、"wrap"の幅設定をしてみたり、 div要素に｛position:relative;}を追加してみたりしましたが、 どれもうまくいかず、縮小でレイアウトが崩れます。 ウィンドウを縮小してもレイアウトが崩れないようにする方法はあるでしょうか？ それと、もう１つ質問があります。 右上の枠内の画像を「枠内の右下」に表示したいのですが、よい方法はありますか？ {text-align:right;}で横位置は移動できたのですが、縦位置がうまく設定できません。 画像自体に｛potision:absolute;}{top:**}{left:**｝で指定すると、 またウィンドウの倍率変更でとんでもないところに表示されてしまいます。 【html】 <body> <div id="wrap"> <img src="image/title.gif"> <div id="left-up">あああ</div> <div id="right-up"><img src="logo.jpg"></div> <br class="clear"> <div id="left-down">いいい</div> <div id="right-down">ううう</div> </div> <!-- /wrap--> </body> 【css】 #wrap{ width: 945px; height: 700px; padding: 0px; border: 1px #202020 solid; margin: 0 auto; text-align: left; } #left-up{ width: 160px; height: 80px; border-top: 1px solid #606060; border-right: 1px solid #606060; float: left; } #right-up{ width: 780px; height: 80px; border-top: 1px solid #606060; float: left; } .clear{ clear: left; } #left-down{ width: 160px; height: 500px; border-top: 1px solid #606060; border-right: 1px solid #606060; border-bottom: 1px solid #606060; float: left; } #right-down{ width: 780px; height: 500px; border-top: 1px solid #606060; border-bottom: 1px solid #606060; float: left; } よろしくお願いいたします。 そもそも、この枠組みの仕方が無謀であれば、何かよい方法を教えていただけないでしょうか。 重ね重ね申し訳ありません。
- ベストアンサー
- HTML
- カラムの高さを合わせる
ソース記述の為、長いですがお付き合いください。 http://okwave.jp/qa/q7547642.htmlでした質問を変えたものです。 html5で以下の様に記述しました <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="author" content="へのへのもへじ"> <meta name="keywords" content="へのへのもへじ"> <meta name="description" content="へのへのもへじ"> <link rel="stylesheet" href="style.css"> <title>へのへのもへじ</title> </head> <body> <div id="head"> <h1>へのへのもへじのサイト</h1> </div> <div id="container"> <div id="header"><img src="title.png" alt="へのへのもへじ" width="100%" height="120"></div> <div id="menu"> <ul style="list-style-type: none"> <li><a href="index.html">1</a></li> <ul style="list-style-type: none"> <li><a href="index.html">2</a></li> <li class="sub"><a href="index.html">2-1</a></li> <li class="sub"><a href="index.html">2-2</a></li> <ul style="list-style-type: none"> <li><a href="index.html">3</a></li> <li class="sub"><a href="index.html">3-1</a></li> <li class="sub"><a href="index.html">3-2</a></li> <ul style="list-style-type: none"> <li><a href="index.html">4</a></li> <li class="sub"><a href="index.html">4-1</a></li> <li class="sub"><a href="index.html">4-2</a></li> <ul style="list-style-type: none"> <li><a href="index.html">5</a></li> <li class="sub"><a href="index.html">5-1</a></li> <li class="sub"><a href="index.html">5-2</a></li> </ul> </div> <div id="contents"> <p> 本文<br> 本文<br> 本文<br> 本文<br> </p> <p>★</p> <p>本文<br> 本文<br> 本文<br> 本文<br> </p> </div> </div> <div id="footer">フッター</div> </div> </div> </body></html> そしてcssに @charset "UTF-8"; * { margin:0; padding:0; } body { line-height:150% } #head { width:100%; padding:22px; text-align:center; margin:0 auto; font-size:10px; text-decoration:none; } #container { width:900px; margin:0 auto; min-height:1000px; } #header { width:898px; height:120px; margin:0 auto; border-top:solid 1px #000000; border-left:solid 1px #000000; border-right:solid 1px #000000; border-bottom:solid 8px #0000ff; } #menu { float:left; width:148px; min-height:1018px; background-color:#aaffdd; border-top:dotted 1px #666666; border-left:solid 1px #666666; border-right:solid 1px #666666; } #menu a{ display:block; height:100%; padding:11px 9px 11px 9px; margin:0 auto; text-decoration:none; border-top:dotted 1px #666666; background-color:#aaffdd; list-style:none; } #menu li.sub a{ display:block; height:100%; padding:9px 3px 9px 22px; text-decoration:none; font-size:small; font-color:red; border-top:dotted 1px #666666; background-color:#aaffdd; list-style:none; } #menu a:hover{ background-color:#FFE4E1; } #menu li.sub a:hover{ background-color:#FFE4E1; } #contents { float:left; width:731px; min-height:1000px; margin:0 auto; padding:9px 9px 9px 9px; border-top:solid 1px #000000; border-right:solid 1px #000000; text-align:center; background-color:#fce5fd; } #contents p{ margin-top:2em } #footer { clear:both; width:900px; height:100%; margin:0 auto; padding-top:10px; padding-bottom:10px; font-size:small; color:#ffffff; text-align:center; background-color:#555555; } と書きました。 ここで現在のカラムの高さだと本文領域とメニュー領域が合ってるのですが、 本文領域がグーッと延びて、、、 例えば<p>★</p>の部分が「<p>★</p><p>★</p><p>★</p><p>★</p><p>★</p><p>★</p><p>★</p> <p>★</p><p>★</p><p>★</p><p>★</p><p>★</p><p>★</p><p>★</p> <p>★</p><p>★</p><p>★</p><p>★</p><p>★</p><p>★</p><p>★</p>」みたいになったら、 メニュー領域のmin-heightを追い越して長くなります。 この時にメニュー領域が寸足らずになって、 今回で言うと緑の部分が千切れて白い背景の部分になります。 右の本文領域が長くなってもメニュー領域がその長さに付き合って同じ高さに揃えるにはどうしたらいいでしょうか？ また、メニューの5-2の下にborderを引きたいのですが、 現状だとメニュー全体の下に入ってしまいます。 他の各メニューと同じような位置でborderを引くにはどうしたらよいでしょうか？ 宜しくお願いします。
- 締切済み
- CSS
お礼
亀レスですいませんでした。