ウォーターサーバーとコーヒーマシンが一体化した画期的マシン >>

<div class="a">で一度幅や高さの指定をしているのに、ウインドウサイズを変更しても、レイアウトが崩れないようにするために、その<div>からさらに<div>で囲むのはなぜなんでしょうか?

<div id="wrapper">
 <div class="a"></div>
</div>

div.a {
width:900px;
}

#wrapper{
width:900px;
}

このQ&Aに関連する最新のQ&A

A 回答 (2件)

「ウインドウサイズを変更しても、レイアウトが崩れないようにするため」ではないでしょうか?(^^;



divをdivで囲う理由は、色々ありますが、この場合ですと、
<div id="wrapper">
という大きなブロックと
<div class="a">
という、さっきのブロックの中にある一つのブロック
と、意味のあるブロック単位に明示的に分けていると考えられます。
この形ですと、<div id="wrapper">の中に、<div class="a">を複数設置したり、<div class="b">を併設したり、色々できますね。

両方width:900px;を指定しているのは、どっちか片方だけだと、デザインが崩れるブラウザもあるからです。両方指定しておけば確実ですね。
    • good
    • 0
この回答へのお礼

なるほど。ブラウザによって片方だけ指定しても崩れる場合があるんですね。

ありがとうございました。

お礼日時:2008/01/24 11:24

こんにちは



サンプルのでは余り関係ないですね(><)

例えば
<div style="width:100px;float:left;"></div>
<div style="width:100px;float:left;"></div>

というのがあったとすると
200px以上の幅があれば横に並べて置くことができて、それ以下だとレイアウトが崩れる。でも

<div style="width:200px;">
<div style="width:100px;float:left;"></div>
<div style="width:100px;float:left;"></div>
</div>

としたら200px以下でも崩れないというやつですよね?

200px以下のところに100pxのものを2つ入れようとしても無理ですよね?
そうした場合、上では100pxと100pxの2つに分けられるから無理に入れようとはせずに下にずらしてしまえって感じになるけど
下では200pxでまとめられているから分解できず、表示するには200px必要・・・しょうがないからスクロールバーでも出して無理やり入れてしまえって感じ・・・
言葉で説明しようと思うとどう説明すれば良いか分からないですけどイメージ的にはこんな感じで理解してもらえるでしょうか?

ようはそのサイズに入らないときに分解されてしまうのを防ぐ為に使用しています
    • good
    • 1
この回答へのお礼

自分の例は悪かったですね。すいません。
divで複数の区分を指定した場合ですね。

なるほど。サイズに入らないときに分解されてしまうのを防ぐためですか。

ありがとうございました。

お礼日時:2008/01/24 11:49

このQ&Aに関連する人気のQ&A

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

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q画面サイズ変更時のレイアウトの崩れ

サイトをHTML+CSSで作成しているんですが
ブラウザのサイズが最大化のときは平気なのですがサイズを変更する(縮める)とライン画像がはみ出したりリストが縮める側に寄ってしまったりとレイアウトが崩れてしまいます。
これを直す方法はあるでしょうか?

背景は1024×50の画像をy軸でリピートさせています。
レイアウトのほうは見出し画像の右にリストを横に表示させ、その下にナビゲーションを配置しています。
最大化時、縮小化時ともに縦、横のスクロールがなぜか表示されません。

Aベストアンサー

スクロールバーが表示されないのが問題なのでしょうか?
テンプレートを使っている場合は、デフォルトで表示されないようにしてあったりする場合があると思います。

overflow-x:hidden;
overflow-y:hidden;
などがないか確認してみるといいと思います。

Qウィンドウのサイズを変えても表示を崩れないようにしたい

ウインドウサイズをドラッグドロップして大きさを変えると
表示が崩れまくって困ります
固定する方法はないですか?ウインドーの大きさにかかわらずに
常に表示が同じな。

Aベストアンサー

表というのはtableタグでしょうか?でしたら
<table width="">(幅)
<table height="">(高さ)
で大きさを指定するとウィンドウサイズを変えてもテーブルのサイズは変わらないと思います。

QCSSで画面サイズを縮小するとレイアウトが大きく崩れてしまう

CSSとXHTMLで、左と右に分かれただけのデザインという少し変わったレイアウトで作ってみたのですが、画面サイズを変更(縮小)すると右側のBOXがすべて左側の下に回り込んでしまいます。
できればスクロールバーなどを出現させて、レイアウトが崩れないようにしたいと考えています。
色々いじくっていたらめちゃくちゃになってしまったのですが、一応CSSを掲載しておきます。
また、左側を○○pxで、右側を残りのサイズというようなwidthの指定の仕方ってあるのでしょうか?
frameとかだと*で対応するみたいなんですが・・・

ひとまず、周り込を回避する方法が優先です。
どうかよろしくお願いいたします。


@charset "shift_jis";


body {
margin: 0px;
height: 100%;
padding: 0px;
font-size: 12px;
line-height: 150%;
}
html {
height: 100%;
}
img {
border: none;
vertical-align: bottom;
}

#left {
background-color: #666666;
width: 350px;
float: left;
min-height: 100%;
height: 100%;
}
#right {
height: 100%;
padding: 35px 0 0 0;
min-height: 100%;
width: auto;
margin: 0 0 0 350px;
}

