CSS 3のボックスレイアウトでコンテンツを画面の中央に配置する

エ・ビスコム・テック・ラボ
2008-12-03 19:55:01
  • このエントリーをはてなブックマークに追加

(1)コンテンツを用意する

最初に、画面の中央に配置したいコンテンツを用意する。ここでは、見出しと画像を

でグループ化して、水色の枠線で囲んだものを用意した。横幅は画像に合わせて350ピクセルに指定しているが、高さを指定する必要はない。

用意したコンテンツ 用意したコンテンツ
div{
border: solid 4px skyblue;
width: 350px;
}

PHOTO

PHOTO

ブラウザで表示を確認する

(2)html要素とbody要素をブラウザ画面いっぱいに表示する

 次に、〜でHTML/XHTMLソース全体を囲んだhtml要素と、〜でコンテンツ全体を囲んだbody要素をブラウザ画面いっぱいに表示する。

 これらの要素に罫線を表示してみると、標準ではコンテンツに合わせた大きさであることがわかる。ここでは、html要素には赤色の、body要素にはオレンジ色の罫線を表示した。

html要素とbody要素に罫線を表示したもの html要素とbody要素に罫線を表示したもの
html{
border: solid 5px red;
}

body{
border: solid 5px orange;
}
ブラウザで表示を確認する

 html要素とbody要素にwidthとheightプロパティを指定して、横幅と高さを「100%」に指定すると、次のようにブラウザ画面いっぱいに表示することができる。このとき、マージンとパディングも「0」にして、余計な余白が入らないようにしておく。

html要素とbody要素をブラウザ画面いっぱいに表示したもの html要素とbody要素をブラウザ画面いっぱいに表示したもの
html, body{
width:100%;
height:100%;
margin: 0;
padding: 0;
}
ブラウザで表示を確認する

 大きさを指定したら、html要素とbody要素の罫線は削除しておく。

html要素とbody要素の罫線を削除したもの html要素とbody要素の罫線を削除したもの
ブラウザで表示を確認する

(3)body要素をボックス要素にする

 body要素をボックス要素として表示するため、「display:box」と指定する。すると、子要素であるコンテンツ部分が、body要素と同じ高さで表示される。なお、displayプロパティの値は、Firefoxでは「-moz-box」、Safariでは「-webkit-box」と記述する。

body要素をボックス要素として表示したもの body要素をボックス要素として表示したもの
body{
display: -moz-box;
display: -webkit-box;
}
ブラウザで表示を確認する

(4)コンテンツの縦方向の配置を指定する

 body要素にbox-alignプロパティを適用して、縦方向のコンテンツの配置を指定する。ここでは中央に配置するため、「box-align:center」と指定している。また、この指定により、コンテンツは(1)の状態と同じ高さで表示される。

 なお、box-alignプロパティは、Firefoxでは「-moz-box-align」、Safariでは「-webkit-box-align」と記述する。

縦方向の配置を指定したもの 縦方向の配置を指定したもの
body{
display: -moz-box;
display: -webkit-box;
-moz-box-align: center;
-webkit-box-align: center;
}
ブラウザで表示を確認する

(5)コンテンツの横方向の配置を指定する

 body要素にbox-packプロパティを適用して、横方向のコンテンツの配置を指定する。ここでは中央に配置するため、プロパティの値を「box-pack:center」と指定している。これで、コンテンツを画面の中央に配置することができる。

 なお、box-pacプロパティは、Firefoxでは「-moz-box-pack」、Safariでは「-webkit-box-pack」と記述する。

横方向の配置を指定したもの 横方向の配置を指定したもの
body{
display: -moz-box;
display: -webkit-box;
-moz-box-align: center;
-webkit-box-align: center;
-moz-box-pack: center;
-webkit-box-pack: center;
}
ブラウザで表示を確認する
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]