dポイントプレゼントキャンペーン実施中！

固定幅＋可変幅レイアウトがなぜこれで実装可能？

解決済

  • 質問者：dicemiyagawa
  • 質問日時：
  • 回答数：4件

cssで、固定幅＋可変幅レイアウトについて、下記コードのようにやったら実現できたのですが、
なぜ右カラムのwidthが100%でも、ブラウザの横幅いっぱいでなく、
望みどおりに実現できてしまっているのでしょうか？

結果オーライではありますが、理屈が知りたい＆後学のために、
理由をお教えいただければ幸いです。

(下記では見やすいようにタブを全角空白４文字に変換しています。）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>2カラムレイアウト(左固定幅、右リキッド)</title>
<meta name="description" content="2カラムレイアウト(左固定幅、右リキッド)">
<meta name="keywords" content="CSS,2カラムレイアウト,左固定幅,右リキッド">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">
*　　　　{
　　　　 margin: 0;
　　　　 padding: 0;
}

#header {
　　　　 width: 100%;
　　　　 height: 150px;
　　　　 background-color: #808080;
}
#container {
　　　　 width: 100%;
}

#left　　　　{
　　　　 width: 200px;
　　　　 background-color:#A9A9A9;
　　　　 float: left;
}

#right {
　　　　 width: 100%;
　　　　 background-color:#DCDCDC;
}

#footer {
　　　　 clear: both;
　　　　 width: 100%;
　　　　 height: 150px;
　　　　 background-color: #808080;
　　　　
}
</style>
</head>
<body>
<div id="header">
　　　　<p>ヘッダー</p>
</div>
<div id="container">
　　　　<div id="left">
　　　　<p>左あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
　　　　</div>
　　　　<div id="right">
　　　　　　　　<p>右いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</p>
　　　　</div>
</div>
<div id="footer">
　　　　<p>フッター</p>
</div>
<p><a href="#" onClick="history.back(); return false;">戻る</a></p>
</body>
</html>

通報する

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

質問の本文を隠す

A 回答 (4件)

No.4ベストアンサー

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

＞望みどおりに実現できてしまっているのでしょうか？


　出来てないです。!
　左に配置する要素(ここでは#left)の内容「あの文字数」を減らせば一目瞭然です。
　それは、floatで後続の内容が回り込んでいるためですね。
　これを回避するためには、#right p{margin-left:200px;}とすると回り込む要素がなくなると、自身のmargingが生きてきます。(floatではmarginは相殺されない)
　⇒Box model - CSS 2.1 spec (ja)( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )

　まだ始めたばかりだと思いますので、細かいことも含めて指摘しておきます。
・HTMLは文書構造だけ記述する。
　2.4.1 構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
・idやclassは文書構造を補完するため
　「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」
　container,left,rightというのは(内容の意味)文書構造じゃないでしょう。
　header,footerはその意味から一つの文書内に行くとも登場する可能性があるので、idじゃなくclass。HTML5の新しい要素を見ると
<body>
　<header>
　　<h1></h1>
　　<nav></nav>
　</header>
　<section>
　　<section>
　　　<article>
　　　　<header></header>
　　　　<section></section>
　　　　<footer></footer>
　　　</article>
　　</section>
　</section>
　<footer></footer>
</body>
のようになることを考えても

・<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"・・略・・
　XPもサポート終了、HTML5が勧告直前でいまだにTrnsitinalはさすがにないでしょう。
　1999年のHTML4.01の勧告以来『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』

・*{} 全称セレクタでブラウザのもつすべてのmarginを０にしてしまうと、登場するすべての要素に対してスタイルを追加しなければならなくなります。どこかの糞オーサリングツールが行なっている手法ですが、必要なとき必要なものだけリセットしましょう。

・#headerではなく、きちんと基点なるセレクタを書きましょう。
　「単体セレクタは型セレクタもしくは 全称セレクタのいずれかの直後に、0個以上の属性セレクタ、IDセレクタ、擬似クラスが任意の順序で続くものである。( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )」
　後方互換でCSS1の書き方で通用はしますが・・。

・<a href="#" onClick="history.back(); return false;">戻る</a>
　javascriptを使用するときはjavascriptが無効なUAのことも考慮すること。

[サンプル]
☆Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
☆タブは＿に置換してあるので戻す。
<!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=UTF-8">
＿<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;}
h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;}
p{text-indent:1em;}
div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;}
div.section{position:relative;min-height:400px;}
div.section div.nav,div.section div.aside{position:absolute;top:0;width:150px;height:100%;padding:0 5px;font-size:0.9em;}
div.section div.nav{left:0;}
div.section div.aside{right:0;}
div.section div.section{width:auto;min-width:0;margin:0 160px;min-height:0;}
div.section h2,div.section p{margin:0 160px;}
div.section div p{margin:0;}

/* 色分け */
body{background-color:gray;}
div.header{background-color:aqua;}
div.section{background-color:white;}
div.section div.aside{background-color:lime;}
div.section div.nav{background-color:silver;}
div.footer{background-color:fuchsia;}
-->
＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<p>このページでは・・・・</p>
＿</div>
＿<div class="section">
＿＿<h2>見出し</h2>
＿＿<p>本文はsection</p>
＿＿<div class="section" id="section1">
＿＿＿<h3>項見出し</h3>
＿＿＿<p>本文項記事</p>
＿＿＿<p>sectionの階層でレベルが判断される</p>
＿＿</div>
＿＿<div class="section" id="section2">
＿＿＿<h3>項見出し</h3>
＿＿＿<p>本文項記事</p>
＿＿＿<p>sectionの階層でレベルが判断される</p>
＿＿</div>
＿＿<div class="nav" id="contentTable">
＿＿＿<h3>目次</h3>
＿＿＿<ol>
＿＿＿＿<li>１項</li>
＿＿＿＿<li>２項</li>
＿＿＿＿<li>３項</li>
＿＿＿</ol>
＿＿</div>
＿＿<div class="aside">
＿＿＿<h3>補足記事</h3>
＿＿＿<p>ここには、本題から外れた(aside)、本題とは直接関係しない記事を書く</p>
＿＿</div>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2013-03-03</dd>
＿＿</dl>
＿＿<address>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
＿</div>
</body>
</html>
    • good
    • 0
    • 件
通報する

No.3

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

No.2補足です。



#right に margin-left:200pxを指定すると段組み表示のようになります。

ではなぜ一般的な段組み表示の方法が複雑な書き方になっているかというと、
質問文の書き方では、#leftの下、#rightの下に白くなっていると思います。
それを、#leftのbackgroundや、#rightのbackgroundで塗りつぶそうというのがその主旨です。
    • good
    • 0
    • 件
通報する

No.2

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

#rightは100%になっていますが、コンテンツが描画される場所は#leftにかからない場所だけです。



#rightの内容を多くすると#leftの下にかかるようになるので、厳密には段組み表示にはなっていません。
「固定幅＋可変幅レイアウトがなぜこれで実装」の回答画像2
    • good
    • 0
    • 件
通報する

No.1

うーん、むしろ出来ていないことを確認してほしいと思います。


右コンテンツが画面を溢れてしまってます…。
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

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

Q質問する（無料）

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

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

おすすめ情報