• ベストアンサー

サイトのセンター表示

ＷＥＢページを知識も技術もほとんど（というかほぼ全く）ないのにソフトではなくＨＴＭＬで作ろうとしている若干あほな青年sofreshです。 質問が２つあります。 １．サイトの内容を中央に置き、両端を空白にしたい。 　　各ユーザーのウィンドウの大きさによって余白が無くなったり多くなったりする感じで。 ２．背景の画像（バックグラウンドでしたっけ？）を固定して上下左右にスクロールしても変わらないようにしたい。 自分なりに探してみたのですが以上の二点が解りません。 そもそもそういったことが出来るのかどうかも解らないので、 物凄く馬鹿なことを言っている気もするのですが、何事も挑戦、と思い書き込みました。 どなたか教えてください。

  • HTML
  • 回答数4
  • ありがとう数0
回答 全件
ベストアンサー
＞１．サイトの内容を中央に置き、 ＞両端を空白にしたい。 ＞各ユー…
１．のサイトを中央にする事に必要な考え方は、サイトを中央に置くという事…
難しい事を説明してもしょうがないので…； 基本的に、HTMLではなく…

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

  • ベストアンサー
回答No.3

＞１．サイトの内容を中央に置き、 ＞両端を空白にしたい。 ＞各ユーザーのウィンドウの大きさによって ＞余白が無くなったり多くなったりする感じで。 HTML の場合、body要素 の直下に div要素 の align属性 を用いる事で対処できます。 <body> <div align="center"> 中央表示１ </div> </body> ただ、DOCTYPE によっては文法上誤りとなりますので とりあえず DOCTYPE のお勧めは <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> です。(DOCTYPE はファィルの１行目に書く、文書の宣言の様なものというか・・・。詳細は難しいのでおまじないの様な物と考えておけば・・・。) 尚、CSS でならば、 <style type="text/css"><!-- body{ text-align:center; } --> </style> で済みます。 ただ当然の事ながら他にもいろいろ CSS で指定した場合にその影響で中央表示が全てに行き渡らない場合もあるのでその時は再度検討が必要です。 (このスタイルシートはインライン要素の位置指定でありブロック要素の位置指定ではないので、ブラウザのバグやなんかでいろいろありまして・・・。) ＞２．背景の画像（バックグラウンドでしたっけ？）を固定して ＞上下左右にスクロールしても変わらないようにしたい。 HTML の場合、body要素 の bgproperties属性 を用いる事で対処できます。 <body background="./sample.gif" bgproperties=fixed> ただ、これもDOCTYPE によっては文法エラーとなりますので・・・。 尚、CSS でならば、 <style type="text/css"><!-- body{ background:url("./sample.gif") fixed; } --> </style> で済みます。 また、CSS ではもっと詳細な指定も可能です。 といっても一度には大変なのでとりあえずは以上で。

参考URL：
http://www.tohoho-web.com/www.htm
全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (3)

  • pcstyle
  • ベストアンサー率50% (1/2)
回答No.4

１．のサイトを中央にする事に必要な考え方は、サイトを中央に置くという事ではなく、サイト内入れたＢＯＸの幅を固定にして、中央に表示する事になります。 サイト　→　<body>～</body> ＢＯＸ　→　<div>～</div> になりますので、<body>の中に<div>を入れて記述します。 後は皆様が記述しているやり方で可能になってきます。 ↓ここに、そのものずばりがありました。↓ http://www.1uphp.com/con2/layout/bodycenter.html ２．の背景画像をスクロールせず固定する方法もありまた。 ↓↓↓↓ http://www.1uphp.com/con1/img/backgroundattachment.html

参考URL：
http://www.1uphp.com/
全文を見る
すると、全ての回答が全文表示されます。
  • quads
  • ベストアンサー率35% (90/257)
回答No.2

難しい事を説明してもしょうがないので…； 基本的に、HTMLではなくCSSで指定します。 <body background="back.gif"> だったら、 <html> <head> <title></title> <style type="text/css"> body{ background-image:url("back.gif"); background-attachment:fixed; text-align:center; } #wrapper{ width:750px; margin:0 auto; text-align:left; border:1px solid #000; } </style> </head> <body> <div id="wrapper"> 内容 </div> </body> </html> のような感じで実現できるかと思います。 多分疑問な点が出てくると思うので、その時は補足あたりでさらに質問してください。 # より高度な表現をしたいのであればHTMLとCSSの基礎について学習される事をお勧めします。 # 基礎についてはそれほど難しい内容ではありません。

全文を見る
すると、全ての回答が全文表示されます。
回答No.1

