CSSでサイト全体を中央寄せする方法
サイトは何もしないと左寄せになっています。
しかし、今どき左寄せになっているサイトはまずありません。
CSSでサイト全体を中央寄せする方法を解説します。
目次
【方法1】bodyにmargin:autoとwidth指定
body{
width: 960px;
margin: auto;
}bodyはサイト全体を囲っているhtmlタグです。
これを中央寄せするとサイト全体を中央寄せできます。
bodyはブロック要素であり、ブロック要素を中央寄せするには「margin:auto」と「width」を指定します。
「margin:auto」を指定すると右と左の空間が自動で同じになり、結果的に中央寄せできます。
widthは指定しないと幅は最大になり、両脇に隙間がなくなります。
隙間がないと右と左の空間を同じにできないため中央寄せになりません。
よって「width」を指定する必要があります。
widthはいくつがいい？
迷ったら1000px程度にしておきましょう。
これはノートPCの画面サイズより一回り小さいサイズです。
とはいえ、ブラウザ幅のサイズはまちまちです。
デスクトップPCだと1920pxありますし、スマホでは360px程度まで小さくなります。
「1920pxだと大きすぎるけど、レスポンシブ対応もしたい」
そんなときはmax-widthを駆使しましょう。
body{
width: 100%;
max-width: 1280px;
margin: auto;
}上記のように指定すると、ブラウザ幅が1280px以上の場合bodyの幅は1280pxになり、ブラウザ幅が1280px以下の場合bodyの幅はブラウザ幅と同じになります。
背景色の指定
bodyのwidthが100%でなくても背景色はサイト全体になります。
CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。
↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓
↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。
【方法2】全体を囲ったdivにmargin:autoとwidth指定
「ヘッダーとフッターはブラウザ幅と同じにして、中央の部分だけ中央寄せしたい」
このようなときはbodyを中央寄せできません。
bodyにwidthを指定して中央寄せしたとき、その中の要素であるヘッダーとフッターはbodyの幅を超えられないためブラウザ幅と同じにできなくなるためです。
こんなときは中央の部分だけ中央寄せしましょう。
<style>
.example{
width: 960px;
margin: auto;
}
</style>
</head>
<body>
<header>ヘッダー</header>
<div class="example">中央</div>
<footer>フッター</footer>
</body>中央部分はdivなどで囲います。
あとは先述の方法と同じく「margin:auto」と「width」を指定して中央寄せします。
【まとめ】CSSでサイト全体を中央寄せする方法
【方法1】bodyにmargin:autoとwidth指定
サイト全体からはみ出る要素がないときに。
【方法2】全体を囲ったdivにmargin:autoとwidth指定
ヘッダーやフッターなどはみ出る要素があるときは中央寄せしたい部分だけ中央寄せする。
以上、CSSでサイト全体を中央寄せする方法でした。
「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。
