こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

リキッドレイアウトでどうしてもわからないこと

リキッドレイアウトを作成しているのですが、どうしてもわからないことがあります。

見本のサイトは:http://ieiri.net/ なのですが、

widthを狭めていくと一定のときにサイドバーがしたに回り込みます。

<div id="main">
<div id="content"></div>
<div id="sidebar"></div>
</div>

これはおおよそ70%と30%の割合で、構成されていると思います。

ただ、なぜmainを縮めていき、サイドが下に回りこんだ際に、メインの中の比率は70%:30%にならないのでしょうか。普通であれば、縮めていってもサイド分の30%は確保されているはずですが、このサイトはピッタリcontent分の比率が確保されております。

よろしくお願いします。

投稿日時 - 2013-01-19 03:53:26

QNo.7898934

困ってます

質問者が選んだベストアンサー

CSS Level 3 のメディアクエリを利用しています。
http://www.w3.org/TR/css3-mediaqueries/
https://developer.mozilla.org/ja/docs/CSS/Media_queries

/* Tablet (portrait) */ の辺りを参考にどうぞ。
http://ieiri.net/wordpress/wp-content/themes/origin%20copy/style.css

投稿日時 - 2013-01-20 22:32:02

お礼

@media only screen and (min-width: 768px) and (max-width: 959px) {

この表記がわかり解決しました。こんな便利な方法があるのですね。ありがとうございました!!

投稿日時 - 2013-01-21 03:55:24

ANo.2

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.1

widthの幅は、padding辺の内側です。
 ⇒8.1 ボックスの寸法(Box dimensions)( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/box.html#box-dimensions )
width幅を49%,49%に指定していても、borderやpadding幅が加わると、幅を狭めていくと当然はみ出してしまいます。
 きちんと、説明していないサイトは役に立ちません。

 そもそもfloatでボックスを配置すること自体おかしいです。floatはテキスト中の画像周囲にテキストを回りこませるのが本来の目的です。また、小さなブロックをウィンドウ幅によって列数を変えて表示するなどあくまでフロートとして利用すべきプロパティです。
 ⇒'float'( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#propdef-float )
 ボックスの配置にfloatを使用すると、HTML自体をその順番に記述する必要があるため、文書構造が本来のものではなくなってしまいますよ。
『例えば絶対配置による方法では、HTMLを記述する上で内容の配置順序が自由になることが回り込ませるボックスを先に記述する必要がある回り込みによる方法よりも優れている( http://ja.wikipedia.org/wiki/%E6%AE%B5%E7%B5%84#Web.E3.83.87.E3.82.B6.E3.82.A4.E3.83.B3.E3.81.AB.E3.81.8A.E3.81.91.E3.82.8B.E6.AE.B5.E7.B5.84 )』
 さらに、idがmain,content,sidebarという文書構造とは言えないものになってしまっているし・・
 ⇒DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )

 色々な面であまり参考にならないですね。HTML5と称している割には--
Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html )
 でチェックしたら「頑張りましょう」でした(^^)

 HTML5でしたらマークアップは
<body>
 <header>
 </header>
 <section>
  記事
  <aside>
   脚注
  </aside>
 </section>
 <footer>
 </footer>
</body>
となるはずですね。HTML5の新しい要素に対応していないIE8以前のために、javascriptでこれらをブロックとして認識させる必要があるので、そうするかもしくはHTM4.01で
<body>
 <div class="header">
 </div>
 <div class="section">
  記事
  <div class="aside">
   脚注
  </div>
 </div>
 <div class="footer">
 </div>
</body>
としても良いでしょう。
 その上で
[HTML5用]
section{position:relative;min-height:600px;}
section>*{margin-left:30%;}
section aside{position:absolute;top:0;left:0;width:30%;}
[HTML4.01strict用]
div.section{position:relative;min-height:600px;}
div.section>*{margin-left:30%;}
div.section div.aside{position:absolute;top:0;left:0;width:30%;}
でもしておけば良いですね。

★idやclass名は文書構造を的確に示すものにしましょう。
 ⇒HTML5 における HTML4 からの変更点( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )
 が参考になるでしょう。
★できれば絶対配置で指定しましょう。
★常に仕様書に目を通すことを忘れずに--最初だけですが--

 HTML5ではなく、その元となっているHTML4.01--ただしstrict---をまずしっかり身につけましょう。そしたら複雑で巨大なHTML5の習得が楽でしょう。
 スタイルシートは、覚えてしまえばとても楽です。しっかり基本から・・うわべだけまねしても行き詰ります。特に
セレクタ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html )
値の割り当て、カスケード処理、継承( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html )

投稿日時 - 2013-01-19 11:51:11

補足

ご丁寧にご回答いただきありがとうございます。ただ、知りたいのはこのサイトのリキッドレイアウトのwidthの%指定しているものが、サイトのwidthを縮めた際には70%:30%で表示されないのかが分からないのですが。この指定でいけば、content内を縮めた際でも、サイド分の30%は確保されているはずなのですが。

投稿日時 - 2013-01-20 01:49:39

あなたにオススメの質問