- ベストアンサー
CSSで(3)段組のページを作りたいのですが
- みんなの回答 (1)
- 専門家の回答
質問者が選んだベストアンサー
こういうことでしょうか。(参考URL) 基本ソース。 <div id="header">header</div> <div id="contents">contents</div> <div id="footer">footer</div> *{margin:0px;padding:0px;} html,body {height:100%;min-height:100%;} #header{height:10%;background-color:blue;} #contents{height:80%;background-color:#ccc} #footer {height:10%;background-color:blue;} 親要素(html.body)にheight指定をするのがポイントです。
関連するQ&A
- CSSでのページ構築について
CSSでのページ構築について CSSでのサイト制作に挑戦しています。 まずは、テンプレートをつかってカスタマイズしてみようとおもい、テンプレートをDLしました。 「フッタ/左メニュー/メインコンテンツ/フッタ」というブログなどでよくあるものです。 (縦三段で、真ん中が左右2つに別れている2カラム) CSSファイルは、外部読み込み形式です。 トップページを作って、いざメニューからメインページのリンクを貼ろうと思ってつまずきました。 左ページのコンテンツメニューに設定したリンクを、右側の枠内に表示したいのですが、そういった場合は、どうすれよいでしょうか。普通に右側の内容をいれたHTMLにリンクすると、全画面がそのページになってしまって、ヘッダ/左メニュー/フッタは消えて(隠れて)しまいます。 ヘッダや左メニューをそのままにしてページ数を増やしたいときは、トップページをひたすらコピーして、右側の要素部分だけを変更していくのでしょうか? でも、それだとCSSにする意味がないというか、全然楽ではないですよね。 左メニューの項目が増えた時など、全ページを修正しなければならなくなりますし。 自分なりにCSS関連のサイトを検索して調べてみたのですが、どこも「トップページをそのままコピーしているようにしかみえない」のです。 右側ページ内容のHTMLに、ヘッダやメニューも読み込ませるような設定が必要なのでしょうか? ソフトはDW CS4を使っています。 どなたか、CSSの達人さま、教えてくださいませ。 お願い致します。
- 締切済み
- ホームページ作成ソフト
- CSSファイルの上手な使い方を教えて下さい。
現在、Webサイトを作成しており20ページくらいになりますが、色や形を変えることが多々あり、そのたびにCSSファイルのコードを修正するのが面倒です。 私はhtmlファイル20枚につき、CSSファイル20枚となっており、すべてのCSSファイルにヘッダーやフッターサイドバーのデザインを施すコードが記述されております。 この方法は非効率でしょうか? 良く考えてみたのですが、全てのページでヘッダーとフッター、サイドバーのデザインが同じなら、ヘッダー、フッター、サイドバーだけのCSSファイルを1つ作成し、メインコンテンツはページの分だけCSSファイルを作成するべきなのでしょうか? この場合、htmlファイル1枚につき、2枚のCSSを読みこませれば良いのでしょうか?
- ベストアンサー
- CSS
- Perlでcssを使わないで3カラムにしたい
現在、Perlでcgiを作成していますが、ページの最上部にヘッダー、ページの両端にメニューや広告、中央にメインコンテンツを配置する3カラム(三段組み)、最下部をフッターにしたいと考えています。 現在、メインコンテンツは完成しております。 cssは、使わないで上記のようなレイアウトをPerlで組みたいのですが、上記にようにしたい場合は、どのように書けば良いのでしょうか? 横幅全体は800。(ヘッダーとフッターも横幅は800) 左メニュー180、中央メインコンテンツ 440 、右メニュー180 で組みたいと思っています。 お手数をおかけ致しますが、アドバイスよろしくお願い致します。
- ベストアンサー
- Perl
- CSSでの背景画像の設定について
CSSでの背景画像の設定について質問です。 参照ページ(http://www.balmuda.com/jp/)のような、メニューバーやフッター部分の背景画像が画面いっぱいに広がるようなページを作成したいと思っているのですが、CSSでの配置で問題があったので質問させて頂きます。 以下のようなdivを作って、wrapper部分に背景画像を設定しました。 <topmenu-wrapper> メニューバー部分の背景画像を指定 <topmenu> margin0 auto;で画面中央に配置 <contents-wrapper> コンテンツ部分の背景画像を指定 <contents> margin0 auto;で画面中央に配置 <footer-wrapper> フッター部分の背景画像を指定 <footer> margin0 auto;で画面中央に配置 floatを使うまでは、思ったような表示が出来ていたのですが、 floatをcontentsの中などで指定し始めると、レイアウトが崩れてしまいました。 clearfixなどで、対処しても、レイアウトが崩れたままです。<margin: 0 auto;がきかず、画面中央に配置されなかったりと。。> 解決策を教えて頂ければ幸いです。よろしくお願い致します。
- ベストアンサー
- HTML
- CSSでページ下部ソースを上に表示するには?
タイトルがわかりづらくて申し訳ございません・・・。 やりたいことを要約しますと、CSSをつかい ページの上部によく配置しているナビゲーションメニューを ページ上では上に表示したいのですが、 ソース上、すべてのページが共通ですので SEOを考えて、ソースの下に配置したいのですがどうすればいいかわかりません・・・ 現在、サイドバーはfloatをつかい、ソース内では、コンテンツの下にきております。 現在の構成と、希望の構成を書きますので、ご教授いただけると助かります! ■現在の構成 (ヘッダー) (ナビゲーションメニュー) (コンテンツ)※ブラウザでは右側 (サイドバー)※ブラウザでは左側に表示 (フッター) ■希望の構成 (ヘッダー) (コンテンツ) (サイドバー) (ナビゲーションメニュー) (フッター) ブラウザ上の表示は、同じにしたいです。
- ベストアンサー
- CSS
- HTML+フレーム構成のページを、HTML+CSSで書き換えるには?
HTML+フレーム構成のページを、HTML+CSSで書き換えるには? コンテンツはそのままに、HTML+フレーム構成のページを、HTML+CSSで書き換えることになりました。 ヘッダー、フッター、上部に画像ロゴ、左にメニューを配置したいと思ってます。 メインコンテンツ部分以外はSSIでインクルードしたいと思っています。 案外簡単だと思ったのですが・・・すぐ配置が崩れて悩んでます。 さらに、CromeとIEで確認をするたびに配置が違ってしまいます。 merginとpadsdingを0にしてから始めるらしいことまでは調べたのですが、 そうするととても配置が変で面倒になります。 現在はFFFTPと秀丸とブラウザで作業してます。 ほかに、PhotoShop6とホームページビルダー14とMicrosoftExpressionweb3は手元にライセンスがあります。 HTMLは分かりますが、CSSは初めてです。多少がんばれば、javaScriptも使えるかもしれません。 お薦めの本や、作り方、フリーウェアなどありましたらご指導ください。よろしくお願いいたします。
- ベストアンサー
- HTML
- ホームページビルダー&CSS
初めまして、HP作成中ですが脳の許容範囲を超えて悶えております。。 どうぞよろしくお願い致します。 ビルダー6.5でページを横3列のフレームページ作り、 (1).ヘッダー扱いで全てのページで使用。 (2).内容。(スクロールバーでスライドして見ていく) (3).フッター扱いで全てのページで使用。 という順番で、作っているのですが、 ヘッダーとフッターの画像を背景として中央に。 その上に乗せる「画像データの文字」(ボタン扱い)のクリックにて(2)が別ページへ。 ウインドウを縮めたりする時に背景とのズレが無い様に、 テーブル表内に「画像データの文字」を入れて並べてサイズ指定して 中央に。 としてたのですが、フレーム使わずに作っていた時は上手くいっていたのに、 フレームにしてからウインドウを縮めると、もう、ずれ放題で。。 フレームページにxhtmlは使えましぇんと警告されて、 「…どうしよ????」 と困っております。。 どうか救ってくださいませ。
- 締切済み
- CSS
- CSSの構成で調整するのを助けてください
現在、htmlとCSSで練習中で、制作上、どうしても解決できなく困っていることがあります。 画面によって高さが均一ではなくどの画面でも解決できるように調整するように言われております。 添付画像のように、ヘッダー コンテンツ フッターという構成で制作しているのですが、 (1)headerの高さは可変で、 (2)mainのheightも固定で常にheight上で中央 (3)footerの位置は固定 (4)footer下の色は背景色 ※添付画像に記している通りです。 という条件で調整しているのですが、(1)と(2)が解決できません。 これは、javascriptを使用しないと難しいのでしょうか。CSSでの調整はできないでしょうか。 素人で申し訳ございませんが、よろしくお願いします。
- ベストアンサー
- CSS
お礼
ありがとうごいざいます!わかりました!