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;
}
こんな感じです。
レイアウトしてみる
/*
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;
}
こんな感じです。
次回はいよいよ目的のレイアウトにしてみます。
floatを使い慣れないとややこしくなるので、今のうちに整理しておきます。。
このページを読んだ人にオススメのブログ記事です！
About The Author
