cheka.jp 超不定期で更新する写真達。お口直しにどうぞ。

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

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

右側アイコンの例

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

ベースの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;
}

こんな感じです。

経過1

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

/*
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;
}

こんな感じです。

経過2

レイアウトしてみる

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

/*
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;
}

こんな感じです。

経過3

ポイント

header内でfloatを上手に利用して右側、左側でレイアウトします。
header:afterでfloatをクリアしています。
*今回はwidthを固定にしていますがレスポンシブを考慮すると修正する必要があります。

Add a Comment

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

Get Adobe Flash player