ベストアンサー

CSSで上下の配置を逆転させるには？

2011/06/15 20:23

HTMLは変更せず、CSSの修正だけでスマートフォンに対応することになりました。 HTMLの一番上に書いたメニューを、その下に書かれたメインコンテンツ（高さは決まっていない）の下に配置させたいのですが、よい方法がみつからずに困っております。 <div id="header"> メニュー </div> <div id="main"> メインコンテンツ </div> 何かよい方法はありませんでしょうか。よろしくお願いいたします。

moonpalace
お礼率66% (2/3)

HTML
回答数3
ありがとう数2

みんなの回答 （3）
専門家の回答

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

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/06/17 09:21 回答No.3

私の知る限りですが、良い方法はないでしょう。せいぜい、小さくしてfixで脇にどけておいて、mainはその分marginをとる。もしくは、header自体をdisplay:noneとする。　ちなみに、私は最初から携帯電話やPDAも考慮してheaderにはナビゲーションは置いてないのです。header部分は画像のない「見出し要素」と「簡潔な要約div」のみでロゴなどは見出しの背景としてscreen用のスタイルシートで設定している。パンくずリストはともかく、ナビゲーションは末尾においています。 <div class="header"> </div> <div class="section"> 　<div class="nav"></div> 　<div class="article"></div> 　<div class="aside"></div> </div> <div class="footer"> </div> <div class="nav"> </div> とか・・解決策はなくはないです。古いコンテンツでナビゲーションが最初のほうにある場合 .htaccessで <FilesMatch "^old$"> SetHandler cgi-script </FilesMatch> と書いて、oldというファイルをCGIとして動作させて、 /old/example/abc.html が要求されたとき、/example/というPATH_INFOから、OLD_HTML内の/example/abc.htmlを取り出してきて、動的に内容を書き換えて出力させています。・・・HTMLとはいえ、XML的にきちんと整形していますから可能な方法ではありますが・・

質問者

お礼 2011/06/30 10:33

お礼が遅くなり申し訳ございません。新規に作成する場合はナビゲーションを末尾にする方法、ぜひ取り入れたいと思います！ CGIを使用するという方法、新鮮でした。試してみたいと思います。ありがとうございました。

その他の回答 (2)

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/06/15 23:06 回答No.2

すみません。iPhoneでしたね。携帯電話でなく・・なら、 <link media="only screen and (max-device-width:480px)" href="smart.css" type="text/css" rel="stylesheet"> <link media="screen and (min-device-width:481px)" href="pc.css" type="text/css" rel="stylesheet">  ですね。　HTMLがちゃんとできていたら、位置を変えるのは簡単なので省略しますが、CSS3の機能で、スタイルシートを切り替えます。

質問者

お礼 2011/06/16 15:15

ヘッダー部分をposition:absoluteのbottomで指定すればよかったですね。すみません、こんな簡単なことをやっと思いつきました。ありがとうございました。

質問者

補足 2011/06/16 15:02

ご回答ありがとうございました。ご指導いただいたことと同様の方法で、CSSの切り替えは既にできております。（私の質問の最初の一行、余計でした・・・申し訳ございません）上下を入れ替える方法がどうしても思いつかなくメインコンテンツの情報量が変動するため、position:absoluteは使えないしなぁ、と。よい方法があればご教授お願いいたします。

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/06/15 21:10 回答No.1

関連するQ&A

