ページのサイズ構成につきまして

質問

1ページのサイズ構成につきまして

===================
　　　TOP　　　　　　　|
===================
メニュー　|　　　　　　　|
　　　　　　|　　　　　　　|
　　　　　　|　　　本文　|
　　　　　　|　　　　　　　|
===================
div:フッター　　　　　　　|
===================

というページ構成を考えています。
4つのブロック構成にわけるのですが、

質問：各ブロックの幅・高さの設定方法について教えて頂きたいのです。

考え1.サイズの絶対数で指定してページを作成するのがいいのでしょうか？
　「Bブロック：width: 500px;　本文ブロック：width：300」

考え2.サイズを%？表示で指定して、ブラウザのサイズに合わせて自動リサイズされるようにする？
　ブラウザのサイズに合わせて自動で、サイズ幅が変わるように作ったほうがいいのでしょうか？
　⇒といいますか、全体サイズの何%といった指定が出来るのでしょうか？

現在では、どちらの考えで作成するほうがいいのでしょうか？
よろしくお願いします。

回答No.3

DrFell · ベストアンサー

「固定 可変 メリット デメリット」あたりで検索してみてください。足して2で割ったような手法も出てきます。

現在どちらの考えがいいというより、ターゲット層により使い分けたり、制作者の判断・このみで決定します。1ｐｘのずれも許されない場合は固定が多いですが、読者に柔軟に対応したければ、合わせ技や可変（リキッド）となります。

長短をしり、ご自分にできる範囲でご自分で決めてください。

＞全体サイズの何%といった指定が出来るのでしょうか？
できます。可変・リキッドレイアウトなどと呼ばれています。
メニュー30％本文70％などと指定できます。

お礼

リキッドレイアウト試してみました。

確かに、%指定で行うことが出来ました。
ただ、色々不便がわかりましたので、px指定でやってみようと思います。

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

回答No.2

ORUKA1951

frameは1999年勧告のHTML4.01以来、非推奨で
『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』
とされてきたことと、余りに問題が多いため、さすがにここ四、五年は見かけなくなりました。以後のXHTML1.1/HTML5では、廃止されました。

とりあえず説明のため、HTML5の要素(前後をその名前のタグで囲む)で説明します。
文書は多くの場合
<header></header>
<section></section>
<footer></footer>
などで構成されています。

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
・section 要素は、文書やアプリケーションにおける一般的なセクションを表します。h1, h2, h3, h4, h5, h6 要素と共に使用することで、文書構造を表すことができます。
・article 要素はブログのエントリや新聞記事など、文書内で自己完結可能な箇所を示します。
・・・【中略】・・・
・header 要素は導入部やナビゲーションをグループ化します。
・footer 要素はセクションのフッタを表します。フッタには作者に関する情報や、著作権情報などを含められます。
・nav 要素はナビゲーションとなるセクションを表します。
・・・【中略】・・・
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［HTML5 における HTML4 からの変更点( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )］より

これらは、HTML4では、divのclass名(やid名)で指定することになっていました。(idは一箇所しか存在しえませんが、文書は複数の記事(article)で構成されている場合もあるのでidではなくclass名を使うことが多い)
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［HTML4.01仕様書/7.5.3 ブロックレベル要素と行内要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )］より

お示しの場合、本文に当たる部分にあるメニューが本文記事の目次だある場合は
<header></header>
<section>
　<div class="tableContent">
　</div>
</section>
<footer></footer>
サイト全体のナビゲーションでしたら
<header></header>
<section>
</section>
<footer>
　<nav></nav>
</footer>
となるでしょう。

いずれもHTML4.01ないし、XHTML1.0などで作成するなら
[HTML4.01/XHTML1.0/XHTML1.1]←※これを使って以下説明します。
<div class="header"></div>
<div class="section">
　<div class="tableContent">
　</div>
</div>
<div class="footer"></div>
となるでしょう。

★HTMLはデザインは一切考えません。★
　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

そのうえで、スタイルシートを使って、ページのプレゼンテーションを行います。ここからは、※
div.header,div.section,div,footer{ /* この3つ */
　width:90%; /* ウィンドウ巾の90%; */
　min-width: 640px /* 最小は640pxi-padなど */
　max-width: 900px;/* 最大940px 幅広ディスプレイ */
　margin:0 auto; /* 上下の隙間は0,左右は自動で中央に配置 */
}
div.section{position:relative;}/*位置の基準とする*/
div.section div.tableContent{
　position:absolute;/* div.section内で位置を指定 */
　left:0;top:0;
　width:20%;
}
とか指定していきます。

まとめると
1) HTMLは、文書構造にしたがって作成します。
2) それをスタイルシートでデザインする。
3) 可能な限り、様々な端末に合わせられるようデザインする。
　と言う手順になります。HTMLさえ、きちんと出来ていれば、好きなようにデザインの変更が出来ます。ナビゲーションをページトップに置いたり、ページの左に置いたり、目次を横一列に並べたりをHTMLを変更せずにです。
　もちろん、巾を固定するのも、ウィンドウに合わせて伸縮させるのも、ユーザーに好きなデザインを選ばせることもね。

お礼

1) HTMLは、文書構造にしたがって作成します。
2) それをスタイルシートでデザインする。
3) 可能な限り、様々な端末に合わせられるようデザインする。

やはり、3番が重要ですね。
ただそれが一番難しいと思いますが・・・。

ちょっとがんばってみます。
情報ありがとうございます。

回答No.1

PXU10652

「現在では、どちらの考えで作成するほうがいいのでしょうか？」
　相手がどんな大きさで表示するかは分からないし、TOP、メニュー、フッターはある程度の高さや幅がないと意味がないので、絶対数でそれらを指定し、余りを本文に設定します。

例）タグとして認識されないように、わざと２バイト文字で書いています。
＜ＦＲＡＭＥＳＥＴ　ＲＯＷＳ＝”８０、＊、８０”＞
　＜ＦＲＡＭＥ　ＳＲＣ＝”ＴＯＰ”　ＮＡＭＥ＝”ＴＯＰ”　ＳＣＲＯＬＬＩＮＧ＝”ＮＯ”＞
　＜ＦＲＡＭＥＳＥＴ　ＣＯＬＳ＝”１００、＊”＞
　　＜ＦＲＡＭＥ　ＳＲＣ＝”メニュー”　ＮＡＭＥ＝”ＭＥＮＵ”　ＳＣＲＯＬＬＩＮＧ＝”ＮＯ”＞
　　＜ＦＲＡＭＥ　ＳＲＣ＝”本文”　ＮＡＭＥ＝”ＭＡＩＮ”＞
　＜／ＦＲＡＭＥＳＥＴ＞
　＜ＦＲＡＭＥ　ＳＲＣ＝”フッター”　ＮＡＭＥ＝”ＦＯＯＴＥＲ”　ＳＣＲＯＬＬＩＮＧ＝”ＮＯ”＞
＜／ＦＲＡＭＥＳＥＴ＞

お礼

>相手がどんな大きさで表示するかは分からないし、TOP、メニュー、フッターはある程度の高さや幅がないと意味がないので、絶対数でそれらを指定し、余りを本文に設定します

ある程度高さや幅がないと意味がないのですね。
確かにおっしゃられるとおりだと思います。

参考にさせて頂きます。