CSS-spriteを使ったナビゲーションボタンの作成 - webサイトデザインAI入門科授業用ブログ

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

f:id:yachin29:20160322014753p:plain

f:id:yachin29:20210514091349p:plain

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

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

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

f:id:yachin29:20210514142237p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS-Spriteを実装してみる</title>
<style>
html,body,h1,ul,li{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
color: #222;
}

h1{
text-align: center;
padding: 30px 0;
}
.g-nav{
width: 960px;
height: 50px;
margin: 0 auto;
}
.g-nav>ul{
display: flex;
}
.g-nav li{
width: 20%;
height: 50px;
}
.g-nav a{
display: block;
height: 50px;
background: url(img/bg.png)no-repeat 0 0;
white-space: nowrap;
text-indent: 100%;
overflow: hidden;
}
.g-nav li:nth-of-type(2)>a{
background: url(img/bg.png)no-repeat -192px 0;
}
.g-nav li:nth-of-type(3)>a{
background: url(img/bg.png)no-repeat -384px 0;
}
.g-nav li:nth-of-type(4)>a{
background: url(img/bg.png)no-repeat -576px 0;
}
.g-nav li:nth-of-type(5)>a{
background: url(img/bg.png)no-repeat -768px 0;
}
.g-nav a:hover{
background: url(img/bg.png)no-repeat 0 -60px;
}
.g-nav li:nth-of-type(2)>a:hover{
background: url(img/bg.png)no-repeat -192px -60px;
}
.g-nav li:nth-of-type(3)>a:hover{
background: url(img/bg.png)no-repeat -384px -60px;
}
.g-nav li:nth-of-type(4)>a:hover{
background: url(img/bg.png)no-repeat -576px -60px;
}
.g-nav li:nth-of-type(5)>a:hover{
background: url(img/bg.png)no-repeat -768px -60px;
}
</style>
</head>
<body>
<header>
<h1>CSS-Spriteを実装してみる</h1>
</header>
<nav class="g-nav">
<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>
<li><a href="#">photoshop</a></li>
</ul>
</nav>
</body>
</html>