CSS-spriteを使った3カラムレイアウト

CSSスプライトとは複数の画像を１つの画像にまとめる事でサイトの読み込み速度を速くする手法です。FacebookやGoogleでも使われている手法です。background-positionを使用して背景画像を動かします。

メリット
・画像の読み込みが１回で済むので、サイトの読み込み速度が速くなる

デメリット
・サイズやデザインの更新が面倒
・background-positionの理解が必要

ナビゲーションボタンにCSSスプライトを使ってみましょう

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS-spriteを使った3カラムレイアウト</title>
<style>
html,body,h1,ul,li{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
color: #222;
}

.container{
width: 800px;
margin: 0 auto;
}
header{
width: 800px;
height: 300px;
background-color: darksalmon;
margin-bottom: 10px;
}
.g-nav{
width: 800px;
height: 50px;
margin-bottom: 10px;
}
.g-nav>ul{
overflow: hidden;
}
.g-nav li{
width: 200px;
height: 50px;
float: left;
}
.g-nav a{
display: block;
height: 50px;
background: url(img/nav-bg.png)no-repeat 0 0;
white-space: nowrap;
text-indent: 100%;
overflow: hidden;
}
.g-nav li.js>a{
background: url(img/nav-bg.png)no-repeat -200px 0;
}
.g-nav li.wp>a{
background: url(img/nav-bg.png)no-repeat -400px 0;
}
.g-nav li.php>a{
background: url(img/nav-bg.png)no-repeat -600px 0;
}
.g-nav a:hover{
background: url(img/nav-bg.png)no-repeat 0 -60px;
}
.g-nav li.js>a:hover{
background: url(img/nav-bg.png)no-repeat -200px -60px;
}
.g-nav li.wp>a:hover{
background: url(img/nav-bg.png)no-repeat -400px -60px;
}
.g-nav li.php>a:hover{
background: url(img/nav-bg.png)no-repeat -600px -60px;
}
.wrapper{
overflow: hidden;
margin-bottom: 10px;
}
.inner{
float: left;
overflow: hidden;
}
.main{
width: 580px;
height: 500px;
background-color: darkturquoise;
float: right;
}
.sub1{
width: 100px;
height: 500px;
background-color: darkseagreen;
float:left;
margin-right: 10px;
white-space: nowrap;
text-indent: 100%;
overflow: hidden;
}
.sub2{
width: 100px;
height: 500px;
background-color: darkorange;
float: right;
}
footer{
width: 800px;
height: 100px;
background-color: darkgrey;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>CSS-sprite</h1>
</header>
<nav class="g-nav">
<ul>
<li class="html"><a href="#">html</a></li>
<li class="js"><a href="#">javascript</a></li>
<li class="wp"><a href="#">wordpress</a></li>
<li class="php"><a href="#">php</a></li>
</ul>
</nav>

<div class="wrapper">
<div class="inner">
<div class="main">真ん中</div>
<div class="sub1">左</div>
</div>
<div class="sub2">右</div>
</div>

<footer>
</footer>
</div>
</body>
</html>