• ベストアンサー

横幅1200pxのHPをセンタリングしたい

みなさま、お知恵を貸してください。 今HPを作っています。 横幅1200pxで作成いたしまして、 ブラウザ横幅1200px以下で見たときに全体をセンタリングした状態で表示したいのです。 サイト全体の横幅をそもそも変えれば、、というのは時間が限られておりできません。。 CSSやJSでなんとか調整できませんでしょうか。 なお、ブラウザが横幅980px以上では横スクロールを消したいです。 コーディング初心者のためなかなか解決策が見つかりません。。 どうぞよろしくお願い致します。

  • CSS
  • 回答数2
  • ありがとう数0

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

  • ベストアンサー
  • azizi
  • ベストアンサー率66% (6/9)
回答No.2

文字は980px分の幅で中央に、画像は幅980以上は縮小する方向、幅980以下はそのままで・・・を条件に見栄えも考慮すると、CSSはこんな感じでしょうか。 <style type="text/css"> <!-- *{ max-width: 980px; min-width: 0px; margin: 50 auto; } --> </style> 参考ページを作ってみました。 ■table 1200幅の未調整 http://members3.jcom.home.ne.jp/kazzazy/test/w1200_1.html ■table 1200幅で上記style摘要 http://members3.jcom.home.ne.jp/kazzazy/test/w1200_2.html html記述はいい加減なのでつっこまないでください(笑

その他の回答 (1)

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

 なら、横幅を指定すればよいだけでは?  ウィンドウ巾が960px以上でスクロールなしと言うことは、 min-width:960pxです。  すなわち、 body{ width:100%; max-width:1200px; min-width:960px; margin:0 auto; }  これだけで、センタリング自体必要なくなります。  HTMLさえ、ちゃんと出来ていればスタイルシートで如何様にもなりますが、HTMLがきちんと出来ていないと不可能です。 【引用】____________ここから メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。.  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/ )]より  そもそもHTMLは 【引用】____________ここから どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )]より  なのですから、HTMLさえきちんと出来ていれば、ウィンドウサイズは無論、携帯電話やスマートフォンで問題なく利用できるはずですし、そのためにHTMLを使ってウェブページを作成したはずです。・・・それがHTMLでページを作成するを選択した唯一最大の目的だったのでは? ・HTMLには文書構造以外書かない  「HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )」--strictには、プレゼンテーションに関わる要素や属性はほとんどありません。 ・その文書構造を元にスタイルシートでプレゼンテーションを指定する。

