HTML.CSS 100%表示にする方法

Question

DWCCを使っています。どのパソコンから見ても、ヘッダー領域（会社のロゴやお問い合わせのバナーが入ります）、ナビ領域、メイン画像、フッター領域がそれぞれ100%表示になるようにHTMLおよびCSSで設定がしたいと思っています。
これまでwrapper860pxといったようにきっちりと決めてコーディングすることしかしていないため、何からどうしたら良いのか全くわかりません。また、それをコーディングする際にトップの画像の大きさは、どうなるのでしょうか？大きいサイズの画像を1枚使い回す形なのでしょうか？
恐れ入りますが、ほぼほぼ初心者なので、なるべく簡単な方法をわかりやすく教えていただけますと幸いです。

ORUKA1951 · Accepted Answer

Dreamweaverをお使いだと思いますが、そのようなWebオーサリングツール( https://ja.wikipedia.org/wiki/Web%E3%82%AA%E3%83%BC%E3%82%B5%E3%83%AA%E3%83%B3%E3%82%B0%E3%83%84%E3%83%BC%E3%83%AB )を使うには、HTMLやCSSに関する基礎的な知識がないと使えません。少なくともテキストエディタで作り上げられる程度の知識は必要です。HTMLやCSSの知識がなくてもウェブページができると誤解されている人がいますが、残念ながら逆です。ツールはあくまで「補助ツール」ですから。　説明が必要なので少し長いですが今後のためにもしっかり読んでおいてください。＞ヘッダー領域（会社のロゴやお問い合わせのバナーが入ります）、ナビ領域、メイン画像、フッター領域　まず、根本的に思い違いされている部分です。　オーサリングツールを、あたかもワープロやDTP( https://ja.wikipedia.org/wiki/DTP )のひとつだと誤解されてきた。初学者が決して踏み込んではならない脇道を進んでこられたのだと思います。　HTMLは、文書構造だけをタグを使ってマークアップする言語であってデザインとは無縁なものです。デザインはスタイルシートで行います。 ★構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 ) HTML 『ヘッダー(ロゴや問合せバナー、グローバルなナビゲーションを含む）、セクション(本文)、フッター』を含む文書をスタイルシート『すべて、画面幅一杯に表示したい』と言うことです。 wrapperなんて使ってはなりません。　16年前(1999年)に勧告されたHTML4.01では、デザインのためにタグが使われてきた反省から・・『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加する( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』となりました。　HTML5では、それすら守られなかったために、文書構造を示す要素が用意されて、原則DIVは使えなくなりました。【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから NOTE: Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors. ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで [4.4 Grouping content — HTML5]( http://www.w3.org/TR/html5/grouping-content.html#the-div-element )より訳) 著者には、他により適切な要素がないときの最後の要素としてdiv要素を使うことが強く推奨される。div要素のかわりに、より適切な要素を使用することは読者にはより良いアクセシビリティを作者には簡単な保守性に繋がる。　通常はがheader,section,footerを含みますので不要ですが、内部にheader,section,footerを含む一連の記事が複数あるときはarticleを使うべきです。 HTML5の例　

　 HTML4.01でしたら、header,section,footerなどは

となる。複数存在しうるのでclassでしょうね。 HTML5の例ですが、こんな簡単な物になります。HTML4.01の場合は

など ★タブは＿に置換してあるので戻す。文字コードはUTF-8です。 ★最初にデザインは一切考えずに文書構造だけをマークアップする。 ★文書構造を見てスタイルシートを書く。　例) header nav{text-align:center;} 　　　header内のnavは、テキストは中央ぞろえ　　残念ながら、DWに限らず、これはツールには不可能　　--ツールには文章を読んで理解する能力はなので-- ★幅は分かりやすくするために最大幅max-width:800px;にしてありますので、この行を消すとディスプレイ幅に関わらず全幅になります。　なお、このデザインは印刷には適用されません。＿＿サンプル＿＿＿

＿＿

＿＿＿＿

問い合わせ

＿

＿＿

A smaller heading

＿＿

＿＿＿DWを使う場合も、ひたすら文書構造だけをマークアップし、必要ならclassで文書構造を補完しておく。＿＿

＿＿

＿＿＿その後、スタイルシートでデザインをしていきますが、DWに限らずツールには文書構造からセレクタを記述する能力はありませんので、ここだけは自分で。＿＿

＿＿＿

＿

HTML.CSS 100%表示にする方法

Dreamweaverをお使いだと思いますが、そのようなWebオーサリングツール(

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング