画面の大きさに関わらず、左右の空きを均等にしたい

解決済

質問者：korokoro--55
質問日時：2010/03/25 18:21
回答数：2件

画面の大きさに関わらず、左右の空きを均等にしたい

最近、ＨＰを作成しています。
色々なＨＰを拝見していると、
最初から全体が左よりで、右に空きがたくさんあるものと、
左も右も、ウィンドウの大きさによって
空きが均等になるものがありますが、
どうのように設定しているのでしょうか？？

ウィンドウを最大にしても、最小にしても
ＨＰの内容が勝手に動いて、
左右の空きを均等にする方法を教えていただきたいです。

ちなみに、最近HTMLを始めたばかりなので、
JavaScriptも全く得意ではありません。
わかりやすく説明をお願いしたいです。
よろしくお願いします。

通報する

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

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： noname#111181
回答日時：2010/03/25 19:41

CSS（スタイルシート）で実現できます。

下記をHTMLファイルとして保存して、見てください。

詳しいことは「CSS とブロック要素の配置について」（http://keizai.xrea.jp/markup/markup04.html）を参考にしてください。
--------------------------------
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<header>
<style type="text/css">

</style>
</header>
<body>
<div class="centerbox">
ブロック中央揃え<br />
1行目<br />
2行目<br />
3行目<br />
</div>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

さっそく、やってみたところできました！
ありがとうございます。

通報する

お礼日時：2010/03/26 14:48

No.1

回答者： nine999
回答日時：2010/03/25 18:27

テーブルを設定し、ボーダーを見えなくします。

これで透明なテーブルができますので、これをセンタリング（中央寄せ）に設定すると画面の中央に表示されるので、左右が同じスペースになります。

<div align="center">
<table border="0">
<tr><td>中身</td></tr>
</table>
</div>

テーブルの中に文章を入れる場合は、テーブルタグ内に幅を設定すると、綺麗に改行して収まりが良くなります。
例：<table border="0" width="70%">
このとき、幅を固定値ではなく％表示にすると、画面がどんな大きさに変化しても、その割合を保つようになります。上記の例では、残りの30％の半分が左右の余白の幅です。