コンテナの上下左右を囲う線のやり方は？

2023/08/16 04:53

このQ&Aのポイント

コンテナの上下左右を線で囲む方法についてお聞きしたいです。
ブラウザによって線の引き方が異なり、解決法を探しています。
コンテナの入れ子による問題が発生しています。解決方法を教えてください。

ベストアンサー

コンテナの上下左右を囲う線のやり方は？

2012/02/20 01:25

こんにちは。ホームページを製作しているものです。私のサイトでは、まず『大きなコンテナ』を定義して、その中に3つ、カラムのコンテナを定義しています。その様な状態で『大きなコンテナ』の周りに線を引きたくて、上下左右を囲うborderを定義致しました。 border-top:1px solid #BBB; border-left:1px solid #BBB; border-right:1px solid #BBB; border-bottom:1px solid #BBB; これでInternet Explorer9では、思った通りに『大きなコンテナ』の周りが線で囲まれました。しかし、Firefox、Safari、Chrome、Operaといったブラウザでは、『大きなコンテナ』の上側の部分だけしか線が書かれませんでした。理由を探しにググったところ、 1： http://gyauza.egoism.jp/clip/archives/2007/05/070509-background-clip/ 2： http://hajimetedesign.blog77.fc2.com/blog-entry-74.html 上記2サイトに解決法があるのではと思いました。それは、両サイトともに以下の様な記述があり思い通りに行きそうな気がしたのです。 html , body {height:100%;} body > #container {height:auto;} #container { height:100%;/* for IE6 */ min-height:100%; background-color:#fff; border:solid #ccc; border-width:0 1px; } しかし、自分のサイトに適用してみたら上側の線は無事引かれましたが、左右側がブラウザのheightの100％の高さまでしか線が引かれず、下側の線は引かれないままでした。つまりブラウザをスクロールさせるほど高さ的にコンテンツがある場合は、左右の線は途中までしか引かれなかったのです。上記2サイトの記述はコンテナの中に普通にコンテンツがあり、私のサイトは『コンテナの入れ子』というのが問題だと思いました。どなたか解決方法をご教示願えないでしょうか？よろしくお願いいたします。失礼致します。

nickname_1973
お礼率85% (106/124)

CSS
回答数2
ありがとう数2

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/02/20 10:15 回答No.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">  ＿</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>

質問者

お礼 2012/02/20 12:23

ORUKA1951さん、ご回答ありがとうございます。ちょっと難しいですね。。。質問している私が恥ずかしくなってきます。申し訳ございません。サンプルを元にやってみたいと思います。ご回答ありがとうございました。

その他の回答 (1)

DrFell
ベストアンサー率55% (305/551)

2012/02/20 05:45 回答No.1

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 さんがお困りなのは罫ですが、問題は背景と同じで、背景の方が解説が捜しやすいのです。

質問者

お礼 2012/02/20 06:12

DrFellさん、ご回答ありがとうございます。確かにfloatで浮かせております。ご指摘ありがとうございます。ご提示のサイト、とても役に立ちそうですね、ありがとうございます。早く初心者から脱出して、自分も教える立場になりたいと思います。本当にありがとうございました。

関連するQ&A

