- ベストアンサー
画面の大きさに関わらず、左右の空きを均等にしたい
画面の大きさに関わらず、左右の空きを均等にしたい 最近、ＨＰを作成しています。 色々なＨＰを拝見していると、 最初から全体が左よりで、右に空きがたくさんあるものと、 左も右も、ウィンドウの大きさによって 空きが均等になるものがありますが、 どうのように設定しているのでしょうか？？ ウィンドウを最大にしても、最小にしても ＨＰの内容が勝手に動いて、 左右の空きを均等にする方法を教えていただきたいです。 ちなみに、最近HTMLを始めたばかりなので、 JavaScriptも全く得意ではありません。 わかりやすく説明をお願いしたいです。 よろしくお願いします。
- korokoro--55
- お礼率40% (9/22)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
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"> <!-- div.centerbox { width: 400px; margin-left: auto; margin-right: auto; border: 1px solid #000; } --> </style> </header> <body> <div class="centerbox"> ブロック中央揃え<br /> 1行目<br /> 2行目<br /> 3行目<br /> </div> </body> </html>
その他の回答 (1)
- nine999
- ベストアンサー率44% (512/1140)
テーブルを設定し、ボーダーを見えなくします。 これで透明なテーブルができますので、これをセンタリング（中央寄せ）に設定すると画面の中央に表示されるので、左右が同じスペースになります。 <div align="center"> <table border="0"> <tr><td>中身</td></tr> </table> </div> テーブルの中に文章を入れる場合は、テーブルタグ内に幅を設定すると、綺麗に改行して収まりが良くなります。 例：<table border="0" width="70%"> このとき、幅を固定値ではなく％表示にすると、画面がどんな大きさに変化しても、その割合を保つようになります。上記の例では、残りの30％の半分が左右の余白の幅です。
お礼
テーブルでもできるんですね！ 色々な方法があることを知れて良かったです。 ありがとうございます。
お礼
さっそく、やってみたところできました！ ありがとうございます。