FIREFOXでのCSS表示
よろしくお願いします。 CSSのレイアウトで、よくある２カラムのオーソドックなもの左側にメニュー、右側にメインコンテンツ、上下にヘッダ・フッタ <div id="wall"> <div id="header"></div> <div id="menu"></div> <div id="main"></div> <div id="footer"></div> </div> のような構造の場合、メインコンテンツは各ページによってボリュームが違うので、wall部分もmainのボリュームにあわせて変化させたいです。 IEならば問題ないのですが、FIREFOXだとmenuやmainの部分が増えると、wallの上から重なるように表示されてしまうケースがありました。はみ出ています。このような場合、それぞれのheightの設定など、どのようにしたら良いのでしょうか？　mainの長さにあわせて最後にwallを1250pxのように具体的な長さ指定すると、見た目にはfirefoxでもうまく表示はされています（ただし、このやり方だと各ページのコンテンツの長さにあわせて、１つ１つ設定しないといけない） floatの設定なども含めて、どういった記述をすれば良いのか、どなたか教えてもらえませんでしょうか。
- ベストアンサー
- ホームページ作成ソフト
CSS:3カラムセンター固定
質問させてください。コンテンツを挟んで左右違う背景をつけたウェブサイトを作ろうと思います。 3カラムのうちセンターのカラムだけは900px固定の中央配置で左右のカラムはウィンドウ幅に合わせて可変幅にしたいのですが、 HTMLを <div id="left_box">  </div>  <div id="main">  <div id="header"></div> <div id="contents"></div> <div id="footer"></div> </div>  <div id="right_box">  </div>  としたときのCSSの適用の仕方について教えてください。左右カラムには縦に長い異なった画像をbackground-imageで横にタイルしていく方法にしようと思っています。よろしくお願いいたします。
- ベストアンサー
- 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
ＣＳＳレイアウトの２カラム左メニューでコンテンツを先にＨＴＭＬに記述できる方法をおしえてください。
趣味でＨＰを作成しております。一般的なＣＳＳレイアウト２カラム左メニューにしたいのですが、ＨＴＭＬ部分で左メニューよりコンテンツを先に記述し、ＣＳＳで左メニューで右にコンテンツがくるようにしたいです。現在のＣＳＳは * { margin:0; padding:0; } .wrapper { width: 750px; margin: 0 auto; } .header { width: 750px; height: 100%; } .main { width: 750px; } .menu { float: left; width: 200px; } .contents { float: left; width: 550px; } .footer { clear: both; width: 750px; height: 100%; } .menu ul { list-style: none; } このような記述です。つづきましてＨＴＭＬ部分は <body> <div class="wrapper"> <div class="header"> ヘッダー部分 </div> <div class="main"> <div class="contents"> コンテンツ部分 </div> <div class="menu"> 　メニュー部分 </div> </div> <div class="footer"> フッター部分 </div> </div> </body> このような感じです。しかしこれだとＨＴＭＬ部分はコンテンツが先にきておりますが、メニューが右になってしまいます。これをＨＴＭＬ部分を変えずにＣＳＳでメニューを左に配置する方法はありますでしょうか？１週間くらい試行錯誤したのですが、できませんでした。お詳しい方教えてください。
- ベストアンサー
- HTML
CSSでDIVで挟んでいるのに背景色が出ない？
CSSと（X)HTMLでページを作っています。角丸なページにしたいため、 /* ---------- 角丸画像の上辺 ---------- */ #main_contents_header { width: 800px; height:20px; background:url(./top.png) no-repeat top; margin: 10px auto 0px; padding: 0; text-align: center; } /* ---------- 上辺と下辺の間のメイン部分 ---------- */ #main_contents { background:url(./bg.png); width: 800px; margin: 0 auto; padding: 0; text-align: center; } /* ---------- 角丸画像の下辺 ---------- */ #main_contents_bottom { width: 800px; height:20px; background:url(./bottom.png) no-repeat top; margin: 0 auto; padding: 0; text-align: center; } というCSSを作り、 HTMLは <div id="main_contents_top"></div> <div id="main_contents"> ここにいろいろなコンテンツを置いていく </div> <div id="main_contents_bottom"></div> という書き方にしているのですが、<div id="main_contents">の背景画像が正しく出ず、地の色が見えてしまうのです。試しに<div id="main_contents">へpadding-bottom:300pxというような指定を加えると、正しく背景画像が出ました。 <div id="main_contents"> ここにいろいろなコンテンツを置いていく </div> という書き方ではダメなのでしょうか・・・？確認はFirefoxとSafariでやっています。
- ベストアンサー
- HTML
左メニューをCSSで固定したい
左メニューを固定しスクロールはメイン部分のみするページをHTMLとCSSで作っています。固定自体はできたのですが、私が作っているページのメニューの項目が多すぎて、メニュー部分を固定するとブラウザ内に入らない下の方の項目が見えなくなってしまいます。これをフレームを使わずに作ることはできないでしょうか？できればカクカクしないようなメニューが作りたいです。 ■■■■■■■■■■■■■ ■menu　　■　main　　　　　　■ ■　　　　■　　　　　　　　　■　　　 ■ 　　　　■　　　　　　　　　■ ■　　　　■　　　　　　　　　■ ■■■■■■■■■■■■■ ・メニュー部分は固定だが、一番下の項目が見えるまではスクロールできる・メニューが一番下までいったらメニューはそこで固定してメイン部分だけスクロール【HTML】 <div id="main"> メインの内容 </div> <div id="menu"> <ul> <li>メニュー1</li> <li>メニュー2</li> <li>メニュー3</li> <li>メニュー4</li> ・・・・（26項目） </ul> </div> 【css】 #main{ float:right; } #menu{ width:160px; position:fixed; _position:absolute; top:30px; left:0px; }
- ベストアンサー
- HTML
CSSでボーダーがとぎれてしまう・・
すみません・・普段は自分で調べても分からないときだけこちらで質問するのですが、今回は作業に追われておりまして・・申し訳ない気持ちですが、質問させていただきます。 CSSで・・・ header、main、menu、footer の順番でdivで囲まれたコンテンツ？があります。 headerが上でその下の左にmenu、右にmainと並べて、その境目にボーダー線を指定したいのですが、どちらに指定しても逆側が長くなってしまうとボーダーが途中で途切れてしまいます。これをこれを常にfooterの位置まで表示する方法はありませんでしょうか？よろしくお願いします。
- ベストアンサー
- CSS
CSSに関して教えてください。
CSSで左列がサイドバーで右列がメインコンテンツの二段組レイアウトについて質問します。 ●要点サイドバーには背景色が指定してあり、サイド、メインとも高さが可変(指定なし)とします。メインコンテンツの高さの変動に応じてサイドバーの高さも変化してサイドバーの背景色とメインコンテンツの高さが同じになるように変化させたいのです。 ---------- CSSソース ---------- body { text-align: center } #wrapper { width: 720px; margin: 0 auto; text-align: left; } #content { width: 720px; background: url("../img/content.gif") repeat-y; } #main { float: right; width: 540px; } #sidebar{ float: left; width: 180px; background: blue; } ---------- HTML ---------- <body> <div id="wrapper"> <div id="content"> <div id="main"> ・・・・・・・・・ </div> <div id="sidebar"> ・・・・・・・・・ </div> </div> </div> </body> CSSでcontentに背景画像(サイドバーの幅が青色の画像)を指定してrepeat-yとするとIE6ではメインコンテンツの高さに合せてcontentに指定した画像が繰り返されサイドバーの色がメインコンテンツの高さと揃います。Firefoxでは、メインコンテンツがサイドバーより高くなると揃わなくなります。contentに指定された画像が表示されてないようです。どのようなことでもいいのでお教えください。手がかりがなく困っています。
- ベストアンサー
- HTML
CSSの使い方の流儀？
先日業者にホームページの作成を依頼したところ、子孫セレクタを駆使したCSSを使ったページができあがってきたのですが・・・たとえばこんな感じ <div id="header"> 　　<div class="block1"> 　　　　<span>・・・・・・</span> 　　　　・・・・・・・　　</div> 　　<span>・・・・・・</span> 　　・・・・・・・ </div> <div id="contents"> 　　<div class="block2"> 　　　　<span>・・・・・・</span> 　　　　・・・・・・・　　</div> 　　<span>・・・・・・</span> 　　・・・・・・・ </div> これに対して CSSでこんなスタイルが設定されています（セレクタ部のみ抜粋） #header .block1 #header .block1 span #header span #contents .block2 #contents .block2 span #contents span 私だったらわざわざ複雑な子孫セレクタを使わずに、個々にクラスかIDを設定すると思うのですが・・・また、ただ画像が貼ってあるだけと思ったら、 CSSでspanの背景画像として貼ってあったり、ただの仕切り線と思ったら、やはりdivのボーダーラインを使っていたり・・・こういう作りって一般的なのでしょうか？あるいは、何か利点があるのでしょうか？ブログのカスタマイズなどだと、元のHTMLを自分で直せない場合が多いので、こういうコトをすることが良くある、というのはわかるのですが・・・あまりにHTMLのタグの構造とCSSが密接に絡んでいて、ほんの一文追加しようとしただけで苦労していまして・・・なんでこういう書き方なのかな・・・と、不思議に思っています。。
- 締切済み
- HTML
CSSを使った全体の配置
サイト全体の配置指定を外部スタイルシートを使い、ホームページ作成をしております。 CSS初心者なので、変な質問になるかもしれませんが宜しくお願いします。全体のぺージの構造は上にヘッダー、下にフッター真中は3つに分け、3カラムの状態で配置しております。今回、ヘッダー部分を2つに分けたいと思っております。今のヘッダー部分は、最初にh1（テキスト）を左配置に表示し、その右側にテキストで「サイトマップ」のテキストリンクを配置。その下に width="850" height="200" の大きめな画像を置き、画像の下に右配置でh2（テキスト）上記のような配置になっているので、外部スタイルシートコードは・・・ /* ヘッダーコンテンツ */ .header { text-align:left; padding-bottom:0.5em; 　width:830px; float:left;} .header h1{ font-size:12px; padding:0; float:left;} .header h2{ font-size:12px; float:right;} /* ヘッダーサイトマップ */ .headersite{ float:right;} ・・・としています。 HTMLタグの方は・・・  <div class="header"> <h1>ｈ1題名</h1> <div class="headersite"><a href="sitemap.html">サイトマップ</a></div> <a href="index.html"><img src="%/logo.jpg" width="850" height="200" border="0"/></a> <h2>h2題名</h2></div>  画像部分を真中から分け、左に画像を置き右はテキストにし回り込ませたいと思っておりますが、なかなか上手くいきません（汗）画像を2つにわけるCSSコードを .header left .header right とするならば、 HTMLタグ部分は・・・  <div class="header"> <h1>ｈ1題名テキスト</h1> <div class="headersite"><a href="sitemap.html">サイトマップ</a></div> <div class="header left"><a href="index.html"><img src="%/logo.jpg" width="300" height="200" border="0"/></a> <div class="header right">テキストテキストテキスト <h2>h2テキスト</h2></div>  にしたいのですが、CSSコードはどのように指定したら良いでしょうか？自分なりにCSSコードを筆記したのですが、回り込みがうまくいかないのか、真ん中から分けた左画像の右にテキストが並んでくれなくて下に配置されてしまいます。ちなみに全体横幅は850pxにしております。
- ベストアンサー
- その他（プログラミング・開発）

CSSで上下の配置を逆転させるには？