CSS
無料お問合せはこちらから TEL 075-257-4588 営業時間 AM9:30~PM6:30

スタッフブログ | ページ全体を画面の中央に揃えるには
スタッフブログ
ページ全体を画面の中央に揃えるには

ページ全体を画面の中央に揃えるには
今回は、絶対便利!ページ全体を画面の中央に揃える方法です。
bodyタグタグの中にある幅を指定したボックスを、
画面の中央に揃えてみましょう。

まず、divタグタグに

ページ全体を画面の中央に揃えるタグ

というスタイルシートを指定します。
widthは任意の幅でいいので、必ず指定して下さい。

margin-left:auto;にあるように、autoとは
左の余白(margin)を自動的に空ける』
という意味です。
ですので、左と右にautoを指定しているので、
左右の余白を自動で割り振り空けますよ』
という意味になります。
divに横幅を指定してやることで
bodyの横幅からdivの横幅を引いた残りの幅を、
自動で左右の余白をあてているのです。
なので、画面の中央に揃っているのです。
今回の書き方は分かりやすく左と右に分けて書きましたが、
margin:0px auto;と書いても同じ意味になります!

ただ、実はこれだけではIEで表示出来ない場合があります。
そこでbodyタグタグにスタイルシートを指定します。

テキストを中央に揃えるタグ

と入れてみてください。
これでどのブラウザでも画面中央揃えになることができます!

しかし!!
こうするとbodyの中に書いたものが全てcneterになってしまう、
つまりdivの中に書いた文字や画像も全部中央に寄ってしまうんですね。
なので、divタグタグのスタイルシートに

テキストを左に揃えるタグ

を追加してあげて下さい。
これで、divの中に文字を書いても画像を入れても全部左に寄って表示されます。

これで完成です。
ウィンドウの幅を変えてみても
常にdivに囲まれた範囲が中央に位置しているはずです。
白背景では分かりにくいと思いますので、divの背景に色をつけてやると
分かりやすいと思います。
これは絶対に便利!ですので、是非使ってみてくださいね☆


| http://www.ryuumu.co.jp/ryuumu/stuffblog/index.php?e=329 |
| ソース(ホームページ)のレシピ by 委員長! | 07:06 PM | comments (x) | trackback (x) |

<< PAGE TOP >>

BACK UP 初心者でホームページを考えてられてる方へ

独自ネットショップや楽天ショップ・YAHOOショップ運営される初心者の方も、無料で、親切にアドバイスいたします。
SEO・月次更新・リニュアルetc

ホームページ制作の事なら

何でもお問合せください。
お問合せフォームはこちらから

リュウム株式会社

京都市中京区橋弁慶町222番地
ヒライビル3階

TEL 075-257-4588
営業時間 AM9:30-PM6:30

無料お問合せはこちらから TEL 075-257-4588 営業時間 AM10:00~PM7:00

スタッフブログ | ページ全体を画面の中央に揃えるには
CSS