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

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

前回の続きです。

今回は右側に配置するアイコンのデザインをチェックしてみます。
アイコンはアイコンフォントを利用します。

ベースのhtmlを準備する

<!DOCTYPE html>
<html lang="ja-JP">
    <head>
        <meta charset="UTF-8">
        <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
        <style>
        </style>
    </head>
    <body>
        <div class="menu">
            <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>
    </body>
</html>
/*
menu
*/
div.menu{
    padding:20px;
    background-color:#cccccc;
}
div.menu ul{
    margin:0;
    padding:0;
    font-size:14px;
    line-height:1.4;
    list-style:none;
}
div.menu li a{
    display:block;
    padding:10px;
    color:#000;
    text-decoration:none;
}

こんな感じです。

経緯1

レイアウトしてみる

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

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

こんな感じです。

経緯2

次回はいよいよ目的のレイアウトにしてみます。
floatを使い慣れないとややこしくなるので、今のうちに整理しておきます。。

Get Adobe Flash player