- ベストアンサー
間隔を空けるにはどうしたらいいでしょうか？
- コンテンツとコンテンツの詰まり、Windows XP あるいは8、HTML 4.01において、あああああ と いいいいいの間隔はあいているのにいいいいい と うううううの間隔はなぜか詰ってしまっています。間隔を空けるにはどうしたらいいでしょうか？コードは以下の通りです。
- コンテンツとコンテンツの詰まりに関する問題が発生しています。あああああといいいいいの間隔は問題なく空いていますが、いいいいいとうううううの間隔が詰まってしまっています。この問題の解決方法を教えてください。
- コンテンツとコンテンツの間に空白を作る方法を教えてください。現在、あああああといいいいいの間隔は適切に空いていますが、いいいいいとうううううの間隔が狭くなってしまっています。どのように修正すれば良いでしょうか？
- みんなの回答 （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度試してみます。取り急ぎ、お礼文を書かせていただきました。 素人の勢いでやり過ぎました。
補足
ゲスト記事をあと２つ足したいです。そしてパートナー枠がその右に並びます。 イメージとしては コラム コラム記事 パートナー枠が１つ ゲスト記事 ここにゲスト記事 パートナー枠が１つ ゲスト記事 ここにゲスト記事 パートナー枠が１つ ゲスト記事 ここにゲスト記事 パートナー枠が１つ という感じです。 ページの先頭へ 以下は大丈夫です。
お礼
亀レスですいませんでした。