プロが教えるわが家の防犯対策術！

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

解決済

  • 質問者：4312oka
  • 質問日時：
  • 回答数：2件

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

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

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

「フッターがウインドウの一番下にいきません」の質問画像
通報する

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

質問の本文を隠す

A 回答 (2件)

No.1ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

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


　そのようなウェブページの作り方は、絶対に避けましょう。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では、そのまま&lt;header&gt;,&lt;section&gt;,&lt;nav&gt;,&lt;aside&gt;,&lt;footer&gt;になります。もちろん、その用途も合わせてあります。</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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2014/07/02 17:38

No.2

  • 回答者： ORUKA1951
  • 回答日時：

　肝心なCSSの部分です。


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

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


<style type="text/css" media="screen">
<!--
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6,p{margin:0;line-height:1.6em;}
p{text-indent:1em;}
div.header,div.section{
width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;
}
div.section{position:relative;padding-bottom:150px;}
div.section h2,div.section p,div.section div.section{
margin:0 215px 0 195px;
}
div.section div p{margin:0;}
div.section div.section{
min-width:0;width:auto;padding-bottom:5px;min-height:150px;
}
div.section div.nav,div.section div.aside{
position:absolute;top:0;height:auto;margin:0 0 100px 0;
}
div.section div.nav{width:190px;left:0;}
div.section div.aside{width:210px;right:0;}
div.footer{position:fixed;bottom:0;width:100%;}
div.footer h2,div.footer dl{
width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;
}

/* おまけ 色づけ */
body{background-color:gray;}
div.header{background-color:rgb(255,160,160);}
div.section{background-color:silver;}
div.section div.nav{background-color:aqua;}
div.section div.aside{background-color:rgb(160,255,160);}
div.section div.section{background-color:rgb(200,255,160);}
div.footer h2,div.footer dl{background-color:orange;}
-->
</style>
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

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

ページトップページトップ

Q質問する（無料）

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

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

おすすめ情報