- ベストアンサー
コンテナの上下左右を囲う線のやり方は？
- コンテナの上下左右を線で囲む方法についてお聞きしたいです。
- ブラウザによって線の引き方が異なり、解決法を探しています。
- コンテナの入れ子による問題が発生しています。解決方法を教えてください。
- nickname_1973
- お礼率85% (106/124)
- CSS
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
まず、HTMLが次のようにマークアップされていたとします。 <body> <div class="header"> <h1>見出し</h1> </div> <div class="section"> <div class="section"> <h2>本文見出し</h2> <p>記事</p> </div> <div class="tableContent"> <h3>目次</h3> </div> </div> <div class="footer"> <h2>文書情報</h2> </div> </body> CSSにて、 html,body{margin:0;padding:0;}/* おまじない */ body{background-color:gray;}/* わかりやすくするため */ div{border:solid 1px gray;margin:0;}/* わかりやすくするため */ div.header{background-color:aqua;} div.section{background-color:silver;} div.section div.section{background-color:white;} div.section div.tableContent{background-color:green;} div.footer{background-color:lime;} /* ここまで、わかりやすくするため色・枠づけ */ body>div.section{position:relative;}/* 子孫要素の位置基準とするため */ div.section div.tableContent{position:absolute;top:0;left:0;width:20%;height:100%;} div.section div.section{margin-left:21%;min-height:400px;} 【説明】詳しくはそれぞれのリンク先を読むこと。 floatされると、それは他の要素から独立してブロックを形成します。それに続く要素は回り込みます。 →9.5 浮動体（Floats） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#floats ) 文書の整形(コマ割)のために使うと文書構造を崩すため、使わないほうが良い。 →【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから 例えば絶対配置による方法では、HTMLを記述する上で内容の配置順序が自由になることが回り込ませるボックスを先に記述する必要がある回り込みによる方法よりも優れている ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［段組 - Wikipedia( http://ja.wikipedia.org/wiki/%E6%AE%B5%E7%B5%84#Web.E3.83.87.E3.82.B6.E3.82.A4.E3.83.B3.E3.81.AB.E3.81.8A.E3.81.91.E3.82.8B.E6.AE.B5.E7.B5.84 )］より 【補足】 divは、idやclass名と併用して文書(の意味的な)構造を示すもので、その文書構造を利用してプレゼンテーションをスタイルシートで指定しますが、プレゼンテーションのためにclass名やidをつけるのは誤り。 『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』 このHTML4.01の説明は理解し辛かったので、HTML5では要素として独立しました。HTML5の新しい要素とその意味は、HTML4.01で作成するときの良い参考になります。 →3.1. 新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements ) それぞれの意味もよく読む。 contenerではなく、articleが良いでしょう。将来のHTMLの予行もかねて・・ [ＨＴＭＬ全体] ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済み ※タブは＿に置換してあるので戻すこと <!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"> <!-- html,body{margin:0;padding:0;}/* おまじない */ body{background-color:gray;}/* わかりやすくするため */ div{border:solid 1px gray;margin:0;}/* わかりやすくするため */ div.header{background-color:aqua;} div.section{background-color:silver;} div.section div.section{background-color:white;} div.section div.tableContent{background-color:green;} div.footer{background-color:lime;} /* ここまで、わかりやすくするため色・枠づけ */ body>div.section{position:relative;} div.section div.tableContent{position:absolute;top:0;left:0;width:20%;height:100%;} div.section div.section{margin-left:21%;min-height:400px;} /* 常にdiv.section div.sectionのほうが長いと想定しています。 */ --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>見出し</h1> ＿</div> ＿<div class="section"> ＿＿<div class="section"> ＿＿＿<h2>本文見出し</h2> ＿＿＿<p>記事</p> ＿＿</div> ＿＿<div class="tableContent"> ＿＿＿<h3>目次</h3> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿</div> </body> </html>
その他の回答 (1)
- DrFell
- ベストアンサー率55% (305/551)
htmlが書いていないので、想像でしかないが、コンテナの中身をfloatしていませんか？ floatとは浮かせて右や左に寄せるので高さが持てません。背景もつきませんし、罫線も浮いているので上にしか引けません。nickname_1973 さんの状況にぴったりだと思います。なので、コンテナ内の一番高さのあるをfloatしないとか、overflow : hidden; するとか、#container 内の最後の要素や#container が終わる時にclear:both（場合によってはleftやright）するなどですね。 Firefox、Safari、Chrome、Operaの表示が仕様書てきには正しくIEは間違いです。 この問題は図がいくつもないとわかりにくいと思うので、検索して見ました。 初心者がよくハマる、CSSのfloatプロパティ徹底攻略 http://weeeeb.shiroqlo.com/technique/css_float_kouryaku 「CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろの」一部 http://webdesignrecipes.com/css-visual-formating-model/#p7 上記のページでわかりにくければ「css float 背景」をキーワードに画像検索してみてください。nickname_1973 さんがお困りなのは罫ですが、問題は背景と同じで、背景の方が解説が捜しやすいのです。
お礼
DrFellさん、 ご回答ありがとうございます。確かにfloatで浮かせております。ご指摘ありがとうございます。 ご提示のサイト、とても役に立ちそうですね、ありがとうございます。 早く初心者から脱出して、自分も教える立場になりたいと思います。 本当にありがとうございました。
お礼
ORUKA1951さん、 ご回答ありがとうございます。ちょっと難しいですね。。。質問している私が恥ずかしくなってきます。申し訳ございません。 サンプルを元にやってみたいと思います。 ご回答ありがとうございました。