HTML5 と CSS3 で Web 制作 : Step05 – main section をレイアウト

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

Pocket

ここではメインセクションの設定を行います. 基本的な設定を行っているのみです.

thumb

SAMPLE

サンプルはこちら.

だいぶサイトらしくなってきました.

CODE

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

#main {
    padding: 10px;
    width: 900px;
    
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}

#main .entry {
    margin: 5px;
}

#main .entry h1 {
    font-size: 30px;
}

#main .entry h2 {
    font-size: 20px;
}

#main .entry p
{
    padding-bottom: 15px;
}

POINT

サイズ指定

ここでは特に目新しいことは行っていません. とりあえずサイズを指定しています.

#main {
    padding: 10px;
    width: 900px;
    
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}

お次はサイド部分. 色々と CSS3 を駆使して見た目を調整しています.

TRACK BACK URL

POST COMMENT

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

COMMENT