既存のHPを中央寄せ

締切済

質問者：midoricya
質問日時：2002/12/04 00:58
回答数：8件

宜しくお願いいたします。

自分でHPを作成したのですが（HPビルダー）
たとえば、ウインドウを狭くすると画像や文字も隠れてしまいます。
ウインドウの大きさを変えても常に自動的に画面の中央に表示される
ようにするにはどうしたらよいですか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (8件)

最新から表示
回答順に表示

No.8

回答者： d-3
回答日時：2002/12/25 14:32

ビルダー使ったこと無いので、細かいことはわからないですが

>たとえば、ウインドウを狭くすると画像や文字も隠れてしまいます。

表や段落の幅を絶対指定（pxやcm）してないでしょうか。
例えば、表（table）の幅を600pxで指定すると、ウィンドウ幅を600px以下にした場合、当然表示できない部分は隠れます。

このような場合は表や段落の幅を%で指定するといいと思います。
例えば80%にした場合は、表や段落の幅は常にウィンドウの幅の80%になり、中身の文字もそれに応じて折り返されて表示されます。
画像は折り返しできませんので、ウインドウを画像の横幅より小さくすると、表示しきれない部分は隠れます。これは画像を小さく載せるしかないと思います。

特に幅を指定しなかった場合は、段落の場合ウインドウ幅100%、表の場合は内容が収まる最小限の大きさになります。（ブラウザによって違うかもしれません）

おすすめは、表や段落には横幅を指定せず。本文全体（BODY）に余白を設定して見栄えを整えることです。

例えば
<body style="margin: 0 4%;">
と指定すれば、そのページの本文はウィンドウの幅がどのような大きさでも、左右に4%の余白を持ってレンダリングされます。
余白の大きさは好みに合わせて変えてください。

外部スタイルシートを使うと上のようなものを含む見栄えに関する様々な設定を、全ページに適用することができるので楽です。
ここで書くと長くなるので、検索などを駆使して調べてみてください。

- 0
- 件

通報する

No.7

回答者： the845t
回答日時：2002/12/04 16:39

縦でも中央というのであれば、

私はJavaScriptを使い、ウィンドウの高さを取得し、
その「高さ－若干のマージン」を利用しています。
テーブルを利用し、さらにvalign=centerとすることで、
縦でも中央になります。

JavaScriptですから、JavaScriptを切ってる人や、対応していないブラウザでは使えません。
また、ウィンドウを変更してもすぐに反映されるわけではなく、
再読み込みすることでその大きさに変更されます。

もっとも、私は中央に持ってくるのではなく、
画面いっぱいを利用することを目的として使用しています。

- 0
- 件

通報する

No.6

回答者： lead1976
回答日時：2002/12/04 13:36

HTMLのタグを直接テキストエディタ等で書き換えるとしたらの話ですが、

ウィンドウの大きさを変えても常に自動的に画面の中央に画像や文字が表示されるようにする方法としては、中央揃えにしたい部分を
・<center></center>で囲う
・<div align="center"></div>で囲う
・対象のタグにalign="center"を追記する (例：<p align="center">～</p>)
・スタイルシートを利用する(対象のタグにstyle="text-align: center;"を追加する(例：<p style="text-align: center;">～</p>)など)
などの方法があります。一般的にはこれらの方法でうまくいくと思います。

個人的にはtableを利用するのはお勧めしないんですが、tableタグを利用する場合は
<table>
<tr>
<td align="center">内容</td>
</tr>
</table>
のようにすれば、一応中央揃えで表示できます。
ただし、表示内容の幅がテーブルで指定している横幅を超える場合(画像の横幅が指定したテーブル幅より大きい時や、改行できない半角英数字が長く連なっている場合)、テーブルの横幅が指定した横幅よりも大きくなることがあります。その場合、テーブル幅がブラウザの横幅を超えてしまうと、表示内容がブラウザの横幅からはみ出て、すべて中央から右側にずれて表示されることになります。

参考になれば幸いです。

- 0
- 件

通報する

No.5

回答者： rydeen1971
回答日時：2002/12/04 12:52

コンニチワ。

<table width="80%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
画像や文字など
</td>
</tr>
</table>

上のようなタグを打ち込んで、「画像や文字など」の部分に、その文字や画像を入れてください。
table width="80%"
が、ミソです。この場合は、ブラウザの横幅に対して8割のテーブルが描かれることになるので、その間にオブジェクトが収まります。

これでお分かりいただけるでしょうか？

- 0
- 件

通報する

No.4

回答者： yellowocean
回答日時：2002/12/04 05:59

はじめまして。

HP を組み立てている HTML タグですが、
TABLE タグ、TR タグ、TD タグというのを基本に使って作り、
そのタグのなかでできるレイアウトの大きさの指定を
ピクセルではなく、パーセントで指定することで、
ウィンドウの大きさの変更に柔軟に対応するページが
つくれると思います。
タグの詳しいことは参考書などを手に入れたほうが
いつも見られるので便利です。
うまくやれば、ウィンドウを狭くする = 小さいモニタで
見る人も、よく見られるページになりますね。
がんばってみてください。

- 0
- 件

通報する

No.3

回答者： shy00
回答日時：2002/12/04 02:14

全体を真ん中に配置したい場合は

<div align="centre">
文字など入力
</div>

で、ブラウザー表示の真ん中に配置されます。
　（ブラウザーのサイズを変更しても）

タグ覚えてしまうと、ビルダー使うよりも
早く作れますよ（笑）

- 0
- 件

通報する

No.2

回答者： toma9
回答日時：2002/12/04 01:59

＞その方法以外になにかあるんでしょうか？？

HTMLソースは知ってますか？
TABLE内のセル内の文字列を列の中央に置きたいのでしたら…

<TABLE>
<TR>
<TD ALIGN="CENTER">
//文字列
</TD>
</TR>
</TABLE>

となります。

ソースの表示はHP上で右クリックで見る事が出来ます。
ビルダー上なら「HTMLソースの表示」をクリックすればでます。
自分がしたい内容のHPがあるのなら、HTMLソースを参考にすると勉強になります。
その気がありましたら勉強して損はないでしょうね。
ただ、私はそこまで勉強してませんが…(~_~;)

以下参考サイトです。

HPお役立ち小技集
http://www.sky.sannet.ne.jp/masapine/homepage/

ホームページ作成支援/HTML学校/HTMLタグ辞典
http://www.pixel.co.jp/

参考URL：http://www.pixel.co.jp/