CSSスキル - 第6章 Lesson2

サイト全体を中央寄せ、センタリングする方法

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

Webサイトは、全体が中央に寄っているものが最近ではほとんどです。
しかし、レイアウト全体を真ん中に寄せるためには、少し難しいmarginというプロパティを利用する必要があります。
ここでは、marginプロパティとwidthプロパティを使って、実際にウェブサイトをセンタリングしてみます。



この動画で学べること

・ページ全体を真ん中寄せにする方法



ページ全体を真ん中寄せにする方法

今回は、左側に寄ったページを、真ん中寄せにする方法をご説明します。
真ん中に寄せるためには、まずサイト全体を<div>ボックスで囲み、外側の余白marginを使って調整していく必要があります。
では、実際にどのように記述するのか見ていきましょう。
始めに、ページを囲んでいる<div>id名wrapperに横幅の指定をします。
そして、margin: auto;と指定します。




#wrapper {
width: 900px;
margin: auto;
}



ここでのautoは、画面の大きさからページの横幅を引いた数値を、左右均等にわけるという意味があります。
つまり、このautoを指定することで左右の余白が自動で計算されてページが真ん中寄せになるということです。
自動で計算させるためにページの横幅を必ず指定してあげないといけないので、注意しましょう。