ベストアンサー

サイトのセンター表示

2005/09/12 23:54

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

sofresh
お礼率6% (5/79)

HTML
回答数4
ありがとう数0

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

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

ベストアンサー

koutarou504
ベストアンサー率44% (182/407)

2005/09/13 14:42 回答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"> </style> で済みます。ただ当然の事ながら他にもいろいろ CSS で指定した場合にその影響で中央表示が全てに行き渡らない場合もあるのでその時は再度検討が必要です。 (このスタイルシートはインライン要素の位置指定でありブロック要素の位置指定ではないので、ブラウザのバグやなんかでいろいろありまして・・・。) ＞２．背景の画像（バックグラウンドでしたっけ？）を固定して＞上下左右にスクロールしても変わらないようにしたい。 HTML の場合、body要素の bgproperties属性を用いる事で対処できます。 <body background="./sample.gif" bgproperties=fixed> ただ、これもDOCTYPE によっては文法エラーとなりますので・・・。尚、CSS でならば、 <style type="text/css"> </style> で済みます。また、CSS ではもっと詳細な指定も可能です。といっても一度には大変なのでとりあえずは以上で。

参考URL：: http://www.tohoho-web.com/www.htm

その他の回答 (3)

pcstyle
ベストアンサー率50% (1/2)

2005/10/26 14:14 回答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)

2005/09/13 00:15 回答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の基礎について学習される事をお勧めします。 # 基礎についてはそれほど難しい内容ではありません。