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

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

いよいよ目的のレイアウトです。

普段cssを触ることが少ないので久しぶりに脳を使った気がします。
定期的に専門外をやることは必要ですね。

ガッチャンコする

前回と前々回でベースを作成しているので一気に記述します。

<!DOCTYPE html>
<html lang="ja-JP">
    <head>
        <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">        
        <meta charset="UTF-8">
    </head>
    <body>
        <div class="header">
            <div class="text">
                <h1><a href="#">TITLE!</a></h1>
                <p>サイトのキャッチフレーズ!</p>
            </div>
            <div class="added">
                <ul>
                    <li><a href="#"><i class="fa fa-twitter-square"></i><span>Twitter</span></a></li>
                    <li><a href="#"><i class="fa fa-facebook-square"></i><span>FaceBook</span></a></li>
                    <li><a href="#"><i class="fa fa-google-plus-square"></i><span>Google+</span></a></li>
                    <li><a href="#"><i class="fa fa-rss-square"></i><span>Rss</span></a></li>
                </ul>
            </div>
        </div>
    </body>
</html>

/*
header
*/
div.header{
    background-color:#cccccc;
    width:auto;
    *zoom:1;
}
div.header h1{
    margin:0;
    font-size:20px;
    line-height:1.6;
}
div.header h1 a{
    color:#000;
    text-decoration:none;
}
div.header p{
    margin:8px 0 0 0;
    font-size:14px;
    line-height:1.4;
}
div.header:after{
    content:"";
    display:block;
    clear:both;
}
/*
text
*/
div.text{
    background-color:#f4a1a1;
    float:left;
    padding:10px; 
}
/*
added
*/
div.added{
    background-color:#a1b7f4;
    float:right;
    padding:10px;                
}
div.added ul{
    margin:0;
    padding:0;
    font-size:14px;
    line-height:1.4;
    list-style:none;
    *zoom:1;
}
div.added ul:after{
    content:"";
    display:block;
    clear:both;
}
div.added li{
    float:left;
}
div.added li a{
    display:block;
    padding:10px;
    color:#000;
    text-decoration:none;
}
div.added li a span{
    display:inline-block;
    text-indent:-9999px;
}

div.added li a i{
    font-size:40px;
    color:#e16;
}
div.added a:hover i{
    color:#f80;
}

こんな感じです。