[PR]ネットとスマホ OCNでまとめておトク!

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領域をウインドウサイズに合わせる」の質問画像

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

A 回答 (2件)

できません。


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

 それはともかく、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できなくなっちゃう。


 
    • good
    • 0
この回答へのお礼

回答ありがとうございます。
独学で初心者なので基礎がわかっていなかったようです、すみませんo(_ _*o)
ORUKA1951さんの回答を読んで、おおすごい!なるほど!と納得しました。
少々難があるようなので、無理矢理作るよりも、もっと見る人に優しいデザインに変えてみたいと思います。
ありがとうございました!

お礼日時:2011/05/15 17:09

独学でWEBサイトを作成している者です。


多少勘違いをしている様ですのでちょっと訂正をしておきます。
px値も%同様れっきとした相対単位です。
pxという単位の基準が画面サイズです。従って画面の大きさによって広さが変わります。
なので全て%値で良いのではないでしょうか?
どうしても絶対値指定したいならptとかで指定して下さい。絶対お勧めはしません。
で、rightのみスクロールバーを付けたいというのはその位置以外は動かない様にしたいというのと同義語ですよね?
余り推奨されてはいませんが、画面にスクロールしても常に同じ位置に表示させる事は可能です。
CSSでposition:fixed;(positionのabsoluteを指定したと同じで、さらにスクロールしても同じ位置に表示される)を指定してスクロール対象から外します。同時にtop,left,right,bottomなどで位置調整して、z-index:10;(HTMLで書かれた上部項目からどんどん数値が上がるようですのでページが長くスクロールで隠れる様なら数値を上げて下さい。初期値:body=0)と指定して、id=leftとid=centerを位置決めして下さい。
私がやるなら
div#left{
display:block;
background:#eeeeee;
position: fixed;
width:150px;
height:500px;
z-index:1; /*今回これないと表示されないので最低限の1ですが
画面全体の階層数に応じて増やして下さい*/
}

div#center{
display:block;
background:#ffff66;
position: fixed;
padding-left: 160px;
width:160px;
height:500px; /*この項目にもz-indexを追加して下さい。文字記入して
行ったらスクロールすると非表示(下に隠れる)になります*/
}

div#right{
display:block;
background:#ffccff
width:77%;
padding-left:330px;
height:500px;
background:#ffccff; /*ここは特にz-indexは必要ないです一番高い階層ですから*/
}
こうなります
中身が無いのでdisplay:block;で表示させてます。
全てのボックスの起点はleft:0;です。
で、padding-leftを使って文字の出力位置を調整しています。
さらに画面幅いっぱいでの注意!!CSS全体に言えるが…
ボックスの幅(あえてこう書いています)というのは
width+margin+padding=画面全体となりますので、調整する際はこの3つの要素を足し引きして
調整します。物の幅=widthではありませんのでこの点にご注意を!!
あとそのCSSは本来のではなくここで書いた物ですよね?
それコピペして検証しようとしたら全角スペース入ってたんで…(入ってると機能しません)
使うならTABキーを!!
    • good
    • 0
この回答へのお礼

回答ありがとうございますo(_ _*o)
pxが相対単位だというのは知りませんでした・・・勉強になります。
やはり熟練の方からしたら無理な注文、といった感じなのですね;
デザインをかえて作り直してみます。ありがとうございました!

お礼日時:2011/05/15 17:13

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

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

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

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

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

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

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

Aベストアンサー

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

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

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

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

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

Aベストアンサー

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

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

QPCの画面を縮小したらサイズに合わせて改行させたい

こんにちは。

メモ帳を使ってホームページを作成しています。
長い一文など<br>を使って改行しているのですが、パソコンの画面を縮小すると、横スクロールバーが出てきて見にくいものになってしまいます。
他のサイトさんを見ると、画面サイズを縮小すると自動的に見やすく改行され、横スクロールバーも出てこないのですが、(最大化した時と改行していている位置が違います)どういうタグ等を使ったらこのように設定できるでしょうか?

作成については初心者で、本を見ながらやっている状態です。
使用しているブラウザはIE7で、WindowsVistaです。
なにとぞよろしくお願い申し上げます。

Aベストアンサー

divとtableの場合のサンプル
<div>や<table>の横幅をパーセント指定します。
固定値(500px)などにすると改行されたようには出来ません。

<html>
<head>
<title>sample</title>
</head>
<body>
<div style="width: 100%;word-break:break-all;">
<p><!-- 長い文章を書き込む --></p>
</div>
</body>
</html>

<html>
<head>
<title>sample</title>
</head>
<body>
<table style="width: 100%;word-break:break-all;">
<tr>
<td><!-- 長い文章を書き込む --></td>
</tr>
</table>
</body>
</html>

※英文ようにword-breakを追加しています。

Qレイアウトが崩れないようにするための、

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

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

div.a {
width:900px;
}

#wrapper{
width:900px;
}

Aベストアンサー

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

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

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

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

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

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

Aベストアンサー

<select style="width: 200px">

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)はこれら以外にも
いろいろな設定方法があります。

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

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...続きを読む


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

人気Q&Aランキング