- ベストアンサー
divでレイアウト
質問1 divでレイアウトを組む時、枠線の重なったときに線が太くなってしまいます 重なった時に１本の線にできませんか？ 質問2 ieで表示しています divの枠線をつけるとdivの幅+枠線の幅になるのでしょうか？同様にパティングはdivの幅+paddingの幅になるのですか？ 質問3 divでレイアウトを組む時、divとdivのスペースは空けたほうがいいでしょうか？ よろしくお願いします
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
1：別々の線なので1本にはなりません。 2：https://www.google.co.jp/search?q=%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%E3%83%A2%E3%83%87%E3%83%AB+%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%80%80%E9%81%95%E3%81%84 ちなみに「padding」…「d」ですよ。 3:divとdivのスペースだろうが「<div>でくくられたブロックと<div>でくくられたブロックのスペース」だろうが、そんなものはお好きにどうぞ。
その他の回答 (2)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
>質問１ border-left-width: 0 などとして片方を消せば、１本になります。 太くなるのであれば、それは重なっていません。となりに並んでいます。 ちゃんと重ねれば１本分の太さで表示されます。
お礼
回答ありがとうございます それは考えましたが枠線を消したほうのコンテンツが長くなるとカッコがわるくなるみたいです
- ORUKA1951
- ベストアンサー率45% (5062/11036)
HTMLを基礎からやり直すこと!!! divでレイアウトと言う考え方は、HTMLにはありません。 スタイルシートの説明サイトなどでよく使われている言い回しですが、それはdivをレイアウトすることについての説明で、レイアウトするためにdivを書くのではありません。似ているようですが、根本的に違うのですよ。・・・この最初の出発点を間違うから、分かりにくくなるのです。小さなことのようですが、上達には欠かせません。 スタイルシートでデザインする(プレゼンテーションを指定する)のは、「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」のためです。そうすることで「広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になる」からです。デザインのためにDIVを書いていたら『文書は複雑になり、ユーザーの制約も、改訂も難しくなります。』 ★DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 ) デザインではなく、用意されている要素(タグ)では足りないので、DIVを使うのです。 その文書構造を元にスタイルシートを書くのです。 ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣ (注)HTML4.01のこの↑部分が理解されたとは言いがたく、HTML5では『文書をよりよく構造化するために、( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )』、文書構造を示すための要素が追加されました。header,section,footer,nav,asideなど・・。言い換えれば、DIVは、これらをclass名にすべきだと言うこと。 さて、本題です。 例えば、次のようなHTMLがあったとします。 <div class="section"> <h2>本文見出し</h2> <div class="section"> <h3>1章見出し</h3> <p> ここからひとつの段落文章。 </p> <p> ここからひとつの段落文章。 </p> </div> <div class="section"> <h3>2章見出し</h3> <p> ここからひとつの段落文章。 </p> </div> </div> ここで、サブセクションの周囲にborderを引き、かつh3の周囲にもボーダーを引いて、 ┌────┐ │章見出し│ ├────┤ │段落文章│ │段落文章│ │段落文章│ └────┘ ┌────┐ │章見出し│ ├────┤ │段落文章│ │段落文章│ │段落文章│ └────┘ とデザインしたいとします。この場合、見出しや段落<p></p>には、ブラウザの元々持っているスタイルシートに上下にマージンがありますから、 div.section div.section, div.section div.section h3{ border:solid 1px gray; } とすると・・・。 ┌────┐ ┠────┨ ┃章見出し┃縦が二重 ┠────┨ │段落文章│ │段落文章│ │段落文章│ ┣━━━━┫二重 ┠────┨ ┃章見出し┃ ┠────┨ │段落文章│ │段落文章│ │段落文章│ └────┘ となってしまうはずです。 そこで div.section div.section{ border:solid 1px gray; } div.section div.section h3{ border-bottom:solid 1px gray;/* h3には下にだけborder */ margin:0;/* marginは0にして */ padding:0.5em 1em;/* 代わりにpadding */ } div.section div.section p{ margin:0.1em 1em; text-indent:1em; line0height:1.6em; } /*★ */ div.section div.section+div.section{ margin-top:1em;/* 2段目以降は上との隙間を空ける。 */ } ・・・ふたつのサブセクションをくっつけたいなら★部分は div.section div.section+div.section{ margin-top:0; border-top-width:0; } とすれば、くっついて、上のborderが引かれません。 全サンプル ⇒コンテンツとコンテンツの詰まり( http://okwave.jp/qa/q8308855.html ) も参考に!! ★Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html ) のDATA入力(右上)でチェック済み ★タブは＿に置換してあるので戻す。 <!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"> <!-- div.section div.section{ border:solid 1px gray; } div.section div.section h3{ border-bottom:solid 1px gray; margin:0; padding:0.5em 1em; } div.section div.section+div.section{ margin-top:1em; } div.section div.section p{ margin:0.1em 1em; text-indent:1em; line0height:1.6em; } /* 下のコメントをはずすとサブセクションがくっつく */ /* div.section div.section+div.section{ margin-top:0; border-top-width:0; } --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>本文見出し</h2> ＿＿<div class="section"> ＿＿＿<h3>1章見出し</h3> ＿＿＿<p> ＿＿＿＿ここからひとつの段落文章。 ＿＿＿</p> ＿＿＿<p> ＿＿＿＿ここからひとつの段落文章。 ＿＿＿</p> ＿＿</div> ＿＿<div class="section"> ＿＿＿<h3>2章見出し</h3> ＿＿＿<p> ＿＿＿＿ここからひとつの段落文章。 ＿＿＿</p> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2012-08-10 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
お礼
回答ありがとうございます 長くてわかりにくかったです
お礼
回答ありがとうございます やはりtableのように１本にはできないのですね。