HTML5 と CSS3 で Web 制作 : Step04 – contents をレイアウト

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

今回はコンテンツ部分をレイアウトします. メイン部分とサイド部分を横並びにしてみましょう!!

thumb

SAMPLE

サンプルはこちら.

サイド部分が横並びになっているのがわかると思います.

CODE

これを style.css に追加します.

#contents {
    display: -webkit-box;
    display: -moz-box;
    display: -o-box;
    display: box;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -o-box-pack: center;
    box-pack: center;
    padding: 20px;
    width: 100%;
    min-width: 800px;
    min-height: 600px;
}

POINT

フレキシブルボックスレイアウト

このブログでしょっちゅう出ている display:box; です. 詳しくはこちらへどぞ~♪

display: -webkit-box;
display: -moz-box;
display: -o-box;
display: box;

box-pack で中身の要素を中央へ

CSS3 で追加されたプロパティ box-pack で center を指定することで中身の要素を中央に寄せることができます.

-webkit-box-pack: center;
-moz-box-pack: center;
-o-box-pack: center;
box-pack: center;

お次はメインセクションです!!

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT