CSSでヘッダーの右側にアイコンを配置する3
|いよいよ目的のレイアウトです。
普段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; }
こんな感じです。