CSSとXHTMLで、左と右に分かれただけのデザインという少し変わったレイアウトで作ってみたのですが、画面サイズを変更(縮小)すると右側のBOXがすべて左側の下に回り込んでしまいます。
できればスクロールバーなどを出現させて、レイアウトが崩れないようにしたいと考えています。
色々いじくっていたらめちゃくちゃになってしまったのですが、一応CSSを掲載しておきます。
また、左側を○○pxで、右側を残りのサイズというようなwidthの指定の仕方ってあるのでしょうか?
frameとかだと*で対応するみたいなん...続きを読む

Aベストアンサー

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<style>
/* left[liquid] right[fixed] */
body {
overflow: hidden;
zoom: 1;
}
#left {
float: left;
width: 100%;
overflow: hidden;
zoom: 1;
}
#left div.contents {
margin-right: 240px;
}
#right {
float: right;
width: 240px;
margin-left: -240px;
overflow: hidden;
zoom: 1;
}
/* your design */
body{
margin:0;
width:100%;
height:100%;
}
#left{
background: #eee;
height:100%;
}
#right {
background: #ccc;
height:100%;
}
</style>
<body>
<div id="left">
<div class="contents">
text text text text text text text text text text text text text text
</div>
</div>
<div id="right">
text text text text text text text text text text text text text text
</div>
</body>
</html>
こんな感じでどうでしょう?サブコンテンツ固定のメインコンテンツ可変のレイアウトです。(注:IE6とFirefox2.0でしか確認してません)
最近ブログに同じような記事を書いたので、よろしかったら参考にしてみてください。

簡単にCSSレイアウトできるフレームワークを考えてみる - Cyokodog::Diary
http://d.hatena.ne.jp/cyokodog/20080731/1217496357

サブコンテンツ固定・メインコンテンツ可変のCSSレイアウト - Cyokodog::Diary
http://d.hatena.ne.jp/cyokodog/20080805/1217955315

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<style>
/* left[liquid] right[fixed] */
body {
overflow: hidden;
zoom: 1;
}
#left {
float: left;
width: 100%;
overflow: hidden;
zoom: 1;
}
#left div.contents {
margin-right: 240px;
}
#right {
float: right;...続きを読む

Q文字拡大時にレイアウトが崩れる

普段何も気にせずに制作していたら○のように
文字を拡大してもレイアウトが崩れなかったのですが
新しくホームページを作っている時×のようなレイアウトになってしまいました。
下のfooter部分に食い込んできます。

2つのホームページを見比べても解決しません。
何が悪いのか見当も付きません。

似たような回答は他にもあったのですが解決できませんでした。
ご教授いただけますでしょうか

Aベストアンサー

No2です。解決できたようでよかったですね^^
heightはケースにもよりますが、基本的に可変の可能性のあるdivなどには指定しないほうが良いと思います。
ユーザーが文字を大きくしたときに崩れたり、のちのち文言を変更しようとした場合にCSSをその都度いじらなくてはならなかったり…と、ユーザーにも作成者にも不便になりますしね。
heightを指定していたのは、もしかして左右のボックスの高さを揃えたかったとかでしょうか?(もしそうならheightLine.jsなどを使用するといいかも!)
頑張ってください!

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

Qウインドウを縮小しても文字をずれなくしたい

