• ベストアンサー

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

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

この投稿のマルチメディアは削除されているためご覧いただけません。
noname#243511
noname#243511
  • CSS
  • 回答数2
  • ありがとう数2

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

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答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では、そのまま&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>

noname#243511
質問者

お礼

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

その他の回答 (1)

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

　肝心な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>

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • dreamweaver cs3 でのホームページ作成について

    　お世話になります。 以前HPBで全てテーブルレイアウトで添付画像のようなHPを作成致しました。 サイトのページ数が約15枚ほどで、画像の「1,ヘッダー」 「3,左メニュー」「4,フッター」は全てIフレームにして別のHTMLを表示させるようにしています。 「1,ヘッダー」「3,左メニュー」「4,フッター」は全てのページで共通 で表示され「3,コンテンツ」のみ内容が切り替わるようにしています。 　この度ページを更新しようと思ったのですが、段々と左メニューやコンテンツ、フッター等内容が多くなってきてしまい、なおかつテーブルの入れ子に次ぐ入れ子という感じでレイアウトしていたために、どれがどのテーブルかわからず、レイアウトを調整しようと色々といじっていたらレイアウトがぐちゃぐちゃになってしまいました。 そこでこの際勉強も兼ねて一からサイトを作り変えようと思っております。ソフトはdreamweaver cs3でやってみようかと思っています。 cssを使って何とか添付画像のようなレイアウトは作れたのですが、 ヘッダー内や左メニュー内にも細かな段組みレイアウトが作れません。 通常細かな段組み（ヘッダー部分のメニューや左メニューのレイアウト）についてはやはりテーブルでのレイアウトが正しいのでしょうか？ まだdreamweaver cs3も使い始めて間もないもので細かなレイアウトの方法などが理解できていません。今後のサイト更新のためにも分かりやすい形で作りたいのですが・・・。 どなたかレイアウトについての参考URLや方法などご存知の方がいらっしゃいましたらご教授下さいませ。 よろしくお願い申し上げます。

  • フッターの位置を一番下に表示させたいのですが・・・

    表示方法について質問をさせてください。 現在、サイトを作っているのですがフッターの表示が上手くいかず悩んでいます。要はフッター部分（ページ最下部）の表示項目を、必ずページの一番下に表示させたいのです・・・。 しかし、今の設定ではコンテンツ量の多い少ないで表示される場所が変わってしまいます。 コンテンツが結構あるページでは、当然一番下に表示されるのでOKなのですが、例えば、空っぽのページでヘッダーとフッターしかない状態だと、ヘッダーのすぐ下にフッターが表示されてしまい、その下に無駄な空間が存在してしまいます。 そうでは無く、コンテンツの量に左右されず、必ずブラウザの画面一番下にフッター部分が表示されるようにしたいのですが、色々と試してみるのですが、出来ませんでした・・・。 サイズなどを指定してしまうと、コンテンツの内容に影響されまた結果が変わってしまいますし、ブラウザによってはバグ的な表示になってしまうので、これはNGでした。 これらを実現するためには、何か特殊な設定をHTML側、またはCSS側で定義しなければならないのでしょうか？ ご存知の方いらっしゃいましたら、是非、アドバイスの程よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • FirefoxだとCSSで作ったフッターが崩れてしまいます

    お世話になります。現在、CSSにて2段組にて ヘッダー・メニュー・コンテンツ・フッター部分にレイアウトを 切り分けてサイトを作っておりますが IEだと私が意図した通りに表示されるのですが、FireFoxだと フッター部分のレイアウトが、コンテンツ部分にかぶってしまい レイアウトがぐちゃぐちゃになってしまいます。 #cover { width: 700px; height: 100% } #menu { width: 150px; height: 100%; float: left } #main { width: 550px; height: 100%; float: right } #footer { width: 700px; clear: both } こちらが、htmlです。 <div id="cover"> <div id="main">コンテンツ</div> <div id="menu">メニュー</div> <csobj csref="a.html" h="259" occur="27" t="Component" w="700"> <div id="footer">フッター</csobj></div> </div> ※このcsobjは、Goliveのコンポーネント機能を使って １つの外部ファイルからリンクさせることによって、 ヘッダー部分に変更が生じたら、全ページを一括で更新できる 機能を使っています。SSI(サーバーサイドインクルード)みたい なやつでしょうか。 とても困っていますので、詳しい方ぜひご教授ください。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • htmlでヘッダやフッタを共通化したい

    ヘッダ、サイドバー、コンテンツ、フッタというレイアウトで 100ページぐらいあるWebサイトを構築する場合、 ヘッダやフッタに変化がないのであれば、共通化したくなります。 （変更があった時に、1箇所変更すればいい、という風にしたいため） そこで、例えば、PHPが使えるところであれば、includeすればいいのですが、 使えない場合、JavaScriptを使えば可能ではあると思います。 しかし、JavaScriptはOffにされた時のことを考えると このやり方はリスクがあるような気がします。 そこで、知りたいのですが、htmlを共通化したい場合、 PHPなどを使う以外に、どんなやり方があるのでしょうか？ できれば、サーバサイドに仕込む方法ではないやり方でお願いします。

    • ベストアンサー
    • HTML
  • 詳しいかた、教えてください

    この画像と全く同じものを作りたいのですが、ｃｓｓがうまく出来ません。 ヘッダー、ナビゲーションメニュー、コンテンツのH1の下の余白の設定、 フッターがうまくいきません。 特にナビゲーションメニューのボタンが中央に寄らない、フッターの背景や配置の設定、 どのようなｃｓｓにしたらいいでしょうか!?

    • 締切済み
    • CSS
  • フッターのボーダーが消えてしまいます（cssとhtmlで2カラムのレイアウト）

    cssとhtmlで2カラムのレイアウトのウェブページを作っています。 左のカラムがナヴィゲーションメニューになっています。 フッターにborderを設定しているのですが、borderの上のラインが消えてしまうことがあります。 htmlはこんな感じです。 <div id="contents"> </div> <div id="side"><!--左メニューここから--> <ul id="menu"> <li>・・・</li> <li>・・・</li> <li>・・・</li> </ul> </div><!--左メニューここまで--> <div id= "footer" ><!--フッターここから--> Copyright・・・ </div><!--フッターここまで--> 実験してみたところ、左メニューの</li>の後に文字なり画像なりを加えるとボーダーは正常に現れ、 </li>で終わってしまうと、ボーダーが消えてしまうようです。 フッターに背景色をつけてみたところ、本来のフッターの領域からはみだして背景色がついていました。 やはり、</li>の後になんらかの文字を入れると、適正な位置に背景色がつくのです。 なぜでしょうか。

    • ベストアンサー
    • CSS
  • ヘッダとフッタが固定でコンテンツのみスクロール可能

    いつもお世話になります。 ヘッダ部とフッタ部は固定で、コンテンツ部のみで表示エリアを超えた場合スクロールバーを 表示する、というHTMLを実現するにはどうすればよいでしょうか。 （ウィンドウサイズに応じてコンテンツ部は変動するが、ヘッダとフッタは常に固定） イメージとしては以下の構成になります。いろいろ調べてみたのですが、ヘッダとフッタは固定 できてもスクロールバーがウィンドウ全体に表示されてしまうものばかりでした。 -------------------------------- ヘッダ（固定） （スクロールバーなし） -------------------------------- コンテンツ （スクロールバーあり） -------------------------------- フッタ（固定） （スクロールバーなし） -------------------------------- フレームは使用せず、CSSのみで実現する方法を教えて頂けませんでしょうか。 IE7、IE8で動作させたいと思っています。 宜しくお願いします。

    • 締切済み
    • CSS
  • 楽天市場のデザインのコーディングについて

    今度、楽天市場に出展するのですがコーディングについて教えて下さい。 まずfireworksでデザインした物をDreamweaverでコーディングした後、楽天の説明文にソースをコピー＆ペーストをしたのですが・・・うまくいきません。 具体的にはヘッダー→コンテンツ（左にサイドメニュー・右にコンテンツ）→フッターというデザインでどのページに行ってもヘッダー・サイドメニュー・フッターは共通で表示される様にしたいのですが、商品の詳細画面になるとメニューの下に商品情報が出てきてしまいます。 何か良い方法があれば教えていただけますでしょうか？ 宜しくお願いいたします。

  • ヘッダー・フッター固定HTMLに関して

    ヘッダー・フッター固定HTMLに関して ヘッダー・フッター固定で（間）中段にFlashコンテンツを横100%縦100%で表示するHTMLを作成しようと思っております。 そこで、下記のHTMLソース、及びCSSで指定しているのですが、上手くいきません。 ヘッダー・フッター固定はできますが、Flashを表示しようとすると思うようにいきません。 「body > #wrapper」を「height:auto;」にすると、Flash部分の高さが小さく、 「body > #wrapper」を「height:100%;」にすると、フッター部分が消えてしまします。 【HTML】 ～～～～～～～～ <div id="head">～ヘッダー～</div> <div id="flashcontents">～Flashデータ～</div> <div id="foot">～フッター～</div> ～～～～～～～～ 【CSS】 ～～～～～～～～ html,body {margin:0;　padding:0;　overflow:hidden;} #head{～サイズなどを指定～} #flashcontents{margin: 0;　height: 100%;　width: 100%;} body > #flashcontents {height:100％;　position: absolute;} #contents {　position: fixed;　overflow:hidden;　bottom:0;　他サイズなど指定…} ～～～～～～～～ 以上、分かりにくい説明かと思いますが、もしお分かりになれば教えて頂けますでしょうか？ よろしくお願い致します。

    • 締切済み
    • CSS
  • ヘッダ・フッタの定義

    ブラウザでヘッダ・フッタを印刷するように指定できますが、これを、HTML（Javascript・cssなど）で指定することは可能でしょうか？ やりたいことは、あるHTMLを印刷したときに、ブラウザの設定がどうなっていても、フッタ（URL）を表示させたくありません。 よろしくお願いします。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する