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

CSSでの2段組レイアウトでdiv#containerを導入する理由

解決済

  • 質問者：sun2moon
  • 質問日時：
  • 回答数：5件

CSSでの2段組レイアウトでdiv#containerを導入する理由

CSSを使って2段組みレイアウトを構成する場合、次のようにdiv#containerを導入したマークアップをよく目にします。

<body>
<div id="container">
<div id="header">
</div>
<div id="main">
</div>
<div id="menu">
</div>
<div id="footer">
</div>
</div>
</body>

また、div#containerを導入せずにbody要素の直下に#header, #mainなどの領域を設けている場合も目にします。
body要素直下ではなく、div#containerを導入するのはどのような理由からなのでしょうか？

通報する

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

質問の本文を隠す

A 回答 (5件)

No.2ベストアンサー

  • 回答者： torntorn
  • 回答日時：

全体を囲む形で<div id="container">を置くのは


デザイン変更時に楽だからというのがある。
<div id="container">でコンテンツ全体を囲むことによって
レイアウトを左寄せ・中央寄せなどが楽にできます。
また、変更時にも「container」に対してのスタイルシート部分を変更すればいいので楽です。
スタイルシートって子要素に対して継承があるのでコンテンツ全体の親があると楽になる場合もあります。(親として全体に反映させるのに「*」も使いますが)
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございます。
なるほど、文書構造を定義する以外にも、デザイン変更を楽にするためにcontainerのような要素を導入する場合があるのですね。

通報する
お礼日時：2010/01/26 17:41

No.5

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

＞ORUKA1951さんが、「Webデザインを理由にしてcontainerを導入することはない」


＞というお立場であることはわかりました。
　誤解させてしまったようです。
　最初に示されたCSSは
div#containerを導入したマークアップをよく目にします。
　でしたね。
　#は、CSSでは一意セレクタ、HTMLでは要素識別子のid属性とされています。
　これは文字通り、HTML内に一箇所しかもてません。主な用途は、なんと言ってもリンク先のアンカーです。
　classは、すでに紹介してリンク先にもあるように
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
一方のclass属性は、ある要素について1つ以上のクラス名を割り当て、この要素が当該クラス/クラス群に属することが示され得る。 1つのクラス名は、複数の要素インスタンスの間で共有され得る。 HTMLにおいて、class属性は、次の各々の役割を果たす。
　・著者が要素集合にたいしてスタイル情報を割り当てたいと考えた際の、スタイルシート選択子。
　・ユーザエージェントによる処理一般。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より

　スタイルシートでの適用を主に考えられてる理解してよいと思います。

　ただ、classの名称として、
container(入れ物)、left(左)、right(右)、red(赤)・・・というようなものは、少し抵抗があります。HTMLで、center,strik(s),u,fontが4.01で非推奨になったのは、文書構造を示すものではなく、見栄えを指定するタグだったから・・ということを連想するのです。
　私は、
container(入れ物)→body(本文)、section bodyText(本文)
left(左)→note OR memo header
right(右)→note OR memo footer
red(赤)→important
footer→documentInfo
という風に、後から文章やデザインを見直す場合の手助けになるようにしています。左に配置していたものを右にしても、上部にしても良いでしょ。
　idでなくclassを使うと
<div class="note menue">
<div class="note mempo">
　というマークアップができます。・・・これって意外と便利・有効です。


　class名は、CSSのために書くのです。それは、
＞スタイルシートを一目見て思ったのは、このスタイルがどの領域を対象としているのか理解するのがたいへんになったということです。
　・・・これを避けるためです。まったくあなたの理解は正しい。

　いずれにしても、慣れてくれば、不必要なclass名や、文書構造ではなくプレゼンテーションのためだけのようなclass名を最低限使用したマークアップをするようにしています。
　HTMLはできるだけシンプルなほうが、あとからメンテナンスは楽ですからね。
    • good
    • 0
    • 件
通報する
この回答へのお礼

