CSS中央寄せと背景：ウィンドウ幅超過時の背景表示と横スクロール制御について
- CSSを使用してコンテンツの中央寄せを行う際に、ウィンドウ幅があるピクセル数を超えた場合に背景を出現させる方法について質問です。
- また、コンテンツ幅800px、inner-wrapper幅1000px、outer-wrapper幅1200pxといったページを作成する場合に、ウィンドウ幅が999pxまでは横スクロールバーを表示し、1000pxになった時点で横スクロールバーを非表示にする方法についても教えてください。
- bodyにoverflow: hiddenを適用すると横スクロール自体が表示されなくなってしまうため、別の解決策を探しています。
- ベストアンサー
CSS | 中央寄せと背景
こんにちは、 添付画像を見ていただけるとわかりやすいと思うのですが、 コンテンツの中央寄せにおいて、ウィンドウ幅があるピクセル数を超えた時点で、 背景を出現させることはできるのでしょうか？ また、コンテンツ幅800px、inner-wrapper幅1000px、outer-wrapper幅1200px、 といったページを左上角固定で制作する場合に、 inner-wrapperまでは横スクロールを表示、outer-wrapperには横スクロールを表示させない、言い換えるとウィンドウ幅が999pxまでは横スクロールバーが表示され、1000pxになった時点で横スクロールバーが非表示にすることは可能なのでしょうか。 bodyに overflow: hiddenをかけると横スクロール自体が表示されなくなってしまうので。 ご存じの方、よろしくお願いします。
- salt_on_all
- お礼率56% (9/16)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
こんな感じでしょうか？ #innerwrapper の width を max-width に変更すると少し異なった振る舞いをします。どちらが意図するところに近いのか迷ったので、そちらも試してみてください。 ---(html)--- <body> <div id="outerwrapper"> outer wrapper <div id="innerwrapper"> inner wrapper <div id="content"> content </div> </div> </div> </body> ---(css)--- body { background-color: #F93; } #innerwrapper { background-color: #FFF; width: 1000px; margin: 0 auto; border: 1px solid #666; } #outerwrapper { background-color: #FFF; max-width: 1200px; margin: 0 auto; } #content { background-color: #39F; width: 800px; height: 600px; margin: 0 auto; }
関連するQ&A
- 横スクロールサイトの中央寄せ
お世話になります。 http://webrocketsmagazine.com/entry/20111114/how-to-scroll-website-holizontal-width-jquery.html 上記サイトを参考に横スクロールのサイトを作っているのですが、 中央寄せがうまく出来ません。 上記サイトのCSSで .page { margin:0px; bottom:0px; width: 2000px; // ページ幅を大きめに！ float: left; height: 100%; } ここの部分で幅が2000pxに設定してしまうので、それ以下の幅にしても中央寄せになってくれないのです。 何かいい手はないでしょうか。ご教示ください。 よろしくお願いします。
- 締切済み
- CSS
- css box ieだけ中央寄せ出来ない
サイトを作っています。CSSのBOXを使って、メイン部分を構成しているのですが、IEだけ中央寄せされません。どのようにすれば解決できますか？できれば<div style="text-align:center">内容</div>は使いたくないです。 <style type="text/css"> <!-- body { background-color: #EEEEEE; } .mainbox{ width:900px; height:1000px; padding:6px 6px 2px 2px; border:8px; margin-left: auto; margin-right: auto; text-align:left; background-color:#bde9ba;} body { overflow: hidden; } --> </style> <div class="mainbox"> 内容 </div> 質問に関係ありませんがクローム、オペラ、モジラでは正常に表示できるのになぜIEだけはちゃんと働かないのでしょうか？ IE迷惑ですｗ
- ベストアンサー
- CSS
- 【ＩＥ】iframeで呼び出したＨＴＭＬの表示幅について
こんにちは。質問させて下さい。 現在、http://yrotnus.web.fc2.com/testpage.html 上記のような構成のページを作っています。 （背景画像を、フレームをまたいで表示させるために、floatで左にコンテンツ、右にインラインフレームを配置しています） コンテンツをクリックしインラインフレームに内容を表示させているのですが、このページをＩＥ８で確認した際、 ■内容が画面を越えて表示され、横スクロールバーが出る。 ■横スクロールバーが出た状態でブラウザの幅を変えてみると、 以降は呼び出したページが自動的に画面の幅に合う。 という状態になります。 firefoxでは、横スクロールバー自体表示されませんでした。 ＩＥでも横スクロールバーが出ないようにしたいのですが、どうすれば良いのでしょうか。 overflow-x: hidden以外の方法を探しています。 よろしければご回答願います。
- 締切済み
- HTML
- CSSだけで、テーブルにスクロールバーを表示させたいのですが…
CSSを使い、テーブルにスクロールバーを表示させたいのですが <div style="height:60px; width:300px; overflow-y:scroll;"> <table border=1 width=300> : </table> </div> 上記の方法だと確かにスクロールバーは表示されるのですが、出来ればDIVを使わずに、作っておいたCSSを適用するだけで、テーブルにスクロールバーを表示させることは可能でしょうか？ 出来れば、スクロールバーの色を変更して、横(X軸)のスクロールバーも消したいのですが… CSSで .scroll { overflow: scroll; visibility: visible; height: 100px; width: 140px; } とやってみたのですが、どうしてもスクロールバーが表示されません。何が足りないのか、もしくは根本から間違っているのかがわかりません。 ご存知の方教えて下さい。
- ベストアンサー
- HTML
- CSSレイアウトでの中央寄せ
おせわになります。 bodyに背景画像を指定し、CSSで中央寄せをしているのですが、 動作確認でブラウザ幅をこまかく拡大・縮小を繰り返すと、 背景画像とコンテンツ部とが1pxずれる事があります。 Win IE6.0、7.0、MacOSX safari2.0でこの現象がおき、FF2.0はWin&Macともに問題ありません。 この解決方法はありますでしょうか。 ご教授のほど、よろしくお願いいたします。 ▼HTML <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>テスト</title> <style type="text/css"> <!-- body { margin:0; padding:0; text-align:center; background: url(http://www.geocities.jp/ajax3210/bg.gif) center top repeat-y; } #wrapper { width:746px; height:100px; background-color: #CCCCCC; margin-left:auto; margin-right:auto; text-align:left; } p { margin:0; padding:0; } --> </style> </head> <body> <div id="wrapper"> <p>テスト</p> </div> </body> </html>
- ベストアンサー
- HTML
- iframeの横スクロール
iframeを使ってほかのページを表示させているのですが、 どうしても横スクロールバーが出てしまうのでcssのbody要素に 「overflow-x: hidden;」と入れました。 確かにiframeの横スクロールバーは消えましたが、ページの横スクロールも消えてしまいました。 div idでiframeを囲ってcssでその場所だけに「overflow-x: hidden;」を入れると今度は横スクロールバーが消えません。。 色々調べてみたのですが同じような人がいないようで； 詳しい方教えていただけないでしょうか。 （説明がへたくそですみませんm(_ _)m）
- ベストアンサー
- その他([技術者向] コンピューター)
- cssで擬似フレームについて
はじめて質問させていただく、CSS初心者のものです。 下記のdivタグを画面中央寄せにする方法はあるのでしょうか？ HTMLとCSSは下記のように書いています。 HTML <body> <div id="header"> （width="800" height="180" のflashファイルを入れています） </div> <div id="main"> （ width="700"のコンテンツを作りスクロールさせていま） </div> <div id="footer">テキストを一行入れています</div> </body> ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ ｃｓｓ html{ height:100%; overflow:hidden; } body{ height:100%; width:100%; margin:0px auto; background-color: #000000; } #header{ position: absolute; height: 180px; width: 800px; overflow: hidden; top: 0px; } #main{ overflow: auto; position: absolute; width: 800px; top: 180px; bottom: 20px; background-color: #FFFFFF; } #footer{ position: absolute; width: 800px; bottom: 0px; font-family: "Courier New", Courier, mono; font-size: medium; font-style: italic; color: #00FF33; height: 20px; background-color: #000000; overflow: hidden; } このような感じなのですがなにかいい方法があればご教授お願いいたします。
- ベストアンサー
- HTML
- 拡大すると背景色が消える
お世話になります。 ヘッダーやフッターに背景色を指定する際に、 HTML側では、 <div id="wrapper"> <div id="header"> ここにヘッダーの内容をいれる。 </div> </div> のようにし、 cssで、 #wrapper{width:100%;background-color:#ccc;} #header{width:900px;margin:0 auto;} のように指定して、ウィンドウ幅いっぱいに背景色を指定しているのですが、 通常時は問題ないのですが、 ブラウザの拡大機能で拡大して、横スクロールバーでスクロールすると、 背景色が途中で消えてしまいます。 なにか解決方法はあるのでしょうか？ よろしくお願いします。
- ベストアンサー
- CSS
- 1番上の3つのフレームだけセンターに配置したいです
すみません。現在下記のようなコードでフレームを配置しています。1番上の3つのフレームだけセンターに配置したいと思っているのですが、下記のコードでもっとも効果的な方法はどのように入力すればよろしいのでしょうか？簡単な事なのかも知れませんが素人なのでよくわかりません。すみませんがよろしくお願いいたします。 <style type="text/css"><!-- .outer-frame { width:1000px; overflow: hidden; } .inner-frame { width: 150px; height: 150px; overflow: hidden; border: 1px solid; color: #a9a9a9; padding: 3px; float: left; margin: 5px;} div.inner-frame:hover {border-color: #ff0000;} --></style> <div class="outer-frame"> <div class="inner-frame"></div> <div class="inner-frame"></div> <div class="inner-frame"></div> ↑ この3つだけ中央に表示したいです。 <div class="outer-frame"> <div class="inner-frame"></div> <div class="inner-frame"></div> <div class="inner-frame"></div> <div class="inner-frame"></div> <div class="outer-frame"> <div class="inner-frame"></div> <div class="inner-frame"></div> <div class="inner-frame"></div> <div class="inner-frame"></div> </div>
- ベストアンサー
- CSS
- CSSでの擬似インラインフレーム
CSSでの擬似インラインフレームでのサイトを作成しています。 ページ全体枠を900px×650pxで左右上下の中央表示にし、 左側にナビゲーション、右側にコンテンツを配置しています。 右側のコンテンツ部分は400px×500pxのみ表示して 残りの部分はoverflow:hiddenを指定して表示しないようにしました。 左側のナビゲーションは位置を固定にし、ボタンをクリックすると 右側のコンテンツ枠に各項目の内容が入れ替わり表示するように しました。 次に、クリックした際に右側のコンテンツ部分の表示移動が パッと入れ替わるのではなく、スルスルと画面が推移するなめらかスクロールで場面が移動しているように見せたいのですが スクロールのjavascriptはこちらのサイト（http://lab.centralscrutinizer.it/the-tiny-scrollings/）でダウンロードさせていただいたファイルを設置したのですがパッと画面表示が変わるのみでスルスルっと動いてくれません。。。 私はjavascriptの記述知識がないためどうすればよいのかわからず ご質問させていただきました。 どうすれば良いのでしょうか。 どなたかお助けくださいませ。 よろしくお願いします！
- ベストアンサー
- HTML
お礼
ご回答ありがとうございました！ 近いところまではいっていたのですが、やっとたどりつけました。 2つめの質問もmax-widthとmin-widthの併用で、解決しました。 本当にありがとうございました！！