html初心者です、宜しく御願いします。

“タイトル・・・・・・・”という文字を横一列に表示させた後、ウインドウの画面を縮
小すると文字が縦方向にずれます。

これを「ウインドウを縮小しても文字が隠れても良いので、文字が縦方向に移動しないようにしたい」のですがどの様にすればよいのでしょうか。
ボーダーを作って、その中に文字を入れてやっても、文字は同じようにずれてしまいまし
た。
これを防ぐにはどの様なやり方があるのですか。
CSSで描いています。

以上宜しく御願いします。

Aベストアンサー

「見栄えを定義する場合はCSSで」
というのが推奨されてます。
ので、
<html>
<body>
<div style="white-space: nowrap;">
タイトル・・・・・・・
</div>
</body>
</html>
とか。

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

Q自分のサイトを開いた時にウィンドウのサイズを固定したい

いつもお世話になります。
htmlもよく分からずに自分のサイトを作っている、初心者です。
生意気な事ですが、デザインの関係で
自分のサイトを開いた時にウィンドウのサイズを
固定して見てもらいたいのですが、
どうすればよいのか分かりません。
もしかしたらここで聞く事ではないのかもしれませんが
なにぶんにも初心者なのでおわかりの方がいらっしゃれば
ぜひご教授ください
よろしくお願いします。

Aベストアンサー

サイトトップでJavaScriptから新しいウィンドウを開いて、指定のサイズのウィンドウ上で展開する場合のソース例です。

<html>
<head>
<title>Top page</title>
<script type="text/javascript"><!--
function winopen(){
var MainWin=window.open("tester.htm","MyWebSite","width=600, height=400, statusbar=1, location=1, menubar=1, toolbar=1, resizable=0, scrollbars=1");
}
//--></script>
</head>
<body>
<p><a href="呼び出すページのURL" onClick="winopen(); return false;">ENTER</a></p>
</body>
</html>

このようなソースにすると、このページのリンクをクリックした時に、JavaScriptで新しいウィンドウをサイズを指定して開き、そこに次のページを読み込むようになります。
もしJavaScriptが有効ではない環境で閲覧する場合には、新しいウィンドウは生成されず、トップページを表示したウィンドウ上で次のページが表示されるようになります。

ウィンドウサイズは、window.open()の括弧内にある、widthとheightで指定します。 単位はピクセルです。
その他にもいくつか指定を入れてありますが、このスクリプトの部分については、参考URLが詳しいので、そちらを参照してみてください。


ここからはアドバイスですが、可能であれば、やはりウィンドウサイズをリサイズさせなくてもすむデザインにしたほうが無難と思います。
先ほど書いた、フレームを使ってページの表示領域を制限する方法でも、ウィンドウサイズに左右されないデザインに近づけることができると思います。

他に、テーブルで囲んだり、スタイルシートによって表示の横幅を決めてしまえば、内容を表示する領域を固定値として確保できるので、ウィンドウ幅の差によるデザインの崩れを排除できる可能性もあるでしょう。
テーブルの場合は、通常のテーブルで横幅を指定し、その中に内容をすべて入れてしまえばよいだけです。
スタイルシートの場合は、
<div style="margin: auto; width: 600px;"></div>
で全体を囲めば、ウィンドウの横幅が変わっても内容の表示幅は変わらないようにできます。
もし、デザイン上のウィンドウサイズ指定が、ウィンドウの横幅が変わることでレイアウトが崩れることの防止策であるとするなら、これらの方法も対策になると思いますよ。

参考になれば幸いです。

参考URL:http://tohoho.wakusei.ne.jp/js/window.htm#open

サイトトップでJavaScriptから新しいウィンドウを開いて、指定のサイズのウィンドウ上で展開する場合のソース例です。

<html>
<head>
<title>Top page</title>
<script type="text/javascript"><!--
function winopen(){
var MainWin=window.open("tester.htm","MyWebSite","width=600, height=400, statusbar=1, location=1, menubar=1, toolbar=1, resizable=0, scrollbars=1");
}
//--></script>
</head>
<body>
<p><a href="呼び出すページのURL" onClick="winopen(); return false;">ENTER</a...続きを読む

Qdiv領域をウインドウサイズに合わせる

