webサイト制作の勉強|2018月2月クラスブログ

webサイト制作の勉強に関する解説ブログです。

CSSスプライト

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

f:id:yachin29:20160322014753p:plain

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

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

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

f:id:yachin29:20180306155457p:plain

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSSスプライト</title>
<style>
html,body,ul,li {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: #222;
}
ul {
width: 720px;
margin: 100px auto 0;
overflow: hidden;
}
li {
width:180px;
height: 50px;
float: left;
}
li a {
display: block;
height: 50px;
white-space: nowrap;
text-indent: 100%;
overflow: hidden;
background: url(img/btn.png) no-repeat left top;
}
li:nth-child(2) a {
background: url(img/btn.png) no-repeat -180px top;
}
li:nth-child(3) a {
background: url(img/btn.png) no-repeat -360px top;
}
li:nth-child(4) a {
background: url(img/btn.png) no-repeat -540px top;
}
li a:hover {
background: url(img/btn.png) no-repeat left -60px;
}
li:nth-child(2) a:hover {
background: url(img/btn.png) no-repeat -180px -60px;
}
li:nth-child(3) a:hover {
background: url(img/btn.png) no-repeat -360px -60px;
}
li:nth-child(4) a:hover {
background: url(img/btn.png) no-repeat -540px -60px;
}
</style>
</head>
<body>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">Wordpress</a></li>
<li><a href="#">PHP</a></li>
</ul>
</body>
</html>