![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
画面の大きさに関わらず、左右の空きを均等にしたい
最近、HPを作成しています。
色々なHPを拝見していると、
最初から全体が左よりで、右に空きがたくさんあるものと、
左も右も、ウィンドウの大きさによって
空きが均等になるものがありますが、
どうのように設定しているのでしょうか??
ウィンドウを最大にしても、最小にしても
HPの内容が勝手に動いて、
左右の空きを均等にする方法を教えていただきたいです。
ちなみに、最近HTMLを始めたばかりなので、
JavaScriptも全く得意ではありません。
わかりやすく説明をお願いしたいです。
よろしくお願いします。
No.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>
No.1
- 回答日時:
テーブルを設定し、ボーダーを見えなくします。
これで透明なテーブルができますので、これをセンタリング(中央寄せ)に設定すると画面の中央に表示されるので、左右が同じスペースになります。
<div align="center">
<table border="0">
<tr><td>中身</td></tr>
</table>
</div>
テーブルの中に文章を入れる場合は、テーブルタグ内に幅を設定すると、綺麗に改行して収まりが良くなります。
例:<table border="0" width="70%">
このとき、幅を固定値ではなく%表示にすると、画面がどんな大きさに変化しても、その割合を保つようになります。上記の例では、残りの30%の半分が左右の余白の幅です。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
画面の大きさに関わらず、左右...
-
JAVAで作るカレンダー 応用
-
javascriptで文字を拡大・縮小...
-
javascriptでクリックするごと...
-
テキストエリアに入力した改行...
-
Javascriptの"return "について
-
Pythonで会員サイトの自動ログ...
-
Javascriptでのbuttonのname属...
-
【jsp/Java】チェックボックス...
-
onFocusOutが複数回呼ばれる!
-
入力した文字をステータスバー...
-
クイズ作成:15個の問題から5個...
-
チェックボックスがundefinedと...
-
JSで一つのボタンを押したとき...
-
プルダウン 項目が多いので先頭...
-
1つのform内に2つのsubmitボタ...
-
ラジオボタンを一括で操作する...
-
ホームページ上での計算につい...
-
selectを変更不可にしたい
-
ポップアップウインドウで選択...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<JavaScript>tableタグを入力不...
-
テーブルの行数を可変長にした...
-
画面表示とともに、テーブルの...
-
selectのonChangeが動作しません
-
javascriptで画像をテーブルに...
-
javascriptでクリックするごと...
-
Tableの枠線(内・外)色を変更
-
javascriptで<table>背景色の取得
-
プルダウンメニューを表の中に...
-
JQueryでテーブルの行を追加し...
-
javascript でテーブル操作
-
クリックごとに文字色が交互に...
-
jquery.csv2table.jsのテーブル
-
指定のテキストをクリックする...
-
連動テーブルのクロスハイライト
-
javascriptでスロットマシン
-
テキストエリアに入力した改行...
-
【jQuery】tableループ内のIDの...
-
クリックするとそのセル一行(...
-
Javascriptでテーブルタグの座...
おすすめ情報