• ベストアンサー

ホームページの内容を、一定幅で画面中央に表示するには？

Yahoo!などのように、ホームページ内の文字や画像などを、一定の幅に納めて画面の中央に表示するには、どうすればいいのですか？ 1x1の表を作って、その表を中央揃えにして、その表（セル）の中に文字や画像などを入れると思い通りになるのですが、背景色を付けると、色の範囲が四角になってしまいます。 理想は、画面中央に一定幅で、文字や画像を表示し、上から下まですきまなく背景色で埋めたいのですが・・・。

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

  • ベストアンサー
  • harlan
  • ベストアンサー率77% (234/303)
回答No.2

> しかし、私の環境では、ページ全体が赤の背景色になってしまいます。 私が質問の意味を取り違えていたためで、No.1のサンプルは、それで正しい表示です。 上下の余白はゼロで左右には白の余白ができる、という事ですか？ 以下のサンプルはテーブルの内容が少ないため、下に余白ができますが、テーブルの 高さが、スクロールしなければならない程、大きくなれば、下も余白がなくなります。 <html> <style type="text/css"> body { margin: 0px; padding: 0px; } div.ctable { text-align: center; } table { width: 300px; text-align: left; background-color: red; } </style> <body> <div class="ctable"> <table> <tr><td>あいうえお<br>あいうえお<br>あいうえお<br></td></tr> </table> </div> </body> </html> なお、このサンプルはIE6での表示を確認していますが、ボックス要素のセンタリングには ブラウザの解釈の違いによって、ややこしい問題があります。 http://www.tagindex.com/hp_guide/css_layout1/02.html

ka-kichi
質問者

お礼

考えていたものに限りなく近いものができそうです。 ありがとうございました。

その他の回答 (1)

  • harlan
  • ベストアンサー率77% (234/303)
回答No.1

TABLE要素やTD要素に、Bgcolor属性で背景色を付けているのでしょうか？ 上から下まで隙間無くという事なら、BODY要素に背景色を指定してはどうでしょう。 なお、BgcolorはHTML4.0で非推奨となっているので、スタイルシートの background-colorを使っています。 また、TABLEのセンタリングについても、TABLEをDIVに入れ、そのDIVにも スタイルシートを使っていますが、この意味については以下のリンクを 参考にして下さい。 http://allabout.co.jp/internet/hpcreate/closeup/CU20050806A/index.htm <html> <style type="text/css"> body { background-color: red; } div.ctable { text-align: center; } div.ctable table { margin: auto; text-align: left; } </style> <body> <div class="ctable"> <table> <tr><td>あいうえお<br>あいうえお<br>あいうえお<br></td></tr> </table> </div> </body> </html>

ka-kichi
質問者

お礼

現在、tableタグに、外部cssで中央揃え・背景色を設定しています。 サンプルまで作っていただいてありがとうございました。 しかし、私の環境では、ページ全体が赤の背景色になってしまいます。 ページの真ん中（コンテンツがある部分）だけが赤で、その両脇は色無し（白）にしたいのですが、方法はあるのでしょうか？ 当方の環境は、WinXPproSP2＋IE6です。

  1. カテゴリ
  2. インターネット・Webサービス
  3. その他（インターネット・Webサービス）

