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

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

CSSスプライト

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

f:id:yachin29:20160322014753p:plain

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

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

先日作成したカフェサイトのナビゲーションボタンにCSSスプライトを使ってみましょう

f:id:yachin29:20170803205854j:plain


index.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>cafe de FELICA</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<header>
<h1></h1>
</header>
<nav>
<ul>
<li id="home"><a href="#">Home</a></li>
<li id="food"><a href="#">Food</a></li>
<li id="access"><a href="#">Access</a></li>
<li id="info"><a href="#">Info</a></li>
</ul>
</nav>
<div id="content">
<h2>子牛のステーキ アスパラガス添え</h2>
<p id="txt"><img src="img/content01.jpg" alt="">しっとりと柔らかで脂肪分の少ない仔牛のサーロイン(背肉)の芯をスジを取り除き100gのステーキにカットしました。とても柔らかく上品な風味があり、仔牛の美味しさを堪能いただける品!フランス最古の牛と言われるシャロレー牛は世界でも最高級といわれ、とっても貴重とされています。お肉の美味しさそのままに氷点熟成し、急速に液体凍結していますので解凍してそのままお使いいただけます。</p>

</div>
</div><!--/#container-->
<footer></footer>
</body>
</html>

style.css

@charset "utf-8";
html,body,header,nav,footer,div,h1,h2,p,ul,li,a {
	margin:0;
	padding:0;
	line-height:1.0;
}
ul {
	list-style:none;
}
a {
	text-decoration:none;
}
img {
	vertical-align:bottom;
}
body {
	background:#999;
}
#container {
	width:820px;
	margin:0 auto;
	background:#FFF;
	padding-top:10px;
}
header {
	width:800px;
	height:300px;
	background:url(img/header02.jpg) no-repeat;
	margin:0 auto 10px;
}
nav {
	width:800px;
	height:50px;
	background:#6699CC;
	margin:0 auto 10px;
}
ul {
	overflow:hidden;
}
li {
	width:200px;
	height:50px;
	float:left;
}
li a {
	display:block;
	width:100%;
	height:50px;
	background:url(img/nav.jpg) no-repeat left top;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
}
li#food a {
	background:url(img/nav.jpg) no-repeat -200px 0;
}
li#access a {
	background:url(img/nav.jpg) no-repeat -400px 0;
}
li#info a {
	background:url(img/nav.jpg) no-repeat -600px 0;
}
li a:hover {
	background:url(img/nav.jpg) no-repeat left -60px;
}
li#food a:hover {
	background:url(img/nav.jpg) no-repeat -200px -60px;
}
li#access a:hover {
	background:url(img/nav.jpg) no-repeat -400px -60px;
}
li#info a:hover {
	background:url(img/nav.jpg) no-repeat -600px -60px;
}
#content {
	width:800px;
	margin:0 auto ;
	overflow:hidden;
	padding-bottom:20px;
}
h2 {
	text-align:center;
	padding:40px 0 20px;
}
p#txt {
	width:600px;
	line-height:1.8;
	margin:0 auto;
}
p#txt img {
	float: left;
	margin-right:10px;
}
p#photo {
	width:400px;
	float:right;
	margin-right:20px;
}
footer {
	width:100%;
	height:200px;
	background:#505050;
}