アプリ版：「スタンプのみでお礼する」機能のリリースについて

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

解決済

  • 質問者：nickname_1973
  • 質問日時：
  • 回答数：2件

こんにちは。ホームページを製作しているものです。

私のサイトでは、まず『大きなコンテナ』を定義して、その中に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/07 …
2： http://hajimetedesign.blog77.fc2.com/blog-entry- …
上記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サイトの記述はコンテナの中に普通にコンテンツがあり、私のサイトは『コンテナの入れ子』というのが問題だと思いました。

どなたか解決方法をご教示願えないでしょうか？

よろしくお願いいたします。

失礼致します。

通報する

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

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

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

まず、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 … )
文書の整形(コマ割)のために使うと文書構造を崩すため、使わないほうが良い。
→【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
例えば絶対配置による方法では、HTMLを記述する上で内容の配置順序が自由になることが回り込ませるボックスを先に記述する必要がある回り込みによる方法よりも優れている
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［段組 - Wikipedia( http://ja.wikipedia.org/wiki/%E6%AE%B5%E7%B5%84# … )］より

【補足】
divは、idやclass名と併用して文書(の意味的な)構造を示すもので、その文書構造を利用してプレゼンテーションをスタイルシートで指定しますが、プレゼンテーションのためにclass名やidをつけるのは誤り。
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
　このHTML4.01の説明は理解し辛かったので、HTML5では要素として独立しました。HTML5の新しい要素とその意味は、HTML4.01で作成するときの良い参考になります。
→3.1. 新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/h … )
　それぞれの意味もよく読む。

　contenerではなく、articleが良いでしょう。将来のHTMLの予行もかねて・・

[ＨＴＭＬ全体]
★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )
★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
で検証済み
※タブは＿に置換してあるので戻すこと


<!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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ORUKA1951さん、

ご回答ありがとうございます。ちょっと難しいですね。。。質問している私が恥ずかしくなってきます。申し訳ございません。

サンプルを元にやってみたいと思います。

ご回答ありがとうございました。

通報する
お礼日時：2012/02/20 12:23

No.1

  • 回答者： DrFell
  • 回答日時：

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_k …
「CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろの」一部
http://webdesignrecipes.com/css-visual-formating …

上記のページでわかりにくければ「css float 背景」をキーワードに画像検索してみてください。nickname_1973 さんがお困りなのは罫ですが、問題は背景と同じで、背景の方が解説が捜しやすいのです。
    • good
    • 0
    • 件
通報する
この回答へのお礼

DrFellさん、

ご回答ありがとうございます。確かにfloatで浮かせております。ご指摘ありがとうございます。
ご提示のサイト、とても役に立ちそうですね、ありがとうございます。

早く初心者から脱出して、自分も教える立場になりたいと思います。

本当にありがとうございました。

通報する
お礼日時：2012/02/20 06:12

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

Q質問する（無料）

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

Q質問する（無料）

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

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

おすすめ情報