左右の高さを揃えたいんですが
css.divのみでレイアウトする勉強中です。テーブルのように表示内容によって変化する左右の要素の高さを揃えるにはどうすればいいのかで悩んでいます。 <html> <head> <style type="text/css"> html{height:100%;} body{height:100%;text-align:center;magin:0;} .head{width:800;background:#f8ffff;border:1px solid #000;} .main{height:100%;width:800;} .left{height:100%;width:20%;float:left;background:#f8f8ff;border:1px solid red;} .right{height:auto;width:75%;float:right;background:#aaaaaa;padding:5px;} .center{height:1500;width:200;background:#00ffff;} .foot{clear: both;background:#444666;color:#fff;} </style> <title>test</title> </head> <body> <div class="head">title</div> <div class="main"> <div class="left"> left <br> <font color=red> ※この要素を右と揃えたい</font> </div> <div class="right"> right <div class="center"> この要素の高さが変わる </div> </div> <div class="foot"> foot </div> </div> </body> </html>
- ベストアンサー
- HTML
FireFoxでCSSのボーダーが反映されません
FireFoxでのCSS表示について教えて下さい。現在、IEでは見れるものがFireFoxで反映されておりません。どこかに原因があるとは思うのですが、見つからないのです。。。涙 Bodyとページ全体のCSS、及び問題箇所のCSSを記述します。 #body { margin: 0px; 　width: 100%; 　padding: 0px; 　border: 0px; 　height: auto;} #page { background-color: #ffffff; 　width: 746px; 　height: auto; 　margin: 0px; 　padding: 0px; 　border-collapse:collapse; 　border: 0px; 　border-spacing:0px;} #page td {line-height: 120%; 　font-size: 12px; 　color: #000000;} #contents1 {width: 746px; 　border-collapse:collapse; 　border-spacing:0px; 　margin:0px 0px 5px 0px;} 　border: 1px solid #666633; #contents td {font-size: 12px; 　line-height: 120%; 　color: #000000; 　padding-top: 2px; 　padding-bottom: 2px;} #contents2 {width: 350px; 　height: 45px;} #contents2 td { border: 1px solid #999999; 　font-size: 12px;} ※contents1は外枠のみボーダーカラーをつけたいと思います。 contents2では、tdのみ枠をつけて、外枠は表示させたくありません。 (大枠の中にいくつか枠付きの行が表示される状態にしたいです) idではなくclassにする方が良いのでしょうか？ CSSについては独学なので、記述もほとんどDW頼りです。参考サイトなどご存知でしたら教えて下さい。。。以上、よろしくお願いいたします。
- ベストアンサー
- CSS
下線だけ線を引くにはどうすればいいでしょうか?
<html> <head> <title>test</title> <style type="text/css"> h2{ padding: 8px; border-left: 10px solid red; } </style> </head> <body> <h2>test</h2> </body> </html> このような状態から下線だけ線を引くにはどうすればいいでしょうか? background-color: blue; だと全体が青くなってしまいました。
- ベストアンサー
- HTML
この場合のCSSの記述を教えてください！
現在コーディング中なのですがIE6,7では問題ないのですが、Firefox,OPERA,netscapeにてずれて表示されてしまいます。鯨飲がさっぱり分からない状態で・・どなたかお分かりになる方いましたらご教授願います（泣） ■html <div id="aaa"> <div id="bbb">コンテンツ</div> <div class="ccc">コンテンツ</div> </div> ■css #aaa { width: 640px; height: 300px; float: left; } #bbb { width: 640px; height: 150px; background-image: url(images/背景画像.gif); background-repeat: no-repeat; } .ccc { width: 640px; height: 150px; } ■状況 640px×300px（aaa）の枠の中に（bbb,cccを）収めたいのに300を超えて（bbbの上部に約100px程度のが出来る）表示されてしまう。（bbbの背景画像サイズは640px×150px） ■いじってみて bbbに「border: 1px #000000 solid;」を追加するとスペースはなくなる。以上が状況です。よろしくお願いいたします！
- 締切済み
- HTML
フルCSSでFirefoxでデザインが崩れてしまいます。
フルcssHPに挑戦しようと思っています。 cssでIEでは思ったような表示が可能ですが Firefox、Operaでは「contents」内のコンテンツが「container」>を突き抜けて表示されてしまいます。下記がhtml、cssソースになります。【HTML】 <body> <div id="container">  <div id="contents"> <div id="subnavi"> <ul> <li>サブナビ1</li> <li>サブナビ2</li> <li>サブナビ3</li> <li>サブナビ4</li> </ul> </div> <div id="main"> メインコンテンツが入ります </div> </div>  </div> </body> メインナビ、フッターアンカーリンクは文字数制限上削除しています。【CSS】 body{ text-align:center; background-color:#ffffff; font-size:10px; color:#333333; } body div { text-align:left; margin: 0 auto; } #container{ text-align:left; width:724px; background-color:#ffffff; padding:15px 18px; position: relative; border:1px solid #666; } #contents{ width:724px; background-color:#ffffff; text-align:left; border-bottom:8px solid #666666; margin-bottom:10px; position: relative; clear:both; } #subnavi{ float:left; width:200px; } #main{ float:left; width:495px; padding-left:29px; } この突き抜けを防止するにはどうしたらよろしいのでしょうか。「contents」を削除して表示するとどのブラウザでも表示が可能ですので <div id="contents">の記述が何かおかしいのでしょうか。それとも根本的にブラウザの問題なのでしょうか？ (ブラウザは最新版を使っています) 皆様、よろしくご回答お願いいたします。
- ベストアンサー
- CSS
CSSについて入力フォームの上下揃い
CSSについて入力フォームの上下揃い sample.css @CHARSET "windows-31j"; html,body,div,span,h1,h2,h3,h4,h5,h6{margin:0; padding:0; font-size:100%} html { height:100%; } body { height:100%; } body > #container { height: auto; z-index:0; } #container{ width:780px; margin-top:auto; margin-left:auto; margin-right:auto; margin-bottom:auto; position:relative; min-height:100%; border:1px solid #999; } #header{ margin: 0; padding: 0px 0px 0px 0px; width: 100%; height: 100px; background-color:#4682B4; z-index:1; } #main{ padding:auto; width:100%; backgruond-color:#87CEEB; z-index:1; } #footer{ position:absolute; bottom:0px; width: 100%; height: 100px; background-color:#4682B4; z-index:1; } index.html <div id="container"> <div id="header"></div> <div id="main"> <div class="vartical-align"> <form action=""> <input type="text" name="id"> <input type="password" name="pas"> </form> </div> </div> <div id="footer"></div> </div> 上記の用なCSSにて入力フォーム等を、id=main内にて上下中央揃えにしたいのですがどうした良いでしょう？
- 締切済み
- HTML
Firefoxでheight:100%がきかない？
ソースは以下のとおりです。 IEでは#container内のDIV要素は全てheight:100%で表示されるのですが、Firefoxでは、高さ：100％がききません。 Firefoxでもページの下まで表示されるようにしたいと思います。よろしくお願いいたします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <title>サンプル</title> <style type="text/css">  </style> </head> <body> <div id="wrapper"> <div id="header"> <h1>あああ</h1> </div> <div id="container"> <div id="container_left01"> <div id="container_left02">あああ</div> <div id="container_left03">あああ</div> </div> <div id="container_right01">あああ</div> </div> </div> </body> </html>
- 締切済み
- HTML
IE8だと内側に線が引かれてしまいます。
ブラウザ　IE8 スタイルシートで例として ------------------------ h3{ width:230px; height:60px; background:#000; border:3px double #000; color: #ffffff; } ----------------------- このように背景と線の色を同じにすると内側に線が引かれるので２重線になりません。 IE7だと外側に線が引かれるので綺麗な2重線になるのですが・・・ IE8でも外側に線を引くことは可能なのでしょか？宜しくお願い致します。
- ベストアンサー
- HTML
Safariでheight:100%のボックスを表示したいのです
Safariでheight:100%のボックスを表示したいのです。MacIE・WinIE・FireFox・Operaでは出来たのですが、どうしてもSafariだけheight:100%のボックスが出来上がらず・・・。以下、記述したCSSとHTMLです。 HTML--------- <body> <div id="main"> <h1>height100%のボックス</h1> <p> 標準準拠のIEやfirefoxでbody直下にheight100%のボックス </p> ・・・略 <h1>height100%のボックス</h1> <p> 標準準拠のIEやfirefoxでbody直下にheight100%のボックス </p> ・・・略 </div> </body> </html> CSS--- /* \*/ html{ height:100%; } /* \*/ body{ height:100%; width:80%; margin:0px auto; padding:0px; } div#main{ background-image:url(../images/contents_bg.gif); border:solid 1px #760014; border-width:0px 1px; height:100%; min-height: 100%; margin:0px auto; padding:0px; border:1px solid #ff0000; } body > #main{ height: auto; } h1{ margin:0px auto; padding:0
- ベストアンサー
- HTML
liタグのナビボタンがFirefoxで二重に表示。
liタグでナビボタンを縦に３つ積みたいのですが、IEでは正しく表示しますが、何故かFirefoxでは２段めから２つずつ表示してしまい５つのナビボタンになってしまいます。どのように記述すれば良いのでしょう？ <div id="sidebar"> <ul> <li id="aaa"><a href=""><span>aaa</span></li> <li id="bbb"><a href=""><span>bbb</span></li> <li id="ccc"><a href=""><span>ccc</span></li> </ul> </div> div#sidebar { width: 245px; float:left; border-right-width: 1px; border-right-style: solid; border-right-color: #CCCCCC; } div#sidebar ul li a { display: block; } div#sidebar ul li a span { position:absolute; width: 0; height: 0; overflow:hidden; } ul li#aaa a { width: 245px; height: 60px; background-image:url(image/aa.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; } ul li#bbb a { width: 245px; height: 60px; background-image:url(image/bb.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; } ul li#ccc a { width: 245px; height: 60px; background-image:url(image/cc.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; }
- ベストアンサー
- CSS

コンテナの上下左右を囲う線のやり方は？

コンテナの上下左右を囲う線のやり方は？