関連するQ&A

  • divの横幅 自動調整

    PHP + MySQL +html + CSS で動的テーブルを表示するサイトを制作しています。 <div id="○○○"> <table></table> </div> といったように、中のテーブルをdivで囲ってコーディングしています。 外側をdivで囲い横幅を指定してあげて、テーブルに横スクロールバーを表示させているのですが、divで指定した横幅よりもテーブルの横幅が短くなった場合、外のdivの幅がテーブルに合わせて短くならないのですが、このような場合、何か対処法はございますでしょうか。 superTable.jsを使用しており、このjsの使用がテーブルの外側にdivをおき、cssを使ってdiv側にスクロールバーを表示される仕様になっております。 以上、よろしくお願い致します。

    • ベストアンサー
    • CSS
  • HPの横幅が広くなるのを防ぐにはどうすればいい?

    取引先の会社のHPの一部を作成する仕事をしています。 自社のブラウザで確認しても気がつかないのですが、 取引先に渡した後、本サーバにアップされたページを 確認すると、なぜか、横幅が広がっています。 下にスクロールバーがでてしまい、困っている との報告を受けたのですが、どこを直せばいいのかが はっきりとは分かりません。 原因としてどこを直せば的確でしょうか。 問題がありそうなところを確認しながら 直せればいいのですが、直接取引先へは見に行けない状態です。(物理的に遠いので) スタイルシートを指定しています。 ページ内で使用している テーブルの横幅はピクセル指定していますが、 中は%指定で 7:3くらいにしています。 テーブルの中身もピクセル指定したら いいのでしょうか?   横幅が、別のブラウザで見ても、広がらないように 指定する方法を教えてください。 困っています。どうか皆さん、知恵を貸して下さい。お願いします!!

  • Gmail の横幅について

    Gmail でメールを書くとき、テキストエリアの横幅が長すぎて サイドのお気に入りバーを出しているとスクロールバーが右端に切れてします。その為 下の横スクロールを使って毎回右に移動させています。 個人的には横幅600px程度あれば十分なのですが、これってどうにかならないものなのでしょうか?設定のところを一通り見たのですがそれらしき箇所が見つかりませんでした。 ブラウザ Opera モニターは23型です。 よろしくお願いします。

  • CSSで横の段組-センタリングするには?

    CSSで横の段組をし、センタリングしたいのですが、 横の段組のために「float: left;」を使うと、 「margin:0px auto;」と指定しても左寄りになってしまいます。 「float: left;」を消せばセンタリングできるのですが、 そうすると横の段組ができなくなって困っています。 何か単純な間違いをしているのだと思うのですが、ご助言ください。

    • ベストアンサー
    • HTML
  • CSSでセンタリングしたい

    こんにちは 現在デザインをCSSでWebサイトを構築していますが、どうしても分からないことがあります。 今まで、センタリングはcenter要素で行っていましたが、CSSではどのようにして行うのでしょうか。 ソニー : http://www.sony.co.jp/ のようにbody要素全体をセンタリングしたいです。 text-align :center はインライン要素専用ですので、ブロック要素ができるCSSはあるのでしょうか?Webブラウザに依存するJavaScriptなどのスクリプトは使用できません。

    • ベストアンサー
    • CSS
  • 横幅が2880pxを超えるデザインについて

    http://www.studio-coast.com/ のようなコンテンツの一部がブラウザに表示され、ユーザーが自分でマウス操作することで表示されていない部分を表示できるようなものをつくりたいと思ってます。 自分のデザイン構想だと横幅が5120px必要なのですが、FLASHのステージのサイズは横が最大2880pxまでと制限されているようです(FLASH MX 2004を使用しています) そこで ・全てのデザイン構想を1/2スケールに作成してステージへ納めてswfを作成 ・htmlファイル上でswfの表示サイズを引き伸ばしてブラウザに表示 と考えているのですが、これにより画像や文字などの崩れやブラウザによってSWF自体が正常に表示できないなどの問題は起きますでしょうか。 また他に、このような2880pxを超えるようなFLASHデザインでよい手法があれば教えてください。 よろしくお願いします。

  • Flashの横サイズ

    Flashの横サイズ Flash8使っています。 横幅1000pxのFlashを作成しました。 横幅が1000pxなのでウインドウのサイズが1000px以上の場合は問題ないのですが・・・ ウインドウの横幅が狭まると横スクロールバーが出現します。 それは当然のことなのですが、常にフラッシュの中心をウインドウの中心に固定するにはどうしたらいいでしょうか? つまり常にセンタリングしたいのです。 普通に作ると横スクロールバーが出現したら、ホームページの表示部分が右から切れていく感じになります。 例えばウインドウのサイズが1000pxあったとしても、ウインドウの右下の隅をドラッグで横幅を縮めていくと徐々に横スクロールバーが表示されて、ホームページは右の端から徐々に見えなくなっていきます。 そのような形ではなく、常にホームページのセンターがウインドウのセンターに合った状態 つまり、徐々に見えなくなっていく領域がホームページの右端ではなく、左右平等に徐々に見えなくなっていく状態を作りたいのです。 そうするにはどのようにコーディングもしくはフラッシュ側で何か仕込まないといけないでしょうか? ちょっと分かりにくい質問ですが、分かった方はアドバイス頂けましたら幸いです。 どうぞよろしくお願いします。

  • ページ全体をセンタリングできません

    フルCSSでWEB作成をしていますが、ページ全体をセンタリングしたいのですが、IEで見ると右にずれてしまいます。ネットでいろいろ検索をして試してみたのですが、うまく行きません。 HTMLは <div id="centering"> <div id="wrapper"> </div> </div> で、CSSは #centering { text-align: center; width: 100%; position: absolute; margin: 0px; padding: 0px; } #wrapper { width: 900px; margin: 0px auto 0px auto; padding: 0px; text-align: left; です。 これではだめなんでしょうか。

    • ベストアンサー
    • CSS
  • html、cssで、一部がセンタリングできない

    現在、試験的に作成しているホームページを、全体にセンタリングしたい場合について、お聞きしたいと思います。 (1)ものすごく、右へスクロールするようになっています。 上部のタイトル部分の絵が、原因で、かなり右へスクロールする状態です。 (2)中央あたりにある「内容」と書いてあるタイトルから下のインラインフレームの枠を含めて、右寄りになっています。 一番下の「Copyright © 2012 タイトル All Rights Reserved.」だけ、センタリングされている状態です。 全体を、最下部の「Copyright © 2012 タイトル All Rights Reserved.に合わせて」、一気にセンタリングしたいのですが、どの部分を修正すればよいでしょうか? cssは、ここに記載できなかったため、そのままの記述で、インラインフレームの中にコピーをしてあります。 詳しい方がいましたら、よろしくお願いします。

  • css(スタイルシート)について質問

    最近cssをはじめたのですが、いまいち構造が理解できません。 甘えて申し訳ありませんが、縦横60pxが9枚あります。 この写真を横3枚縦3枚(3行3列)で綺麗にHP内の中心に収まるように全体をセンタリングしたいのですが、お詳しい方アドバイスを頂戴願えますでしょうか。 お願いします。(css+xhtmlでお願いします。)

    • ベストアンサー
    • HTML

専門家に質問してみよう