返信ありがとうございます。
おかげさまでかなりすっきりしました。
・idのそもそもの目的はアンカータグのためであり、デザインを適用する目印のためではない。
・そのような目的にはclass属性を使うべきである。
・文書構造を定義する上では必要ないが、Webデザインの実現、効率よい適用、保守性アップのためにdivなどの要素を導入することはある。

header, content, sidebar, footerなどのdiv要素をまとめているbody直下のdiv要素の存在意義、メリットが(id, class属性が指定されていようがいまいが)自分の興味対象だったので、会話がちくはぐになってしまったのでしょうね。

親切、丁寧にコメントして頂いたことにたいへん感謝致します。
ありがとうございました。

通報する
お礼日時：2010/01/28 17:38

No.4

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

＞デザインのために div.container を導入することはありえないという理解


＞でよろしいでしょうか？
　そうとっても良いでしょう。
　ただし、少しニュアンスが違います。「必要もないのに、idは書かなくて良い」ということです。
　たとえば、先のHTMLが下記のような単純なものでも・・・3カラムのデザインはできるのですよ。・・・まったくidもclassもないですよ。!!

★以下のHTML,CSSのソースは、読みやすくするためタブを全角スペースで置換してあります。--このシステムではタブは消されるため--
★テストするときは、全角スペース2個をひとつのタブに置換してください。

<body>
　　<div>
　　　　<h1>サンプル</h1>
　　　　<p>ここから本文</p>
　　　　<div>
　　　　　　<ul>
　　　　　　　　<li>目次1</li>
　　　　　　　　<li>目次2</li>
　　　　　　　　<li>目次3</li>
　　　　　　</ul>
　　　　　　<div>
　　　　　　　　<h2>ノート</h2>
　　　　　　　　<p>脚注</p>
　　　　　　</div>
　　　　</div>
　　</div>
　　<div>
　　<h2>文書情報</h2>
　　</div>
</body></html>

　こんなHTMLであっても（・・なら）、まったくデザインに支障はないのです。このHTMLに、単純なCSSを含む、下記ヘッダ部を追加してブラウザで見てください。
　きちんと、3カラムで表示されるはずです。しかもウィンドウの幅には制約されません。ウィンドウを小さくしてみてください。

<!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 http-equiv="Content-Style-Type" content="text/css">
　　<style type="text/css">
<!--
　　body{ background-color: rgb(180,180,180);}
　　h1{text-align:center;}
　　body>div{
　　　　position:relative;width:60%;margin-left:auto;
　　　　margin-right:auto;border: solid 1px red;
　　　　background-color: white;
　　}
　　body div div ul,body div div div{
　　　　font-size: 0.9em;position: absolute;
　　　　top:0px;width: 20%;margin: 0px;
　　　　border: solid green 1px;height:100%;
　　}
　　div div ul{
　　　　right: 101%;border-color: blue;
　　　　background-color: rgb(255,180,180);
　　　　}
　　div div div{
　　　　left: 101%;
　　　　background-color: rgb(180,180,255);
　　}
　　div div div h2{
　　　　margin: 0.2em;
　　　　font-size: 1.2em;
　　}
-->
　　</style>
　　<link rel="START" href="../index.html">
</head>

　まだホームページ/HTMLが一般的でない頃、えっこの人知ってるの？というようなマニュアルがたくさんありました。今は、CSSが、その当時のHTMLのマニュアルとよく似た状況にあります。
　今回の3カラムでも、ひとつのHTML内に何章もあり、それぞれの章(section,content)に目次や脚注があるような場合は、classで統一したほうが、idでいちいち設定するより楽ですね。idは単にリンクだけに使う。また特定の章だけ<h3></h3>の文字色を変えたりするとか・・
「CSSでの2段組レイアウトでdiv#co」の回答画像4
    • good
    • 0
    • 件
通報する
この回答へのお礼

サンプルまで出して頂いてありがとうございます。

