電子書籍の厳選無料作品が豊富！

divでレイアウト

解決済

  • 質問者：flash0
  • 質問日時：
  • 回答数：3件

質問1

divでレイアウトを組む時、枠線の重なったときに線が太くなってしまいます
重なった時に１本の線にできませんか？

質問2
ieで表示しています
divの枠線をつけるとdivの幅+枠線の幅になるのでしょうか？同様にパティングはdivの幅+paddingの幅になるのですか？

質問3
divでレイアウトを組む時、divとdivのスペースは空けたほうがいいでしょうか？


よろしくお願いします

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.1ベストアンサー

1：別々の線なので1本にはなりません。



2：https://www.google.co.jp/search?q=%E3%83%9C%E3%8 …
ちなみに「padding」…「d」ですよ。

3:divとdivのスペースだろうが「<div>でくくられたブロックと<div>でくくられたブロックのスペース」だろうが、そんなものはお好きにどうぞ。
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございます
やはりtableのように１本にはできないのですね。

通報する
お礼日時：2013/10/22 23:57

No.3

  • 回答者： taloo
  • 回答日時：

>質問１


border-left-width: 0
などとして片方を消せば、１本になります。

太くなるのであれば、それは重なっていません。となりに並んでいます。
ちゃんと重ねれば１本分の太さで表示されます。
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございます
それは考えましたが枠線を消したほうのコンテンツが長くなるとカッコがわるくなるみたいです

通報する
お礼日時：2013/10/22 23:31

No.2

  • 回答者： ORUKA1951
  • 回答日時：

HTMLを基礎からやり直すこと!!!


divでレイアウトと言う考え方は、HTMLにはありません。
　スタイルシートの説明サイトなどでよく使われている言い回しですが、それはdivをレイアウトすることについての説明で、レイアウトするためにdivを書くのではありません。似ているようですが、根本的に違うのですよ。・・・この最初の出発点を間違うから、分かりにくくなるのです。小さなことのようですが、上達には欠かせません。

　スタイルシートでデザインする(プレゼンテーションを指定する)のは、「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」のためです。そうすることで「広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になる」からです。デザインのためにDIVを書いていたら『文書は複雑になり、ユーザーの制約も、改訂も難しくなります。』
★DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　デザインではなく、用意されている要素(タグ)では足りないので、DIVを使うのです。
　その文書構造を元にスタイルシートを書くのです。
　￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣
(注)HTML4.01のこの↑部分が理解されたとは言いがたく、HTML5では『文書をよりよく構造化するために、( http://standards.mitsue.co.jp/resources/w3c/TR/h … )』、文書構造を示すための要素が追加されました。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://oshiete.goo.ne.jp/qa/8308855.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>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
＿</div>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございます
長くてわかりにくかったです

　　　

通報する
お礼日時：2013/10/22 23:55

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報