CSSでの2段組レイアウトでdiv#containerを導入する理由
- CSSでの2段組みレイアウトを構成する場合、div#containerを導入することが一般的です。
- div#containerを導入することにより、レイアウトの構造を明確にすることができます。
- また、div#containerを使用することで、コードのメンテナンス性や柔軟性を向上させることができます。
- ベストアンサー
CSSでの2段組レイアウトでdiv#containerを導入する理由
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を導入するのはどのような理由からなのでしょうか？
- ホームページ作成ソフト
- 回答数5
- ありがとう数9
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
全体を囲む形で<div id="container">を置くのは デザイン変更時に楽だからというのがある。 <div id="container">でコンテンツ全体を囲むことによって レイアウトを左寄せ・中央寄せなどが楽にできます。 また、変更時にも「container」に対してのスタイルシート部分を変更すればいいので楽です。 スタイルシートって子要素に対して継承があるのでコンテンツ全体の親があると楽になる場合もあります。(親として全体に反映させるのに「*」も使いますが)
その他の回答 (4)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞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-html401j/struct/global.html#adef-id )］より スタイルシートでの適用を主に考えられてる理解してよいと思います。 ただ、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はできるだけシンプルなほうが、あとからメンテナンスは楽ですからね。
お礼
返信ありがとうございます。 おかげさまでかなりすっきりしました。 ・idのそもそもの目的はアンカータグのためであり、デザインを適用する目印のためではない。 ・そのような目的にはclass属性を使うべきである。 ・文書構造を定義する上では必要ないが、Webデザインの実現、効率よい適用、保守性アップのためにdivなどの要素を導入することはある。 header, content, sidebar, footerなどのdiv要素をまとめているbody直下のdiv要素の存在意義、メリットが(id, class属性が指定されていようがいまいが)自分の興味対象だったので、会話がちくはぐになってしまったのでしょうね。 親切、丁寧にコメントして頂いたことにたいへん感謝致します。 ありがとうございました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞デザインのために 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>の文字色を変えたりするとか・・
お礼
サンプルまで出して頂いてありがとうございます。 >「必要もないのに、idは書かなくて良い」 この点を強調されていることは理解しました。 また、提示していただいたサンプルを見て、containerを導入しなくても、3段組みを構成できることがわかりました。 ただ、スタイルシートを一目見て思ったのは、このスタイルがどの領域を対象としているのか理解するのがたいへんになったということです。 単純な構造のHTMLでは大きな問題にはならないのでしょうが、ちょっと複雑な画面になってくるとデザイン構築の作業効率や保守性などは犠牲になるように思いました。 >そうとっても良いでしょう。 ORUKA1951さんが、「Webデザインを理由にしてcontainerを導入することはない」というお立場であることはわかりました。 今の自分としては「まずは文書をマークアップすること」に注力し、その後「Webデザイン作成の作業効率、保守性なども考慮してメリットがあると感じたなら、containerのような要素を導入することもいとわない」というポジションからスタートしてみたいと思います。 HTML, CSSに慣れ親しんでいくうちに、ORUKA1951さんのご意見を実感できるのかもしれないとも思っています。
- naokita
- ベストアンサー率57% (1008/1745)
作者により色々な理由もありますが最近の流れでは、 センター配置の横枠線ありのサイトが多いので その場合、<div id="container">で全体を囲むのが楽です。 幅指定もしますので、その中での100%領域は幅指定無しでいけますし、 直接 <p> やインラインでも書けますし。 何故 container や ID なのって話なら意味が違いますが。
お礼
回答ありがとうございます。 デザインする時の作業効率を考慮して導入することがあるのですね。 >何故 container や ID なのって話なら意味が違いますが。 これはどのような文脈でおっしゃられているのか理解できませんでした。 idではなく、classを使うべきということでしょうか？ container？
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞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-html401j/cover.html ) →7.5.4要素のグループ化: DIV要素とSPAN要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 ) →Style Sheets in HTML documents (ja) ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html ) id ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#adef-id ) 私は、一意セレクタは一箇所しか設けられないし、詳細度が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>
お礼
回答ありがとうございます。 うーん、正直混乱しています・・・ デザインのために必要ならid, classを追加することはあるとのことですが、 デザインのために div.container を導入することはありえないという理解でよろしいでしょうか？ div.containerを導入しているページの製作者は、あくまでも文書構造の定義のために使っているということでしょうか？
関連するQ&A
- CSSの三段組みレイアウトについて教えて下さい。。
CSSレイアウト初心者ですが、CSSの作成段組みを作る時に <div id="container"> <div id="header"> </div><!--/header--> <div id="contents"> <div id="left_bar"> </div><!--/left_bar--> <div id="main"> </div><!--/main--> </div><!--/contents--> <div id="right_bar"> </div><!--/right_bar--> <div id="footer"> </div><!--/footer--> </div><!--/container--> と三段組固定レイアウトを作成したいのですが、 一度目は何回やり直してもfloatの設定でleft_bar,mainの横並びが上手くいかずに、 contentsの中でleft_bar,mainが縦並びになってしまい何回何が原因か様々なサイトで考えを模索してソースを直しても何故かleft_bar,main がcontentsの中で何回書き直しても縦並びになりもう一度一からCSSを組み直してみると、 どうした訳かようやくcontentsの中でleft_bar,mainが横並びになってくれました。 これは一体根本的に何が原因で横並びにさせるつもりが、縦にボックスが並んでしまうのでしょうか？ CSSのfloatの概念からハックかなと思いハック親ボックスにハックをかけてみてでも全く関係ないみたいでしたし、親ボックスにピクセルを指定していないからかと思い親ボックスにピクセルで指定しても何故か縦並び？！ CSSをもう一度書きなすことで意図したレイアウトになると言う事は一番は何が原因していると見られるのでしょうか？
- 締切済み
- CSS
- CSS #containerについて
えっと、CSSについての質問です。 最近勉強をはじめたのですが、 #container を下まで伸ばすのに height: 100%; min-width: 100%; をいれても下まで伸びない現象がおきています。 最初は伸びていたのですが、 ヘッダーとフッターを横に１００％にしてから 様子がおかしくなりました。 減ったーフッターは横に全部伸ばしたくて、 コンテイナーは横は余白つけて下にのばしたいのです＞＜ どなたか原因がわかる方、対処法わかる方 いましたらお願いします＞＜ ------------------------------HTML--- <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="index3.css"> </head> <body> <div id="container"> <div id="headerbg"> <div id="header"> <h1>header</h1> </div><!-- header --> </div><!-- headerbg --> <div id="menu"> <ul> <li><a href="">めにゅー１</a></li> <li><a href="">めにゅー２</a></li> <li><a href="">めにゅー３</a></li> <li><a href="">めにゅー４</a></li> <li><a href="">めにゅー５</a></li> <li><a href="">めにゅー６</a></li> </ul> </div> <div id="main"> <div id="contents"> </div><!-- contens --> <div id="sidebar"> </div><!-- sidebar --> </div><!-- main --> <div id="footerbg"> <div id="footer">Footer</div><!-- footer --> </div><!-- footerbg --> </div><!-- container --> </body> </html> -------------------------CSS--- html { background-image: url('hana3.jpg'); background-attachment: fixed; } body { font-family: Verdana, Arial; font-size: 20px; margin: 0px; padding: 0px; } html,body,#main,#container{ height:100%; } #container { height: 100%; min-width: 100%; background-color: rgba(255,100,0,0.5); } #headerbg{ width: 100%; min-width: 100%; background-color: rgba(255,100,0,0.5); } #header { padding: 40px; width: 100%; } #menu { } #menu>ul>li { float: left; } #main { overflow: hidden; } #sidebar { } #footerbg{ background-color: rgba(255,100,0,0.5); width: 100%; min-width: 100%; } #footer { padding: 50px; width: 100%; }
- 締切済み
- CSS
- CSSで高さ100％のレイアウト
テーブルを使用せずCSSでのレイアウトなのですが フッター位置をブラウザの一番下にマージン無しで指定したいのですが出来ません。 テーブルでは <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td valign="top">内容</td> </tr> <tr> <td valign="bottom">フッター</td> </tr> </table> というように指定していたのですが CSSでのレイアウトはHTMLを <div id="container"> <div class="content">内容</div> <div id="footer">フッター</div> </div> .CSS では #container { height: 100%; } は無効なのでしょうか？ 他のやり方でもフッターをブラウザの一番下にマージン無しでレイアウトできる方法があったら教えて下さい。
- ベストアンサー
- CSS
- CSS ＜div＞の入れ子が反映されない
＜div＞要素を使ってレイアウトを考えています。 いくつかのBOXを一まとめにして中央表示にしようと思うのですが 一まとめにする為のdiv要素が全く反映されません。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ * { padding : 0px ; margin : 0px ; } #kihon { background:#ff0000; width : 752px ; margin : 0 auto ;} #header { width : 750px ; background: #ff00ff ; } #main { float: left; width: 500px; background: #0000ff ; } #menu { float: left; width: 250px; background: #00ff00 ; } #footer { clear : both ; width : 750px ; background: #000000 ; } ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <body> <div id="kihon"> <div id="header">aaa</div> <div id="main">aaa</div> <div id="menu">aaa</div> <div id="footer">aaa</div> </div> </body> ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 上の記述で、<div id="kihon">が全く反映しません。 一応一まとまりにはなるのですが、左上に固まって表示されるだけです。 自分でも色々調べたのですが調べ方が悪いのか原因が全く分かりません。 知り合いにHP作成の知識がある人がおらず相談が出来ないので こちらでお力を貸して頂きたく投稿させていただきました。 よろしくお願いいたします。
- ベストアンサー
- HTML
- divタグ+CSSでのレイアウトで、Firefox, Operaで不必要な余白ができてしまいます。
divタグ+CSSでレイアウトしようとしています。 横関係では全体がセンタリングされていて、縦関係においては、各ブロック要素間の余白がなくぴったりくっついている状態にしたいのですが、Firefox 1.0やOpera 8などを使ってレイアウトを確認すると、上下や要素間に余白が出来てしまい、なかなかうまくいきません。 以下、HTMLとCSSのソースを、レイアウトに関する部分だけ載せます。 [--HTML--] <body> <div id="all"> <div id="header"> <p>header</p> </div> <div id="body"> <p>body</p> </div> <div id="sidebar"> <p>sidebar</p> </div> <div id="footer"> <p>footer</p> </div> </div> </body> [--CSS--] @charset "shift_jis" body { margin: 0 auto; padding: 0; text-align: center; } div#all { width: 760px; background-color: blue; margin: 0 auto; padding: 0 0 20px; text-align: left; overflow: hidden; } div#header { position: relative; left: 17px; width: 717px; height: 50px; background-color: yellow; margin: 0; padding: 0; text-align: left; } div#body { position: relative; left: 17px; width: 522px; height: 200px; background-color: lime; margin: 0 0 2em; padding: 0; text-align: left; float: left; } div#sidebar { position: relative; left:32px; width: 180px; height: 200px; background-color: red; margin: 0 0 3em; padding: 0; float: left; } div#footer { position: relative; left: 17px; width: 717px; height: 100px; background-color: fuchsia; margin: 0; padding: 0; clear: both; } ---------- marginやpaddingを"0"にしているにもかかわらず、余白が生まれてしまうのはなぜなのでしょう・・？
- ベストアンサー
- CSS
- CSSによる3カラムレイアウト
CSSによる3カラムレイアウト 以下のHTML(A)をCSSで(B)の様に表示させたいのですが、どの様にすると良いでしょうか？ HTML(A) <!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" dir="ltr"> 省略 <body> <div id="container"> <div id="wrapper"> <div id="content">コンテンツ</div> </div> <div id="header">ヘッダー</div> <div id="navigation">ナビゲーション</div> <div id="widget">ウィジェット</div> <div id="footer">フッター</div> </div> </body> </html> 表示(B) |ヘッダー | |ナビゲーション｜コンテンツ｜ウィジェット| |フッター | 自分でも大分試行錯誤したのですが、思い通りの結果が得られません。 今のところは、コンテンツとナビゲーションをfloatで横並びにし、ヘッダー分の高さをmarginで下げて、ヘッダーはposition: absolute;で上部に表示させています。 ウィジェットが無い2カラムの状態ならそれで解決しているのですが、ウィジェットを追加して表示(B)の様に3カラムにしようとすると上手くいきません。 HTMLを変えれば他にやり様は思いつくのですが、containerとwrapperを除く要素の並びは(A)の通りで実現させたいです。 また、上記のソース自体あまりスマートではないのですが、もっとスマートなやり方があればそちらも指南頂けると幸いです。
- ベストアンサー
- HTML
- CSSでのレイアウトが崩れてしまうんです。
お世話になります。ＣＳＳビギナーなのですが、どうかご教授ください。800pxの画面のセンター表示のサイトを作りたいのですが、divでheader800px/container800px/contents600px（contensの中にleftmenu150px/centermenu450px/footer600pxとさらにdiv分けしてあります。）/leftmenu200pxという具合にレイアウトしたいのですが、leftmenuがcontensの右横にきてくれません。footerの下に表示されます。さらに言うとcontens自体が真ん中に表示されてしまいます。float:leftを指定するとブラウザ画面の左側にいってしまいますし...。これはどうしてでしょう？素人ゆえ基本的なことを見落としているかもしれませんがどなたか教えていただけないでしょうか？ ■HTML </head> <body> <div id="header">省略</div> <div id="container">省略</div> <div id="contens"> <div id="leftmenu">省略</div> <div id="centermenu">省略</div> <div id="footer">省略</div> </div> <div id="rightmenu">省略</div> </body> </html> ■CSS div#header { padding-top:0px; width:800px; margin-left:auto; margin-right:auto; background-color:#00CC00; } div#container { width:800px; margin-left:auto; margin-right:auto; } div#contens { width:600px; margin-left:auto; margin-right:auto; } div#leftmenu { width:150px; float:left; } div#centermenu { width:450px; float:left; margin-left:auto; margin-right:auto; background-color:#FFFFFF; } div#footer { float:left; width:600px; padding-top:50px; } div#rightmenu { width:200px; float:right; background-color:rgb(147,182,110); padding-bottom:5px; } body { background-attachment:scroll; background-color:#FFFFFF; background-image:url(../image/bg.jpg); background-repeat:no-repeat; background-position:center top; }
- ベストアンサー
- ブログ
- cssレイアウトでのdivコンテナの背景画像印刷
cssでdiv#wrapper～div#mainとコンテナを作成して＃mainに背景画像を配置しました。画像は、画面には表示されますが印刷されません。上にかぶせたコンテナの文字は、印刷されるのですが...。印刷できるよにするにはどうしたらよいでしょうか。よろしくお願いいたします。
- ベストアンサー
- CSS
- ヘッダーとフッターを画面いっぱいにする方法について
添付画像のようにヘッダー部とフッター部だけを画面いっぱいにしたいと思っています。 HTMLはおおよそ以下のような構成になっています。 CSSでは <div id="container">に対して以下のように記述しています。 --------------------------------------- #container{ width:1000px; margin: 0,auto; } --------------------------------------- HTML内のheaderやfooterを<div>で囲むwrapを作り、それらにwidth: 100%;とCSSに記述してやればうまくいくような事を聞きましたがうまくいきませんでした。 それほど複雑な構成ではないシンプルなタグ構造だと思います。 ヘッダーとフッターの幅を添付画像のように画面いっぱいに広げるにはHTML, CSSにどのような記述をすればいいのでしょうか？ ご存知の方いらっしゃいましたら宜しくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>サンプル<title> </head> <body> <div id=container> <header> ヘッダー </header> <nav> </nav> <main> </main> <footer> フッター <footer> </div> </body> </html>
- 締切済み
- HTML
- CSSでの段組の組合せについて
こんにちは。 #header,#container,#footerと縦方向に並び、#containerの中で左右2段にしています。 ここまではよくあるのですが、#container内をさらに縦方向に2つに分けて、それぞれの左右の幅を変えています。 つまり、 #header #container #content1 #box1 #box2 #content2 #box3 #box4 #footer となり、#content1と#content2は縦に並び、#box1と#box2は左右に、#box3と#box4も左右に並びます。 CSSは後述します。 Dreamweaver8を使用しています。 DWではやや？な表示ですが、ＩＥ６では狙ったように表示できます。問題はsafariとFirefoxで・・・ どうも#content1と#content2が効いてないようです。 <br clear="all">をうまく使えばいいのかも知れませんが、今ひとつよくわかりません。 こういう段組では何を注意すれぱいいのでしょうか？ 納期が迫っててパニクってます。宜しくお願いします。 使い方
- ベストアンサー
- その他（プログラミング・開発）
お礼
回答ありがとうございます。 なるほど、文書構造を定義する以外にも、デザイン変更を楽にするためにcontainerのような要素を導入する場合があるのですね。