- ベストアンサー
ブラウザ最大化時に横へ伸びるサイトの構造とボックスレイアウトについて
- ブラウザ最大化時に横へ伸びるサイトの構造とボックスレイアウトについて教えてください。
- どのようなボックスレイアウトを使って、びよーんと横長にすることができるのでしょうか？
- firebugで見てもボックスが伸びているようには見えませんでした。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
示されたサイトは、横幅が950pxで固定されていますから伸びません。 fireBugでもそうなっています。 たとえば <body> <div class="section"> <div class="header">ヘッダ部分</div> <div class="section body_text"> <p>本文</p> <div class="section"> <p>記事</p> </div> </div> <div class="footer"></div> </div> </div> のようにマークアップされている場合でしたら、 body{background^color:gray;} div.section,div.footer{margin:0 auto 0 auto;width:70%;min-width:540px;max-width:800px;} div.body_text{background-color:Lime;} div.section div.section{margin:5px;width:100%;background-colr:white;} div.header,div.footer{background-color:aquq;} としておけば、div.sectionとdiv.footerだけは、最大800px、最小540pxの間で、ウィンドウの70%で左右均等に余白ができる。 div.section内のdiv.sectionは、その内側ほぼいっぱいになるはずです。 .wraperだと、詳細度は10ですから、他の場所で使えない。(もちろんwraperなんてクラス名やcontainerなんてidは疑問ですが？？？なにかのオーサリングツール由来らしい・・検索エンジンは理解してくれない(らしい)) class名は、その意味から同じクラスに属するものが複数存在するときに使用するものです。たとえば「男/女」「子供/大人」「日本人/アメリカ人/ドイツ人」とか Aさんは、(男 大人 ドイツ人)、Bさんは(女 大人 アメリカ人)とか・・ 現在HTML5が策定中ですが、そこで登場することになる新しい要素は、従来のHTML4で不足していた文章の要素です。多くのサイトでclass名として使われていたものを要素として採用したものばかりです。 class名 <div class=header">ヘッダ→<header> <div class="section">章→<section> <div class="footer">後付→<footer> <div class="article">記事→<article> <div class="aside">余談→<aside> セレクタ div.section{} )(詳細度11)＜div.section div.section{}(詳細度22) ときちんと詳細度を計算してCSSを記述すると、後で、他の宣言を追加するとき混乱しません。
その他の回答 (1)
- めとろいと（@naktak）
- ベストアンサー率36% (785/2139)
んと <div class="hImg">はそもそも<body>直下であって、<body>にwidthは指定されてないし hImgにもwidthは指定されていないから、ブラウザの幅に合わせて伸縮します。 <div id="container" class="wrapper clearfix">は、containerでwidthが950pxに指定されてますよ。 これは、<div class="hImg">直下にある<div class="wrapper">のwidthと一緒ですね。
お礼
naktak さん ありがとうございます。 そうですね、たしかにwidthが指定されていない、、、。だから伸びる。 ＞<div id="container" class="wrapper clearfix">は、containerでwidthが950pxに指定 ＞これは、<div class="hImg">直下にある<div class="wrapper">のwidthと一緒ですね。 自分のソースの読み方が、足りませんでした。 指定されていないから、びよーんと伸びる。。。ていいますか、制限されない。 書いてみます。 ありがとうございます 失礼致します。
お礼
ORUKA1951 さま 詳しく書いてくださいまして、誠にありがとうございます。 ほえーーー、といういう感じです。８０％は理解が出来ました。 ＞div.section,div.footer{margin:0 auto 0 auto; など、このように書いたことがありませんでした。詳細度の勉強をしたら良いですね。 min-widht:500px; max-width:800px; を指定してあげて、それは制限として、７０％としてあげれば左右均等の余白ができるのですね。 なるほどですね。 何回も読みなおして、勉強いたします。 ご丁寧にありがとうございます 失礼致します。 containerなどの文字は意味自体がないので、sectionなどと書くのですね。