ベストアンサー

フッターがウインドウの一番下にいきません。

2014/07/02 10:54

Dreamweaver CC2014を使ってWebサイトを作っています。レイアウトを決めるために画像を作り、これを基に、フッターを常にウインドウの一番下にきてほしいのですが、ヘッダーの下にきてコンテンツの上に浮いてしまったり、もしくはサイドメニューの下に沿って表示してしまったりと、どうしても思うようにレイアウトできません。どのようにHTMLとCSSの設定をすれば、この画像のようにレイアウトできるのでしょうか？

この投稿のマルチメディアは削除されているためご覧いただけません。

noname#243511

CSS
回答数2
ありがとう数2

みんなの回答 （2）
専門家の回答

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

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/07/02 16:50 回答No.1

＞レイアウトを決めるために画像を作り、これを基に、　そのようなウェブページの作り方は、絶対に避けましょう。HTMLはDTP（Desktop publishing--卓上出版( http://ja.wikipedia.org/wiki/DTP )とはまったく逆の発想による仕組みです。 HTMLの略歴( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )の後半構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 ) スタイルシートの概説( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 ) は必ず読んで理解して置いてください。　Dreamweaverは、優秀なWebオーサリングツールですが、HTML/スタイルシートのこれらを知らないと、しばしばそのような作り方をしてしまいます。 1)まず、率直にHTMLを用いて、ひたすら文書構造をマークアップします。HTMLが正しい事を確認して 2)スタイルシートでプレゼンテーションを指定していきます。 [HTML4.01strict] ← HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 ) ★タブは＿に置換してあるので戻す。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css">  ＿</style> </head> <body> ＿<div class="header" id="Top"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>本文はsection</p> ＿＿<div class="section" id="A1"> ＿＿＿<h3>項見出し</h3> ＿＿＿<p>本文項記事</p> ＿＿＿<p>sectionの階層でレベルが判断される。</p> ＿＿</div> ＿＿<div class="section" id="A2"> ＿＿＿<h3>項見出し</h3> ＿＿＿<p>本文項記事</p> ＿＿＿<p>class名のheader,section,nav,aside,footerはHTML5では、そのまま<header>,<section>,<nav>,<aside>,<footer>になります。もちろん、その用途も合わせてあります。</p> ＿＿</div> ＿＿<div class="section" id="A3"> ＿＿＿<h3>項見出し</h3> ＿＿＿<p>本文項記事</p> ＿＿＿<p>HTMLでは文書構造だけをマークアップしているため、後日のメンテナンスがとても楽になります。スタイルシートの技術も楽になります。さすがにDreamweaverでは無理ですが・・</p> ＿＿</div> ＿＿<div class="nav"> ＿＿＿<h3>目次</h3> ＿＿＿<ol> ＿＿＿＿<li><a href="#A1">A</a></li> ＿＿＿＿<li><a href="#A2">B</a></li> ＿＿＿＿<li><a href="#A3">C</a></li> ＿＿＿</ol> ＿＿</div> ＿＿<div class="aside"> ＿＿＿<h3>補足記事</h3> ＿＿＿<p> ＿＿＿＿本文と直接関係ない記事＿＿＿</p> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2014-06-03</dd> ＿＿</dl> ＿</div> </body> </html>

質問者

お礼 2014/07/02 17:38

丁寧に教えていただきありがとうございました。webサイト制作をはじめたばかりで右も左も分からない状態ですが、これからも制作を続けてたくさん学んでいきたいと思います。

その他の回答 (1)

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/07/02 18:10 回答No.2

肝心なCSSの部分です。　こんな簡単なものですむのです。 ★いくつか、示された画像と変更しています。・幅はリキッドにしてあります。スマホも超幅広ディスプレイにも対応しています。　ただし、フィーチャホン(ガラケー)、印刷用は用意していません。・sidemenueとされている部分は、navやasideに変えてあります。　将来デザインを変更したり、フィーチャーホン用のスタイルではsideにしないので・nav(contentTable)やasideの高さは、本文に合わせてあります。　これを、示された図の右側のようにfloatで回り込ませることも出来ますが　そうすると、本来主ではないaside的な記事を先に書くと言うまずいことになる。 ★DWでは、このようなスタイルシートのセレクタは、決して書いてはくれません。そのため、ひとつひとつにidを振るなど、HTMLもスタイルシートも訳が分からなくなります。　セレクタは、どんな優秀なオーサリングツールを使っても、著者が自分で書かなければなりません。　もちろん、HTMLにどのようなclass名、あるいは要素が適しているかもツールは教えてくれません。 <style type="text/css" media="screen">  </style>