- 締切済み
なぜ2重に囲うやり方をするのか
CSSの勉強のためにいろんなサイトのソースを見ていますが、ちょっと疑問に思う点がありました。よくコンテンツが書いてあるエリアを左や右へ寄せたい場合、divタグでコンテンツをくくり、そのdivにfloatの値を入れます。普通これだとdivでくくるのは1回だけでいいはずですが、多くのサイトでは2重にdivで囲っています。例えば外側はoutside_border、中はinside_borderとし、outside_borderにfloatやmarginを設定し、inside_borderにはpaddingやborderの属性が与えられていました。これって１つのdivでくくってしまえば、1つで済むと思うのですが、なぜこういったやり方をしているんでしょうか？ ///////////////////////////////////////// #outside_border { float: left; margin: 0px; } #inside_border { margin: 0px; padding: 3px; border: solid 1px #CCCCCC; }
- seed_twice
- お礼率7% (138/1828)
- HTML
- 回答数6
- ありがとう数3
- みんなの回答 （6）
- 専門家の回答
みんなの回答
- suzuko
- ベストアンサー率38% (1112/2922)
>よくコンテンツが書いてあるエリアを左や右へ寄せたい場合、divタグでコンテンツをくくり、そのdivにfloatの値を入れます。普通これだとdivでくくるのは1回だけでいいはずですが、多くのサイトでは2重にdivで囲っています。 外側のdivでfloat:clearをする為では？
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
> No.2補足 > しかしcontainerの中に1つだけしかdivが無ければ、わざわざ内側にもう一つdivを作る必要がないように思えるのです 1つの時はなおさらスタイルシートを目的としたタグだと思います。 <div style="border:1px solid blue;"> <div style="border:1px solid red;"> 赤と青の二重線の枠 </div> </div> こんな感じでしょうか。 <div>１つではこの二重枠線は書けませんので、<div>を2つにするという人が多いと思います。 :before、:afterやbackground-imageを使えば可能な事も多いですが、 :before、:afterはIE7以前で対応していませんし、 その方法を知らなければ<div>を無駄に使うことになると思います。 昔はホームページビルダーが<font>を大量に入れ子にする「汚いHTML」を作ると言われてましたが、 スタイルシートを目的としたタグの挿入は、私は<font>の入れ子と同じレベルだと思います。 >No.3、NO.4 <ul>を外枠と見なしてもいいのですが、 内容の要素が違う場合は、<div>は区切りとしての意味を持ちますので、 <div>だけを取り出せば <div id="header"> <div id="menu"> <div id="content"> <div id="footer"> 統一できてわかりやすくなると思います。 また、menuだから<ul>が１つとは限りませんし、 後々追加する可能性も考えれば、あらかじめ<div>で区切っておく方が変更しやすいと思います。 蛇足ですが、HTML5ではこういうdivの代わりにするための<header>や<footer>、<nav>などのタグが追加されます。 > なぜこういったやり方をしているんでしょうか？ 正確な理由は制作者自身に聞かないとわかりませんが、 私が見た中では「スタイルシートを目的としたタグの挿入」が殆どだと思います。
お礼
>赤と青の二重線の枠 なるほど、確かに色の違う2重線はできませんね。 確かにこういったテゼインをしたいのであれば、 こういったdivを2つやるのもわかります。 ですが、私が参考にしたサイトは 線が2つはなかったですね・・・
メニューなどのliだけだった場合、1つのdivだけでいいような気がす るんですが >> そういう場合は、親のulに外枠が付けられます。 ようするに、無駄なことですが、無駄なことにも課程があることがあります。途中で方針を変更することもありますから。 ＨＴＭＬ/ＣＳＳコーディングでも、適当にすれば、適当になりますから。。
そういう疑問が湧くんですね。。逆に不思議です。 (1)外側のDIVで全体の位置決めを行う。 (2)内側のDIVで内側での配置を行う。 その方が、内側のdivにボーダーやパディングが指定できるので、内側が複数であった場合などに、デザインに融通性が利くからではないですか？ ＣＳＳコーディン時にデザインを同時に行った方が効率的ですから。。
お礼
例えば３カラムのレイアウトにしたいなら、まずrightとleftにわけて、その跡でleftの中に2つのdivを作る・・・ということは理解できます。しかし2重に囲んだ中が、メニューなどのliだけだった場合、1つのdivだけでいいような気がするんですが
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
補足、、、というか、私の書き方です。 <div id="container"> <div id="menu-left-column"> メニュー </div> <div id="body-right-column"> 本文 </div> </div> こういうcontainerの代わりに<body>が使えるなら、 <div>を追加せずに<body>を使用しています。 <body id="container"><!-- この場合のidは不要 --> <div id="menu-left-column"> メニュー </div> <div id="body-right-column"> 本文 </div> </body>
補足
いや、containerの中に2つのdivをいれるなら、レイアウト的にも理解できます。しかしcontainerの中に1つだけしかdivが無ければ、わざわざ内側にもう一つdivを作る必要がないように思えるのです
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
ウインドウの幅を小さくしたときに段組表示の状態を維持するためには、 <div>を追加し、widthを指定しなければなりません。 ですが、このように表示したいから<div>を追加するという「スタイルシートを目的としたタグ」の追加は文法に反していると思います。 position:absoluteを使えば<div>で囲む必要はないのですが、 フッターなどの表示位置が本文の下にならないなどの問題が出てきますので、 <div>で囲む方法が使われます。 floatの本来の目的は、 横幅が広いウインドウで、左右の余白に表示することでスクロール幅を減らすというものですので、 ウインドウの幅が狭ければ左右の余白も無くなりますので横に並べる必要はありません。 スタイルシートの次期規格のCSS3では、グリッドという表（ひょう）状（マス目状）に並べるための規格がありますので、 ブラウザがサポートするようになればそれを使うべきだと思いますし、 そうなれば<div>で囲む必要もなくなると思います。 http://www.w3.org/TR/css3-grid/ http://msdn.microsoft.com/ja-jp/ie/dd218499.aspx http://msdn.microsoft.com/en-us/library/ms530771(VS.85).aspx
補足
外側のdivにclear属性を持たせるってことですか？