• ベストアンサー

CSS初心者です。

CSS初心者です。 宜しくお願いします。 CSSで既に組まれているものを編集したいのですが、Footer部分を一番画面の下にさげたいのですが。 CSSではどのように設定したらよいのでしょうか。。今Bodyの高さを長くなるよう設定したら、 Footer部分が中心にきてます。 すいません。教えてください。 ※DreamWeaverはCS4を使用していて、CSSの内容が全て英語表記なので、そちらで 教えていただけると助かります。

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

  • ベストアンサー
  • rukuku
  • ベストアンサー率42% (401/933)
回答No.1

こんばんは >Footer部分を一番画面の下にさげたいのです 質問の文章からは、詳細はよく分からないのですが、「多分こんな感じ?」というサンプルを提示します(このサイトに投稿する都合上、インデントを全角スペースにしています。テスト表示するときには半角スペースに置換してください。)。 なお、 >DreamWeaverはCS4を使用していて、CSSの内容が全て英語表記なので DreamWeaverに限らず、CSSは英語表記です。「慣れるしかない」と諦めてください。 HTMLのみ <html>  <head>  </head>  <body>   <table border="1">    <tr>    <td colspan="2">ヘッダー</td>    </tr>    <tr>     <td>メニュー</td>     <td>本文</td>    </tr>    <tr>    <td colspan="2">フッター</td>    </tr>   </table>  </body> </html> HTML+CSS <html>  <head>   <style type="text/css">    .header{     border:1px solid #000000;    }    .menu{     border:1px solid #FF0000;     float:left;    }    .main{     border:1px solid #00FF00;     float:left;   }    .footer{     border:1px solid #0000FF;     clear:all;    }   </style>  </head>  <body>   <div class="header">ヘッダー</div>   <div class="menu">メニュー</div>   <div class="main">メイン</div>   <div class="footer">フッター</div>  </body> </html>

akkun11
質問者

お礼

ご丁寧に有難うございます。

その他の回答 (1)

noname#119957
noname#119957
回答No.2

それは、footerより上部の部分に対して、footerの回り込み現象が働いているためです。 footerの左右に何も配置したくないなら、footter全体を囲む部分のCSSに、 clear-both; を追加すれば、回り込みを回避できます。 clear-bothは、floatさせた後に多く用います。

akkun11
質問者

お礼

ご丁寧に有難うございます。

関連するQ&A

  • CSS初心者です

    はじめまして、ホームページ初心者の者です。友人のパソコンを借りて、現在ホームページを作成しています。使用しているソフトはAdobe Dreamweaver CS 4です。ソフトは素晴らしく、すぐにCSSでHeader,Menu,MainContent,Footerを分けることができたのですが、肝心の TextFieldの部分がうまくいきません。(また、HTMLを観て見るとグチャグチャになってて、、、汗 Divとか使用して綺麗にしろといわれたのですが、意味不明です、、、)また出来れば、このテキストフィールドはDreamweaver無しでも簡易的に更新ができるように仕上げたいのですが、皆様ならこいうレイアウトのホームページをCSSで作成する場合、どいう風にされるか是非教えてください。 Header 900x125 Menu 900x30 mainContent 900x420 Footer 900x25 TextField 550x350 http://upload.fam.cx/cgi-bin/img-box/3um90708103139.gif *ちなみにheaderとMainContentは作成した画像をBGで付けている為(リピート無し)、サイズは固定にしています。現在、TextField以外はすべてうまくいったのですが、TextFieldだけどうやって作ればよいのか悩みます(汗  どうか、お力をお貸しください。 どうぞ、宜しくお願いいたします。

    • ベストアンサー
    • HTML
  • cssに関する質問です。

    cssに関する質問です。 フッターをbodyタグの直後に置きたいのです。 そうするとフッターはbodyタグの直後に表示されてしまいます。 cssでフッターだけをホームページの最後に表示する方法はありますか。 <body> <div id="footer">フッター ホームページの一番下に表示したい。</div> <div id="content>ホームページの内容 フッターよりも上に表示したい。</div> </body> CSSハックのような方法でも構いませんが、実現方法があれば教えてください。 よろしくお願いします。

  • DreamweaverCS4のcssルール定義について

    以前は古いバージョンのDreamweaverを使用していましたが、最近CS4を購入しました。 cssルール定義で、カテゴリは日本語なのですが、タイプがすべて英語になっています。CS3までは全て日本語で書かれていましたが何故英語にしたのでしょうか?cssやタグを理解できるようになるかもしれませんが、これだと、素人の方には不親切な気がします。 設定で、日本語には出来ないのでしょうか。

  • Dreamweaver CS3で、一部のCSSが適応されません

    divの大枠の#contentの中に、小枠の、上の帯に#header、左に#menu、右に#main、下の帯に#footerを作りました。 ごくごく一般的なCSSスタイルで、難しい事はしてないと思います。 Windowsですが、Dreamweaver CS3で作成画面での表示は大丈夫なのに、 なぜかInternet Explorer6.0で、 この、「右に#main、下の帯に#footer」の、CSSスタイルが適応されません。 FireFoxでの表示は、大丈夫です。 IEのみの様です。 原因が全く解らず困っております。 こういったバグは報告されてますでしょうか? ・Internet Explorer 6.0のバグでしょうか? ・Dreamweaver CS3のバグでしょうか? ・もしかして、XHTML 1.0 Transitionalとか、HTML 4.01 Transitionalが関係しているのでしょうか? ・CSSは1枚の外部CSSファイルからリンクしてますが、あまりファイル1枚に長すぎるとダメなのでしょうか? ・テンプレートは使ってるページや、使ってないページも同じ現象があるのですが、  テンプレートを使ってるページの方が、バグが多い様な気もします。  例えば、テンプレートと、CSSの相性の問題もあるのでしょうか? ・それとも、私のCSSの組み方か何かに問題があるのでしょうか? 数日作業が止まっており、困っております。 どうぞ宜しくお願い致します。

  • dreamweaverでテンプレートを作りたいのですが、

    dreamweaverでテンプレートを作りたいのですが、 サイト内はヘッダ(ナビバー)とフッタのみ統一で背景画像やコンテンツのレイアウトも各ページまちまちにするように言われました。。 背景画像はcssでbodyに指定していますが、bodyの中のコンテンツ部分を選択して編集可能領域にすると、コンテンツ以外のbodyの背景も編集できない部分になり、ページ共通になってしまいます。 bodyの背景とコンテンツを編集可能領域にしたいのですが、どうしたらいいかわかりません。 それとも、テンプレートは使わず、ヘッダを更新する場合、置き換え機能でも、サイト内のすべてのページに反映させることが出来るのでしょうか ??? 初心者ですみませんが、どなたかお願いします。

    • ベストアンサー
    • HTML
  • CSSのブラウザでの確認について

     DreamweaverのCS5.5でhtml、cssを編集し、Firefoxで確認しているのですが、画面上、firebugで確認するとhtmlは編集したものを反映してくれますが、cssに関しては編集したものを反映することなく編集する前の、古いものしか反映してくれません。IE、クロームでは最新のものを反映してくれるのでおそらく原因はfirefoxにあると思うのですが。原因の分かる方がいれば回答をお願いします。バージョンは firefox:3.6.28 firebug:1.7.3です。

    • ベストアンサー
    • CSS
  • DreamweaverのCSSで

    Dreamweaverを利用して、サイトを作っております。現在大きなサイトの一部分を任せられており、すでにできあがっているテンプレートにデータの流し込み作業をしています。 このサイト全体がバリバリにCSSで設計されていて、未だにテーブルレイアウトをしている私には分からないことが山盛り。とりあえず預かってきたファイルを開いてみたところ、デザイン画面が真っ黒なのです。所々見えるところもあるのですが、CSSで「画像+文字」ではき出す設定になっている部分が真っ黒になってしまっているのです。 DreamweaverでCSSを扱う際、なにか特別な環境設定が必要なのでしょうか?おそらくじっくりと調べれば、何らかの解決方法があるのでしょうが、締切が迫っている仕事なため、とても焦っております。 当方、MacでDreamweaverはSTUDO MXを使っています。 是非アドバイスをお願いします。

  • <body>から始まるhtml編集にcssを適用する

    html初心者です。 ASPを利用しネットショップを作成しています。 トップページの上段部分を作成しているのですが、 ページを編集する画面上下に、<body></body>が既に書き込まれており、その中のフォームにhtmlを記述するようになっています。 <body></body>内にスタイルシートを適用することは できるのでしょうか? 画面上には<head>内の編集はできないと書いてあります。 調べてもcssの適用の方法は<head>内に記述する、リンクを貼るという方法しか見つけられません。 初心者で変わった変な質問で申し訳ありませんがどうぞよろしくお願いします。

  • フッターのCSSに関して

    フッターのCSSの処理でわからず困っています。 やりたいことは以下の通りです。 1.ブラウザが十分に大きい場合は一番下にフッターを置く。 2.もしブラウザの大きさが取れない場合はフッターの上の部分の終了後にフッターを置きたい。 フッターはposition: absolute;で指定してあるのでブラウザが十分に大きい場合は問題ないのですが、ブラウザを小さくして最表示した場合にフッター部分がメインの部分のところに被ってしまいます。 出来ればメインコンテンツの下部がフッターの上部より下にある場合はメインコンテンツの下にフッターがくる用に修正したいです。

    • ベストアンサー
    • CSS
  • dreamweaver cs4 で<li>タグのcssについて

    dreamweaver cs4 で<li>タグのcssの設定を以下のようにしました。 自分は下の図のように単語と単語の間を空けたいのですが、どうもうまくいきません。 設定方法ご存じの方、いらっしゃいましたら教えていただけたら嬉しいです。

専門家に質問してみよう