CSSでヘッダーの右側にアイコンを配置する 1

FROGEGG | 2014/05/07 | CSS | コメントはまだありません

よく見るレイアウトの勉強です。
こんな感じ。

図で見たほうが分かりやすいですね。

ベースのhtmlを準備する

まずはベースとなるhtmlを記述します。
サンプルのように綺麗なデザインにはなりませんが、レイアウトは同じような感じになります。

<!DOCTYPE html>
<html lang="ja-JP">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <div class="header">
            <div class="text">
                <h1><a href="#">TITLE!</a></h1>
                <p>サイトのキャッチフレーズ!</p>
            </div>
            <div class="added">
                追加のパーツをここに記述
            </div>
        </div>
    </body>
</html>

分かりやすく背景をつけておきます。

div.header{
	background-color:#cccccc;
    width:300px;
}
div.text{
	background-color:#f4a1a1;
}
div.added{
	background-color:#a1b7f4;
}

こんな感じです。

レイアウト前に気持ち綺麗にしておく

/*
header
*/
div.header{
    background-color:#cccccc;
    width:300px;
}
div.header h1{
    margin:0;
    font-size:20px;
    line-height:1;
}
div.header h1 a{
    color:#000;
    text-decoration:none;
}
div.header p{
    margin:8px 0 0 0;
    font-size:12px;
    line-height:1;
}
/*
text
*/
div.text{
    background-color:#f4a1a1;
}
/*
added
*/
div.added{
    background-color:#a1b7f4;
}

こんな感じです。

レイアウトしてみる

最後に目的のレイアウトを記述してみます。

/*
header
*/
div.header{
    background-color:#cccccc;
    width:500px;
    *zoom:1;
}
div.header h1{
    margin:0;
    font-size:20px;
    line-height:1;
}
div.header h1 a{
    color:#000;
    text-decoration:none;
}
div.header p{
    margin:8px 0 0 0;
    font-size:12px;
    line-height:1;
}
div.header:after{
    content:"";
    display:block;
    clear:both;
}
/*
text
*/
div.text{
    background-color:#f4a1a1;
    float:left;
}
/*
added
*/
div.added{
    background-color:#a1b7f4;
    float:right;
}

こんな感じです。