>「必要もないのに、idは書かなくて良い」
この点を強調されていることは理解しました。
また、提示していただいたサンプルを見て、containerを導入しなくても、3段組みを構成できることがわかりました。
ただ、スタイルシートを一目見て思ったのは、このスタイルがどの領域を対象としているのか理解するのがたいへんになったということです。
単純な構造のHTMLでは大きな問題にはならないのでしょうが、ちょっと複雑な画面になってくるとデザイン構築の作業効率や保守性などは犠牲になるように思いました。

>そうとっても良いでしょう。
ORUKA1951さんが、「Webデザインを理由にしてcontainerを導入することはない」というお立場であることはわかりました。
今の自分としては「まずは文書をマークアップすること」に注力し、その後「Webデザイン作成の作業効率、保守性なども考慮してメリットがあると感じたなら、containerのような要素を導入することもいとわない」というポジションからスタートしてみたいと思います。
HTML, CSSに慣れ親しんでいくうちに、ORUKA1951さんのご意見を実感できるのかもしれないとも思っています。

通報する
お礼日時：2010/01/27 10:15

No.3

  • 回答者： naokita
  • 回答日時：

作者により色々な理由もありますが最近の流れでは、


センター配置の横枠線ありのサイトが多いので
その場合、<div id="container">で全体を囲むのが楽です。
幅指定もしますので、その中での100%領域は幅指定無しでいけますし、
直接 <p> やインラインでも書けますし。

何故 container や ID なのって話なら意味が違いますが。
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございます。
デザインする時の作業効率を考慮して導入することがあるのですね。

>何故 container や ID なのって話なら意味が違いますが。
これはどのような文脈でおっしゃられているのか理解できませんでした。
idではなく、classを使うべきということでしょうか？
container？

通報する
お礼日時：2010/01/27 09:42

No.1

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

＞CSSでの2段組レイアウトでdiv#containerを導入する理由



　そもそも、根本的な部分で間違っている。"#ホゲ"は一意セレクタと呼ばれるもので、HTMLに置いて、その文書の特定の位置を示すもので、二箇所は現れません。
　言い換えれば、あくまで、リンク先のアンカーとして作用するものです。

　CSSでデザインするときに、それを利用するというものでしかありません。（正確を期そうとする、こんな言い回しになってしまう）
　CSSで複雑なデザインをするときに、必要ならHTMLに、idやclassを追加することはあるという程度の問題です。デザインする上で必要ならHTMLに加えればよいのですから、
＞div#containerを導入せずにbody要素の直下に#header, #mainなどの領域を設けている
　のは、その必要がないからに過ぎません。
★CSSの前に、HTMLをきちんと学んでください。HTMLの仕様書には、詳しく書いてあります。
HTML 4.01 Specification (ja) ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　→7.5.4要素のグループ化: DIV要素とSPAN要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　→Style Sheets in HTML documents (ja) ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　id ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )

私は、一意セレクタは一箇所しか設けられないし、詳細度が100と高すぎるため通常はclassを使います。

　あくまで、CSSのためではなく、文書構造を正確に表すように心がけています。その上で、デザインする上で必要ならidないしclassを追加する。

たとえば
<body>
　　<div class="bodyText">
　　　　<!-- 本文 -->
　　　　<h1></h1>
　　　　<p></p>
　　　　<div class="proviso">
　　　　<!-- 但し書き -->
　　　　　　<ul class="index">
　　　　　　　　<!-- 目次 -->
　　　　　　</ul>
　　　　　　<div class="note">
　　　　　　　　<!-- ノート -->
　　　　　　</div>
　　　　</div>
　　</div>
　　<div id="infomation">
　　</div>
</body>
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございます。
うーん、正直混乱しています・・・
デザインのために必要ならid, classを追加することはあるとのことですが、
デザインのために div.container を導入することはありえないという理解でよろしいでしょうか？
div.containerを導入しているページの製作者は、あくまでも文書構造の定義のために使っているということでしょうか？

通報する
お礼日時：2010/01/26 17:36

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

Q質問する（無料）

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

Q質問する（無料）

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

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

おすすめ情報