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

解決済

質問者：4312oka
質問日時：2014/07/02 10:54
回答数：2件

Dreamweaver CC2014を使ってWebサイトを作っています。

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

どのようにHTMLとCSSの設定をすれば、この画像のようにレイアウトできるのでしょうか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： ORUKA1951
回答日時：2014/07/02 16:50

＞レイアウトを決めるために画像を作り、これを基に、

そのようなウェブページの作り方は、絶対に避けましょう。HTMLはDTP（Desktop publishing--卓上出版( http://ja.wikipedia.org/wiki/DTP )とはまったく逆の発想による仕組みです。
HTMLの略歴( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )の後半
構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
スタイルシートの概説( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
は必ず読んで理解して置いてください。
　Dreamweaverは、優秀なWebオーサリングツールですが、HTML/スタイルシートのこれらを知らないと、しばしばそのような作り方をしてしまいます。

1)まず、率直にHTMLを用いて、ひたすら文書構造をマークアップします。HTMLが正しい事を確認して
2)スタイルシートでプレゼンテーションを指定していきます。

[HTML4.01strict]
← HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
★タブは＿に置換してあるので戻す。

<!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>

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2014/07/02 17:38

No.2

回答者： ORUKA1951
回答日時：2014/07/02 18:10

　肝心なCSSの部分です。

こんな簡単なものですむのです。

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

<style type="text/css" media="screen">

</style>