- ベストアンサー
ヘッダーとフッターを横100％にする方法
ヘッダーとフッターを横100％にする方法 添付の画像のように段組したページを制作したいと考えています。 AとDは窓の大きさを変えたり、お気に入りを閉じてようが開いてようが、 関係なく横100％になるように(背景が表示されるよう)表示させたいと思っています。 B・Cに関しては、横800pxで表示したいのですが、外部CSSで設定するいい方法を教えてください。 参考URLとしては、http://www.chem.keio.ac.jp/な感じでしょうか。 よろしくお願い致します。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
- yyr446
- ベストアンサー率65% (870/1330)
これくらいなら、あたちでもできるわよ <style type="text/css"> body{text-align:center; } #wrap{width:100%; text-align:left; margin:0 auto;} #inner{margin:0 10px;} #right{width:200px;float:left;} #left{width:600px;float:right;} .clear{clear:both;} .clear hr{display:none;} </style> <body> <div id="wrap"> <div class="header">A</div> <div id="inner"> <div id="right">B</div> <div id="left">C</div> <div class="clear"><hr /></div> </div> <div id="footer">D</div> </div> </body>
お礼
回答ありがとうございます。 外部CSS希望だったのでゴメンナサイ。
関連するQ&A
- ヘッダ/フッタのフォント変更方法
ヘッダ/フッタのフォント変更方法 SeaMonkey 2.0.4 と Firefox 3.6.3 を使っています。 印刷時のヘッダとフッタに表示される項目（タイトルやURLなど）のフォントを変更するには、どのように設定すればよいのでしょうか？ userContent.cssに記述するのかと思い、あちこち検索してみましたが、どこにも解が見当たりませんでした。 よろしくお願いします。
- ベストアンサー
- ブラウザ
- ヘッダ・フッタの定義
ブラウザでヘッダ・フッタを印刷するように指定できますが、これを、HTML（Javascript・cssなど）で指定することは可能でしょうか？ やりたいことは、あるHTMLを印刷したときに、ブラウザの設定がどうなっていても、フッタ（URL）を表示させたくありません。 よろしくお願いします。
- ベストアンサー
- HTML
- css外部ファイル（ヘッダ、フッタ）の書き方
素人です。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> でhtmlを（テキストエディタを使って）書いています。 ヘッダとフッタをcssで書きたいので参考サイト等を探していますが、 htmlに埋め込む方法ばかりで、外部ファイルの書き方が見つかりません。 例えば、 －－－－－－－－－－ <style> * { margin: 0; padding: 0; } #header { position: ●●●● left: 0; top: 0; background-color:●●●● color: ●●●● width: 100%; height: 30px; z-index: 3; －－－－－－－－－－ のようなソースは見つけることが出来るのですが、これを外部ファイルに書き出す方法が分かりません。 ヘッダ内にて <link rel="stylesheet" href="ファイル名.css" type="text/css" /> を宣言し、外部に読み込みファイルを作成する方法で、ヘッダとフッタは作れないのでしょうか？ 探し方が悪いのかもしれませんが、どうしても見つけることが出来ません。 書き方の参考サイトや、ソースの書き方を教えて下さい。 よろしくお願い致します。
- ベストアンサー
- HTML
- ヘッダーとフッターを画面いっぱいにする方法について
添付画像のようにヘッダー部とフッター部だけを画面いっぱいにしたいと思っています。 HTMLはおおよそ以下のような構成になっています。 CSSでは <div id="container">に対して以下のように記述しています。 --------------------------------------- #container{ width:1000px; margin: 0,auto; } --------------------------------------- HTML内のheaderやfooterを<div>で囲むwrapを作り、それらにwidth: 100%;とCSSに記述してやればうまくいくような事を聞きましたがうまくいきませんでした。 それほど複雑な構成ではないシンプルなタグ構造だと思います。 ヘッダーとフッターの幅を添付画像のように画面いっぱいに広げるにはHTML, CSSにどのような記述をすればいいのでしょうか？ ご存知の方いらっしゃいましたら宜しくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>サンプル<title> </head> <body> <div id=container> <header> ヘッダー </header> <nav> </nav> <main> </main> <footer> フッター <footer> </div> </body> </html>
- 締切済み
- HTML
- 消してしまったヘッダーとフッターの復活方法を教えてください
ウェブを印刷すると、下のほうに、そのＵＲＬも一緒に印刷されますよね。 それを印刷されないようにしたくて、 「ファイル」→「ページ設定」で「ヘッダー、フッター」を消してしまいました。 消してもこのときだけで、以降はまた自動的にＵＲＬが入っていると思ったのですが、「ヘッダー、フッター」のところはずっと空欄のままです。 なくても良いといえばそうなのですが、どのようにすればまた表示されるでしょうか。 よろしくお願いいたします。
- 締切済み
- その他（インターネット・Webサービス）
- ヘッダー・フッター固定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
- TeXのヘッダとフッタについて
TeXのヘッダとフッタについての質問です。 ヘッダには偶数ページは右詰めで、奇数ページは左詰めで同じ文字列を表示して、フッタにはページ数を表示したいのですが、いろいろ検索して調べてみたのですが方法が分かりませんでした。 どなたかご教授願えませんでしょうか？ 宜しくお願い致します。
- ベストアンサー
- その他（プログラミング・開発）
- ヘッダとフッタが固定でコンテンツのみスクロール可能
いつもお世話になります。 ヘッダ部とフッタ部は固定で、コンテンツ部のみで表示エリアを超えた場合スクロールバーを 表示する、というHTMLを実現するにはどうすればよいでしょうか。 （ウィンドウサイズに応じてコンテンツ部は変動するが、ヘッダとフッタは常に固定） イメージとしては以下の構成になります。いろいろ調べてみたのですが、ヘッダとフッタは固定 できてもスクロールバーがウィンドウ全体に表示されてしまうものばかりでした。 -------------------------------- ヘッダ（固定） （スクロールバーなし） -------------------------------- コンテンツ （スクロールバーあり） -------------------------------- フッタ（固定） （スクロールバーなし） -------------------------------- フレームは使用せず、CSSのみで実現する方法を教えて頂けませんでしょうか。 IE7、IE8で動作させたいと思っています。 宜しくお願いします。
- 締切済み
- CSS
- cssでのヘッダー＋2カラム+フッターのレイアウトについて
こんにちは。趣味のサイトをタグ打ち＋cssで作ってるのですが どうしても上手く行かない箇所があり、ご教授頂ければ、と思い、 投稿します。 私の使用しているOSはmacOS9.2、ブラウザはバグの多いIE5.0（苦笑） です。 レイアウトとしては最近よく見かける、ヘッダー＋2カラム＋フッター のような構図にしたいのですが、この様に崩れてしまいます。 http://meikyu.pop.cx/faq/test.gif ↑この、下の方の背景がヘッダの分だけ（？）白くなってるのを なんとかしたいのですが… （横のボーダーも途中で切れてしまってますし…） 記述した、htmlファイルと、cssファイルも上げてみました↓ htmlファイル http://meikyu.pop.cx/faq/ cssファイル http://meikyu.pop.cx/faq/main.css あちこちのcssリファレンスのサイト様等を参考に、2時間近く奮闘 しましたが、解決方法が分かりません。 解決方法でなくても、うちの環境では正常に見えるよ、 という報告だけでも頂けると嬉しいです。 どうかご助言よろしくお願い致します。
- ベストアンサー
- ネットトラブル
お礼
回答ありがとうございます。 無事表示する事ができました。 ありがとうございました。