（直接の答えでは無いですが） 作りたいページと似たような仕組みのページのソースを見てみるといいですよ。

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • 背景画像の表示について

    こんにちは。 初心者ですが、Yahooのジオシティーズでホームページを作っています。 今、頭を悩ませている要因が、背景画像についてです。 自作した画像があるのですが、それをアップデートしたURLでは、画面に収まりきるサイズだったのです。 でも、いざトップページに配置したら、なぜか勝手に拡大表示されている上に、スクロールバーが出ていません。 おかげで上下左右が見切れ、画像も荒くなってしまいました。 さらに、画像の繰り返しをしない設定（background-repeat:no-repeat；）をしたにもかかわらず、反映されていませんでした。 HTMLタグでもスタイルシートでも試してみましたが、同じような結果です。 イメージで配置したところ、サイズは同じように拡大されてしまいましたが、スクロールバーは出ました。 私の理想とする設定は、 【作ったままのサイズで 　右端中央にひとつだけ表示し 　画面サイズを超えてしまったパソコン(小さいノートパソコンなど)ではスクロールバーが表示される】 といったところでしょうか。 初心者なりに勉強して、HTMLやスタイルシートについては多少なりとも理解できるつもりです。 どうか、ご教授願います。

  • EXCELシートのHTML保存の余白をなくしたいんです。

    EXCELシートをHTML保存しましたが、上下左右の余白が開いていておもしろくありません。 縦横スクロールバーやオートフィル、セル幅可変、並べ替え等、EXCELの標準機能 を残した HTMLで保存しています。 HTMLは全くの素人なんですが、 HTML上の余白をとらない保存のしかたを教えて下さい。 ダイレクトに HTML上で余白をなくする方法でもよいのですが。 お願いします。

  • CSS:3カラム センター固定

    質問させてください。 コンテンツを挟んで左右違う背景をつけたウェブサイトを作ろうと思います。 3カラムのうちセンターのカラムだけは900px固定の中央配置で 左右のカラムはウィンドウ幅に合わせて可変幅にしたいのですが、 HTMLを <div id="left_box"> <!-- left background --> </div> <!-- /left background --> <div id="main"> <!-- main contents --> <div id="header"></div> <div id="contents"></div> <div id="footer"></div> </div> <!-- /main contents --> <div id="right_box"> <!-- right background --> </div> <!-- /right background --> としたときのCSSの適用の仕方について教えてください。 左右カラムには縦に長い異なった画像をbackground-imageで 横にタイルしていく方法にしようと思っています。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • ワードの印刷レイアウトで上下の空白がなくなる

    WORD2003です。 表示→印刷レイアウトモードにすると 上下の空白部分がほとんどなくなってしまいます。 左右の空白部分はあります。 ページ設定で余白は上下左右ともに20mmになっています。 よろしくお願いします。

  • 背景はスクロールされないようにするには？

    ホームページで、上下にスクロールしても 背景画像はスクロールされない（文字等だけスクロールされる）ようにするには どういうHTMLを使えばいいのでしょうか？ 教えて下さい。よろしくお願いいたします。

  • CSSで、height:100%の中央寄せ

    白い背景に、緑色の本文欄(id="container")を中央配置しようと思っています。 本文欄の上下に余白はなく、文章量に関係なく画面ぴったりの高さにするために、 html, body, containerのそれぞれにheight:100%、 親要素にmargin, padding 0を指定したところ、 画面をスクロールさせたところから緑色の背景色が消えています。 どのようにすれば解決できるのでしょうか？ *{ margin:0; padding:0; } html, body{height:100%;} #container { height:100%; width:800px; background-color:#0A0; margin:0px auto; }

    • ベストアンサー
    • HTML
  • HPの両端に余白を入れたいのですが。。。

    HPを作成しています。 まだまだ初心者で分からないことがたくさんあるのですが、 ページの両端に余白を入れる方法がいくら調べてもわかりません。 言葉ではうまく説明できないのですが、 例えると『Yahoo!』のHPのように左右に余白があって 中央に内容を表示するということです。 よろしくお願いいたしますm(__)m

  • indesign|表の縦組み中央配置について

    いつもお世話になります。 indesign cs5を利用しています。 たとえば、3行3列の表を作成したとして 横組み時では「上下に対する中央」、「左右に対する中央」に設定すると 左右のセルの長さを伸ばしても、縮めても、セルの長さに対する中央に来ます。 けれど、表全体を選択（黒色表示）し、文字の組方向を「縦」に変更すると、「上下に対する中央」、「左右に対する中央」になっているにもかかわらず 下記の図のように、左右に対して文字が中央になりません。 上下に対しては、上下の幅を修正しても、キチンと中央にきます。 「セルの属性」から「テキスト」にいったときのセルの余白は上下左右0.5mm 「テキストの配置」は「中央」 「先頭ベースライン位置」のオフセットは「仮想ボディの高さ」に設定されています。 上記で、セルの余白を0にしたりなど、いろいろ試行錯誤してみたのですが セル内で左右に対して中央にどうしてもなりません。 解決策をご存知のかたは、ぜひ、ご教授いただけたらと思います。 よろしくお願いいたします。

  • ホームページ作成

    ホームページビルダー８でホームページを作っているのですが、上下左右に３ミリほどの空白ができてしまいます。 この余白をなくす方法はないのでしょうか

  • HPビルダー7でアップしたが左寄りに表示される

    たくさんググりましたが分からないので質問させてください。 HPビルダー7でFC2にサイトをアップロードしたんですが、 背景画像、コンテンツなどすべてが左よりに表示されてしまいます。 背景画像だけでも中央にと思い、以下のように、 background-position : center;のみを追加しました。 BODY{ background-repeat : no-repeat; background-position : center; } div{ width:800px; / margin-right: auto; margin-left: auto; } するとやはり、背景画像だけが中央にあり、 画像やテキストは左よりです。 画像やテキストによってはあえて中央に置きたくないのもありますので、 コンテンツ全体（もちろん背景画像も）を中央にするにはどうしたらいいでしょか？ ＨＴＭＬ、ＣＳＳはある程度理解できます。 回答をよろしくお願いします。 使用アプリなど： ホームページビルダー７ Google Chrome Vista

外付けポータブルハードデイスクがPCに認識されない
このQ&Aのポイント
  • PCで外付けポータブルハードデイスクのフォルダやファイルが認識されなくなりました。ポータブルハードデイスクの方は動いており、1分回に一回の起動音がします。
  • ポータブルハードデイスクのフォルダやファイルを認識させる方法を教えてください。
  • 外付けポータブルハードデイスクExpansionの製品、型番SGP-NY020UBKがPCに認識されない問題が発生しました。どのように解決すれば良いでしょうか？
回答を見る

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する