CSSによる3カラムレイアウトの実装方法
- HTMLの要素を用いてCSSによる3カラムレイアウトを実現する方法に悩んでいます。現在はfloatやpositionを使用しているが、ウィジェットを追加してもうまくいかない状況です。
- HTMLの要素の並びを変えずに3カラムレイアウトを実現したい。現在はfloatやpositionを使用しているが、ウィジェットを追加してもうまくいかない。
- CSSを使用してHTMLの要素を3カラムレイアウトにする方法を教えてください。floatやpositionを使用していますが、ウィジェットを追加してもうまくいかないです。
- ベストアンサー
CSSによる3カラムレイアウト
CSSによる3カラムレイアウト 以下のHTML(A)をCSSで(B)の様に表示させたいのですが、どの様にすると良いでしょうか？ HTML(A) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr"> 省略 <body> <div id="container"> <div id="wrapper"> <div id="content">コンテンツ</div> </div> <div id="header">ヘッダー</div> <div id="navigation">ナビゲーション</div> <div id="widget">ウィジェット</div> <div id="footer">フッター</div> </div> </body> </html> 表示(B) |ヘッダー | |ナビゲーション｜コンテンツ｜ウィジェット| |フッター | 自分でも大分試行錯誤したのですが、思い通りの結果が得られません。 今のところは、コンテンツとナビゲーションをfloatで横並びにし、ヘッダー分の高さをmarginで下げて、ヘッダーはposition: absolute;で上部に表示させています。 ウィジェットが無い2カラムの状態ならそれで解決しているのですが、ウィジェットを追加して表示(B)の様に3カラムにしようとすると上手くいきません。 HTMLを変えれば他にやり様は思いつくのですが、containerとwrapperを除く要素の並びは(A)の通りで実現させたいです。 また、上記のソース自体あまりスマートではないのですが、もっとスマートなやり方があればそちらも指南頂けると幸いです。
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
＞HTMLを変えれば他にやり様は思いつくのですが、 そのとおり、そもそも文書木がおかしいから、CSSで配置しようにもうまく行かないのです。もちろん、無理やりabsoluteを使って配置はできますが、内容の伸縮や多様なウィンドウサイズに適合できなくなります。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。. ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input )］より もちろん、SEOの上からも好ましくありません。 本来は、 <body> <div id="header"> <h1>タイトル</h1> </div> <div id="content">コンテンツ <h2>見出し</h2> <p>本文</p> <div id="navigation">ナビゲーション</div> <div id="widget">ウィジェット</div> </div>> <div id="footer"> <ul id="siteMap"> <li></li> <li></li> </ul> </div> </div> </body> とマークアップするべきではないですか？ そうすると、ユーザーエージェントに依存しなくて、かつ検索エンジンも理解しやすい(SEO)サイトになると思います。 余談ですが contentsという複数形はないのでは(^^)、content自体、すでに内容物で複数の意味を持っているのではなかったっけ。 content 複数形 - Google 検索 ( http://www.google.co.jp/search?hl=ja&source=hp&q=content+%E8%A4%87%E6%95%B0%E5%BD%A2&lr=&aq=0&oq=content+%E8%A4%87%E6%95%B0 )
関連するQ&A
- 2カラムのレイアウト
2カラムのレイアウトにおいて、HTMLの記述部分において。 【例1】コンテナーの「★外」に、フッターがある場合と。 ・「コンテナー(コンテンツ+サイドバー)」 ・「フッター」 【例2】コンテナーの「★中」に、フッターがある場合。 ・「コンテナー(コンテンツ+サイドバー+フッター)」 があるように思いますが? ★どっちでもいいんでしょうか? (どっちも、同じレイアウトになるんでしょうか? そんな感じがします。) ^^ HTML/CSS 初心者なもので。。。よろしくです。 ^^ ---------------------------------------------------------------- 【例1】 <div id="container"> <div id="contents"> 本文 </div> <div id="sidebar"> サイド部分 </div> </div> <!--container部分終わり--> <div id="footer"> <p>著作権</p> </div> <!--footer部分終わり--> 【例2】 <div id="container"> <div id="contents"> 本文 </div> <div id="sidebar"> サイド部分 </div> <div id="footer"> <p>著作権</p> </div> <!--footer部分終わり--> </div> <!--container部分終わり-->
- ベストアンサー
- HTML
- CSSレイアウトについて
cssによる3カラムを作っているのですがie6で見ると右のカラムが 落ちしてしまいます。 ie6のバグのようでdisplay: inline;を使うなどいろいろと試して みたのですがwidthとmarginの合計で1000px以内にしなければ ならないようなのですがその場合firefoxなどのブラウザで確認 すると若干ではありますが微妙に違いがでてきます。 下記のソースのように特に画像をいれなくてもbackgroundを設定 することによりカラム落ちはしなくなったのですがこの他に解決 方法はあるのでしょうか？ また、なぜbackgroundを設定することにより解決したのかも 全く意味不明なのでご存知の方がおりましたら教えてください。 #contents { width: 1000px; } #left { display: inline; float: left; width: 180px; text-align: left; background: url(); } #center { display: inline; float: left; width: 600px; margin: 0 20px; text-align: left; background: url(); } #right { display: inline; float: left; width: 180px; text-align: left; background: url(); } <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ～略～ <div id="contents"> <div id="left">レフト</div> <div id="center">センター</div> <div id="right">ライト</div> </div> ～略～
- ベストアンサー
- CSS
- 【CSS】不具合の原因がわかりません。
すいません、少しややこしいかもしれませんが・・・。 下記のように、「ヘッダ」「コンテンツ」「フッタ」の3つにレイアウトが分かれていて、「コンテンツ」「フッタ」に clear: both; float: none; をかけると不具合なく表示されます（縦に3つ並びます）。 ですが、諸事情により「フッタ」部分にcssをかけることが出来なくなりました。 （企業によるガイドラインなので詳しくは書けません。すいません・・・。） 「フッタ」から clear: both; float: none;をはずすとFirefoxではレイアウトがずれてしまいます。float: left をかけたように「コンテンツ」の右側に「フッタ」が来てしまいます。 いちから構築しなおしてはいるのですが、「コンテンツ」部分にmarginやpaddingの値を加えたり（左右ではなく上下でも）、高さを指定したりするだけでずれてしまいます。 原因は何が考えられるでしょうか？ よろしくお願い致します。 ちなみに宣言文は <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> としています。 ////////html//////// <body> <div id="header"> ヘッダ </div> <div id="contents"> コンテンツ </div> <div id="footer"> フッター </div> ////////css//////// #header{ } #contents{ clear: both; float: none; } #footer{ clear: both; float: none; }
- 締切済み
- HTML
- perlで3カラムにしたい (css)
perlでcgiのアンケートのページを作っていますが、ページの最上部をヘッダー、ページの両端にメニューや広告、中央にコンテンツを配置する3カラム（三段組み）、最下部をフッターにしたいと考えています。 ページ幅 755pxでセンタリング、両端のメニュー、コンテンツともに幅固定で、以下のようなcssファイルを作りましたが、cgiのページを見ると、cssファイルの設定がうまく反映されません。 どうすれば良いのか、ぜひ御指導、アドバイス頂けると助かります。 ｍ（＿ ＿）ｍ 当方初心者のため、もし以下のcssファイルの書き方に間違えがありましたら、ご指摘ください。 よろしくお願い致します。 ----------------------------- <HTML> <BODY> <div id="wrapper"> <div id="header"> ヘッダー部分 </div> <div id="main"> <div id="menu"> メニュー部分 </div> <div id="contents"> コンテンツ部分 </div> <div id="affiriate"> アフィリエイト部分 </div> </div> <div id="footer"> フッター部分 </div> * { margin: 0; padding: 0; } #wrapper { width: 755px; margin: 0 auto; /* 幅固定（755px）でセンタリングします。*/ } #header { width: 755px; height: 50px; } #main { width: 755px; /* 両端ブロックとコンテンツを囲んでいるセレクタです。*/ } #menu { float: left; width: 150px; /* floatに、width 指定は必須です。*/ } #contents { float: left; width: 505px; #affiliate { float: left; width: 150px; } #footer { clear: both; /* float をクリアしています。*/ width: 755px; height: 50px; } #menu ul { list-style: none; } </div> </BODY> </HTML>
- ベストアンサー
- CSS
- xhtml+cssのレイアウト センタリング カラム落ち
xhtml+cssレイアウト超初心者です。 何か間違っている所があれば教えてください。 よろしくお願い致します。 【問題点】 １）全体がセンタリングにならない □□■■■■■□□ □□■■■■■□□ □□■■■■■□□(左右の中央にしたい) ２）subがカラム落ちしてしまっている？ mainとsubの下に『スト』という文字が入ってしまっています。 【cssソース】 @charset "Shift_JIS"; * {margin: 0; padding: 0; } body {color: #000000; font-size: 62.5%; } /*==wrapper==*/ div#wrapper { width: 950px; margin : 0 auto; } /*==heaber==*/ div#heaber { width: 950px; margin-bottom: 30px; background-color: #66CCFF; } /*==contents ==*/ div#contents { width: 950px; float: left; background-color:#66CCFF; } /*==main ==*/ div#main { width: 740px; margin-right: 20px; float: left; background-color:#6699FF; } /*==sub ==*/ div#sub { width: 190px; float: left; background-color:#6666FF; } /*==siteinfo ==*/ div#siteinfo { clear: both; width: 950px; background-color:#6633FF; } 【HTMLソース】 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <link rel="stylesheet" media="tv, screen, projection, print" href="css/import.css" /> </head> <body> <div id="wrapper"> <div id="header"> <p>テキスト</p> <p>テキスト</p> </div><!--/header--> <div id="contents"> <div id="main"> <p>テキスト</p> <p>テキスト</p> </div><!--/main--> <div id="sub"> <p>テキスト</p> <p>テキスト</p> </div><!--/sub--> </div><!--/contents--> <div id="siteinfo"> <p>テキスト</p> <p>テキスト</p> </div><!--/siteinfo--> </div><!--/wrapper--> </body> </html>
- ベストアンサー
- HTML
- css 標準モードでheight:100%にしたとき、フッターを画面の一番下にもってくるには？
お世話になります。 タイトル通り、標準モードでheight:100%のものをつくり、一番下にフッターがくるようにしたいのですが、どうにも出来ません。 なにかいい方法がないか、ご教授いただけると幸いです。 尚、テーブルは使わない方法でお願いします。 以下が途中までのソースです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <style type="text/css"> <!-- html,body { margin:0px; padding:0px; height:100%; } div#h100 { height:100%; background-color:#eeeeee; } div#header { background-color:black; color:white; } div#container { background-color:#ffffee; } div#footer { background-color:black; color:white; } --> </style> </head> <body> <div id="h100"> <div id="header">ヘッダー</div> <div id="container">コンテンツ</div> <div id="footer">フッター</div> </div> </body> </html>
- ベストアンサー
- HTML
- 背景画像の位置を固定し、背景画像の上に表示している画像を常に中央に表示する方法
背景画像の位置を固定し、背景画像の上に表示している画像を常に中央に表示するようにしたいと思ったのですが、背景画像も常に中央に表示されてしまいます。 そのため、上記の現象の対処法について何かご教示いただける方がいらっしゃいましたら、よろしくお願いします。 【やりたい事】 1. ブラウザの横幅が1024の際、背景画像を画面中央に表示したい。 2. ブラウザの横幅が1024の際、背景画像の上に表示されている画像を画面中央に表示したい。 3. ブラウザの横幅が1000以下の際、ヘッダーやコンテンツやフッターという文言の表示方法と同じように、左側を基準に表示したい。 4. ブラウザの横幅が1000以下の際、背景画像の上に表示されている画像は画面中央に表示したい。 【現状】 1,2,4は出来ています。 ただ、3については、ヘッダーやコンテンツやフッターという文言の表示方法と同一にする方法が分からず、画面中央に表示されてしまいます。 【ソースコード】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>title</title> <style type="text/css"> <!-- body { text-align: center; margin:0; padding:0; } #wrapper_index_up, #wrapper_index_bottom { margin: 0 auto; text-align: left; } #wrapper_index_up, #wrapper_index_bottom, #header, #contents, #footer { width: 1000px; } #header { background-color:red; } #top_img_wrapper { background-image:url(http://cdn.oshiete.goo.ne.jp/images/top/search_bk.gif); background-repeat:no-repeat; background-position: center; } --> </style> </head> <body> <div id="wrapper_index_up"> <div id="header">ヘッダー</div> </div> <div id="top_img_wrapper"> <img src="http://cmm001.goo.ne.jp/img/sn/sn_50.gif" alt="" width="139" height="92" /> </div> <div id="wrapper_index_bottom"> <div id="contents">コンテンツ</div> <div id="footer">フッター</div> </div> </body> </html> どうかよろしくお願いします。
- ベストアンサー
- HTML
- HPのCSSについて
超初心者です。へッダーの固定をしたページを作りたいのですが、フリーのCSSを使ってやってみたところ、背景の色、タイトルの文字の大きさ、現在センタリングになっているのを全体に表示したいのに、それが上手くいきません。以下、試してみたCSSなのですが、どこをどう変えれば、上記の変更が可能でしょうか。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSSでヘッダーを固定する 第４歩</title> <style type="text/css"> html { height:100%; } body { margin:0px; height:100%; } #body { width:700px; margin:0px auto; } #header { background:#ccffcc; height:100px; /* width:100%;*/ width:700px; position:fixed; } #main { padding-top:100px; background:#ffff99; } #footer { background:#ffcc99; height:80px; } </style> <!--[if IE 6]> <link rel="stylesheet" href="./fixheader_ie6.css" type="text/css" /> <![endif]--> </head> <body> <div id="body"> <div id="header"> ヘッダー </div> <div id="main"> コンテンツ1<br /> コンテンツ2<br /> コンテンツ3<br /> コンテンツ4<br /> コンテンツ5<br /> コンテンツ6<br /> コンテンツ7<br /> コンテンツ8<br /> コンテンツ9<br /> コンテンツ10<br /> コンテンツ11<br /> コンテンツ12<br /> コンテンツ13<br /> コンテンツ14<br /> コンテンツ15<br /> コンテンツ16<br /> コンテンツ17<br /> コンテンツ18<br /> コンテンツ19<br /> コンテンツ20<br /> コンテンツ21<br /> コンテンツ22<br /> コンテンツ23<br /> コンテンツ24<br /> コンテンツ25<br /> コンテンツ26<br /> コンテンツ27<br /> コンテンツ28<br /> コンテンツ29<br /> コンテンツ30<br /> コンテンツ31<br /> </div> <div id="footer"> フッター </div> </div> </body> </html>
- ベストアンサー
- その他（インターネット・Webサービス）
- XHTML+CSSサイトで＜div＞の順序変更によるレイアウト崩壊
よろしくお願いいたします。 コンテンツ部分をmain、右側に帯をつくりsubとして２カラム（他ヘッダとフッタもあります）のサイトです。 XHTMLでdiv id="sub"部分を先に記述してしまったので、div id="main"部分と上下を入れ替えたところ、表示が大きく崩れてしまいました。CSSのfloatで左右指定の確認もしましたが、解決しません。 CSSについては初心者ですので、なにか重大なことを見落としているのかもしれません。教えていただけると助かります。どうぞよろしくお願いいたします..
- ベストアンサー
- 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
お礼
とても丁寧な回答に感謝します。 仰る通りです。 ただ、単純な好奇心として試したい事でもあるので、遊び心半分でまた試行錯誤してみようと思います。 余談のcontentですが、間違えた覚え方をしていたみたいですね。 こちらも為になりました。 ありがとうございました。