関連するQ&A

  • 表を画面の中央に表示したい

    ホームページビルダー７、標準モード 表を画面の中央に表示したい http://www.setuyaku-city.net/biruda/table/qhpt19.html 説明の１，２，３、と確認作業しましたが　４、になりません 表が中央に動きません ▲何が原因か？ 表の中、文字等[中央揃え]　は出来、確認もできます。

  • 表を画面中央に表示したい

    文字や画像は画面に中央に表示できるのですが、表を作成すると、左端に寄ってしまいます。これを中央に表示させることはできないものでしょうか。 ソフトはホームページビルダー９を使っています。

  • グローバルナビ部分の背景を画面幅いっぱいにしたいのですが、

    グローバルナビ部分の背景を画面幅いっぱいにしたいのですが、 どうすれば良いのか分からなくて困っています。 まず、参考にしようとしているサイトが下記です。 http://www.oo-nagata.co.jp/ このサイトのようにグローバルナビ部分のとフッター部分の背景を画像で（画像ではなくても同じ事なのでしょうか、、。）画面幅いっぱいにしたいのですが、うまくいかなくて困っています。 ページの幅は960pxにCSSにて指定しているのですが、 幅を指定してしまうと当然その部分の幅は指定した幅になってしまいます。 よって背景画像は画面幅いっぱいにはならないのです。 ページの幅は指定し画面中央にくるようにしたいのですが、 どうすれば良いのでしょうか？

    • ベストアンサー
    • HTML
  • Dreamweaverで画面サイズを一定にする

    こんにちは。 WEBページを表示するパソコンの画面サイズが 1280 x 1024 1024 x 768 のどちらの場合でも、中央揃えになるようにページをデザインしたいのですがどうすればよろしいでしょうか？ 例えばYahoo!のトップページは、どちらの画面サイズの場合でも 両端に余白ができるようになっていて、真ん中にページが来ています。 考え方としては真ん中から左右共に512ずつデザインできるようにすればいいのでしょうか？ 初心者のためうまく表現できませんが、よろしくお願いします

  • 【ホームページ】中心に寄せたページの枠外に色を付ける

    ホームページのひとつのページの横幅が全画面ではなく、画面の7割程度の幅で作られ、中央揃えされていて、例えば背景が白。 それ以外の空いた左右の場所はオレンジ、などといったページを見るのですが、このそれぞれに異なった背景の色（画像）を設定する方法がわかりません。中央揃えの方法はわかります。ホームページビルダーVer.8で作成します。 異なった背景が設定できるということは、表などで分かれているのでしょうか？ページの見出しから最後まで表に入れて試してみましたが、ページ上部・下部は外枠の色になってしまします。 専門用語知識不足ですが、どなたか質問の意味がお分かりになられる方がいらっしゃいましたら、どうかよろしくお願い致します。

  • CSSで画像を常にスクリーンの中央に表示させるコマンドは？

    Dreamweaver MX2004を使用して、サイトを作成しています。 ページ構成は至ってシンプルで、背景とその中央に表示される（はずの；）フラッシュ画像です。 具体的には・・・ - <body></body>に画像を背景として表示 - <body></body>の中にdivタグでくくった箱を作り、その中にswfファイル内包 としています。 スクリーンの大きさに関わらず、常に中央にフラッシュ画像(divタグでくくったswf）が表示されるようにしたいのですが、左右の中央揃え（寄せ？）はmargin: auto;で出来たものの、フラッシュ画像が画面の一番上に張り付いたままです。 divタグを<center></center>でくくってみたりもしましたが、結果は同じ・・・ フラッシュ画像を<table></table>に内包してスクリーンの中央に表示させるやり方は知っているのですが、CSSのみで同じ事は出来ないでしょうか？ 色々な本やサイトを調べましたが分かりません。 ご存知の方いらっしゃいましたら、教えて下さい。 ヨロシクお願いします。

  • ホームページビルダーで画面とWeb画面が合わない

    標準モードで表を二列にしてその中へ「文」「画像」を組んでいるのですがホームページビルダーで画面とWeb画面が合わなくて例えば右画面の写真は同じ大きさに表示されるのですがそのキャプションが短く折りたたんで表示されてしまいます。また、表の幅を入力してもその単位に表の幅が直りません。画面通りに表示されないHP制作ソフトで困っています。Ver６のときはこれほどでもなかったような気がします。今使っているのはVer8です

  • フローチャート：処理　上下の中央揃え

    四角の中の文字を上下の中央揃えにしたいのですがなりません。 どうしたら四角の中で文字が上下の中央揃えになりますか？？

  • ホームページを中央に表示するには？

    初心者ですがホームページビルダーで作った自分のホームページを持ってます。 早速質問なのですが、ヤフーのトップページなどは左右に等間隔の余白があって、ページ全体がつねに画面の中央に表示されていますよね。 「お気に入り」のボタンを押して左側にお気に入り一覧を表示させてもページはつねに真ん中に表示されます。 文字のセンタリングではなくて、ページを中央に表示させる方法です。 私は左に寄せてページを作っているので、見ばえを良くするためにページを真ん中に表示させるのはどのようにしたら良いのでしょうか。 タグがあったら教えてほしいです。 お願いします。

    • ベストアンサー
    • HTML
  • 横スクロールバーを消して中央表示させる方法

    いつもお世話になっております。 さきほど、画面サイズと背景写真について質問させていただいたものです。 教えていただいた結果、ひとまず背景に横1600pxの画像を使用することに致しました。 そこで、ためしに1枚絵の画像を背景として入れてみたのですが、案の定といいますか、、、 横スクロールバーが出てしまい、あげくに中央に表示されていませんでした。 ブラウザや画面のサイズにとらわれず随時中央表示にし、横スクロールが出ないようにする方法を教えていただけないでしょうか？ どうかよろしくお願いいたします。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する