divタグで生成された3つの領域を横に並べたいのですが、
左2つは幅をピクセル指定で固定し、3つめをウインドウサイズに合わせて残りの幅全てを使う、という指定はどうすればいいでしょうか?
高さもやはりウインドウサイズにあわせるようにしたいです。
また、左2つの領域は固定したまま、3つめの領域のみスクロールができるようしたいです。

現在下記で試していますが、うまくいきません。
お分かりになる方、知恵をお貸しくださいo(_ _*o)


【HTML側】

<div id="left">1</div>
<div id="center">2</div>
<div id="right">3</div>


【CSS側】

html,body{
  height:100%;
  width:100%;
      }
div#left{
  width:150px;
  height:100%;
  float:left;
}
div#center{
  width:160px;
  height:100%;
  float:left;
}
div#right{
  width:100%;
  height:100%;
  float:left;
}

divタグで生成された3つの領域を横に並べたいのですが、
左2つは幅をピクセル指定で固定し、3つめをウインドウサイズに合わせて残りの幅全てを使う、という指定はどうすればいいでしょうか?
高さもやはりウインドウサイズにあわせるようにしたいです。
また、左2つの領域は固定したまま、3つめの領域のみスクロールができるようしたいです。

現在下記で試していますが、うまくいきません。
お分かりになる方、知恵をお貸しくださいo(_ _*o)


【HTML側】

<div id="left">1</div>
<div id="center">2</...続きを読む

Aベストアンサー

できません。
 そうなるとHTMLではなくてPDFなどの他の仕様の範疇です。
 HTMLは、元来さまざまなプラットホームで利用できるように考案されたものです。すなわちさまざまな解像度、ウィンドウ幅、点字端末、読み上げブラウザ・・検索エンジンも・・
 HTMLの基本中の基本です
【引用】____________ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )]より

 それはともかく、HTMLはワープロやDTP ( http://ja.wikipedia.org/wiki/DTP )のようなデザインのためではありません。これを最も間違える部分です。

 ですのでマークアップは(インデントがわかりやすいようにタブを全角スペースで置き換えてあります)
<div class="section">
 <h1>サンプル</h1>
 <div class="body">
  <h2>見出し</h2>
  <p>段落</p>
  <p>段落</p>
 </div>
 <div class="nav">
  <ul>
   <li>あいう</li>
   <li>えおか</li>
  </ul>
 </div>
 <div class="contentTable">
  <h2>目次</h2>
  <ol>
   <li>きくけ</li>
   <li>こさし</li>
  </ol>
 <div>
</div>
</body>


とかになるはずですね。HTMLは文書構造を示すもの。CSSはプレゼンテーションを示すものという明確な区別があります。id=leftなんて、しないこと。先で右に配置したくなったらどうするの・・

 さて、div要素の幅はウィンドウ幅を認識できますが、高さはウィンドウの高さを認識しません。IEの互換モードにすれば、IEのバグ(仕様?)でウィンドウ高さを使えます。そのときdivの親要素がbodyなので、body{height:100%;}が必要。
 ★ただしこの方法は非推奨です。他のブラウザではうまくいきません。

 ディスプレイ幅が小さなブラウザ、あるいは目が悪くてフォントを拡大して見られる訪問者のことも考えれば高さは指定すべきではありません。

 よって幅だけを指定する方法を上記HTMLでしたら
html,body{margin:0;padding:0;}
div.section{width:100%;position:relative;background-color:gray;padding-left:320px;}
div.section div.nav,
div.section div.contentTable{position:absolute;top:0px;height:1000px;}
div.section div.nav{left:0px;width:150px;background-color:green;}
div.section div.contentTable{left:150px;width:160px;background-color:blue;}
でよい。

 floatは、ここで使うべきじゃありません。あくまで文章中の画像の周囲に本文を回りこませるためや(小さなブロックをウィンドウ幅に合わせて並べるとか)に使うものです。もし本文でfkoatの必要がでてきたとき、clearできなくなっちゃう。


 

できません。
 そうなるとHTMLではなくてPDFなどの他の仕様の範疇です。
 HTMLは、元来さまざまなプラットホームで利用できるように考案されたものです。すなわちさまざまな解像度、ウィンドウ幅、点字端末、読み上げブラウザ・・検索エンジンも・・
 HTMLの基本中の基本です
【引用】____________ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機...続きを読む


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング