求職者支援訓練webサイト制作科授業資料

フェリカテクニカルアカデミー池袋の求職者支援訓練webサイト制作科7月クラスの授業解説ブログです。

CSSスプライト

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

f:id:yachin29:20160322014753p:plain

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

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

今回はナビゲーションボタンにCSSスプライトを使ってみましょう
f:id:yachin29:20160322014851p:plain

ソースコード

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>3カラム</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<nav>
<ul>
<li id="html"><a href="#">HTML</a></li>
<li id="css"><a href="#">CSS</a></li>
<li id="photo"><a href="#">Photoshop</a></li>
<li id="js"><a href="#">Javascript</a></li>
<li id="jq"><a href="#">jQuery</a></li>
</ul>
</nav>
</div>
</body>
</html>

スタイルシート

広告を非表示にする