読者です 読者をやめる 読者になる 読者になる

求職者支援訓練webサイト制作科1月クラス

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

CSSスプライト

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

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>1カラムレイアウトの復習</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<header>
<h1>Herb Kitchen</h1>
<p id="main_txt">イタリアの家庭料理のオリジナルレシピを紹介します。</p>
<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>
</header>
<div class="food_menu">
<h2>タコのカルパッチョ</h2>
<p><img src="img/food_01.jpg" alt="タコのカルパッチョ">
たこは低脂肪、低カロリーなだけでなく、コレステロールの上昇を抑える働きのあるタウリンが含まれます。<br>
レモン果汁などさわやかな酸味、セロリやかいわれ菜などの香りのある野菜を上手に加えると、塩分を抑えてもおいしいおつまみになります。<br>
たこのうまみを引き立てる、さわやかな青じそペーストはパスタやソテーのソースにも使えて便利な一品です。ニンニクや香草の香りが特長のソースは、素材の味をひき立てるビールや辛口の白ワインにピッタリ!スパークリングワインと合わせて、ちょっぴり気の効いた前菜としてもおすすめです。</p>
</div>

<div class="food_menu">
<h2>しらすのペペロンチーノ</h2>
<p><img src="img/food_02.jpg" alt="しらすのペペロンチーノ">
おうちでのランチはお手軽にすませたいですよね♪かつ、美味しければなおうれしい!今回は、ごはんの友のしらすを使った簡単パスタ、しらすのペペロンチーノをご紹介します。<br>
味付けはしらすの塩気とパスタの茹で汁を使います。ソースをあらかじめ作って茹で上がったパスタを絡めるので失敗知らずですよ。<br>
ペペロンチーノは基本の素材がダイレクトに出ます。スパゲティ、オイル、塩、にんにく、唐辛子。全てが上質だと出来上がりも素晴らしく違いますよ。</p>
</div>
<footer>
<p><small>Copyright &copy; <a href="#">Herb Kitcten Co.,Ltd.</a></small></p>
</footer>
</div>
</body>
</html>

スタイルシート

@charset "utf-8";
/* CSS Document */
html,body,h1,h2,p,small,ul,li {
  margin:0;
  padding:0;
  line-height:1.0;
}
ul {
  list-style:none;
}
a {
  text-decoration:none;
}
img {
  vertical-align:bottom;
}

/*レイアウト*/
body {
  background:url(img/bg.jpg) no-repeat right top;
}
#container {
  width:800px;
  margin: 0 auto;
}
header {
  margin-bottom:40px;
}
h1 {
  color: #339900;
  padding: 40px 0 20px;
  font-size:46px;
  font-weight:normal;
  font-family:Helvetica, Arial, sans-serif;
  letter-spacing:0.5em;/*文字間を空ける*/
}
#main_txt {
  margin-bottom:30px;
}
ul {
  width:800px;
  height:50px;
  overflow:hidden;
}
li {
  width:200px;
  height:50px;
  float:left;
}
li a {
  display:block;
  background: url(img/btn.png) no-repeat left top;
  line-height:50px;
  text-align:center;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
}
li#food a {
  background-position:-200px 0;
}
li#access a {
  background-position:-400px 0;
}
li#info a {
  background-position:-600px 0;
}
li#home a:hover {
  background-position:0 -60px;
}
li#food a:hover {
  background-position:-200px -60px;
}
li#access a:hover {
  background-position:-400px -60px;
}
li#info a:hover {
  background-position:-600px -60px;
}
h2 {
  color: #339900;
  border-left:20px solid #339900;
  padding-left: 15px;
  margin-bottom: 20px;
}
.food_menu {
  margin-bottom:40px;
}
.food_menu p {
  line-height:1.6;
}
.food_menu img {
  float: left;
  margin-right:10px;
}
footer p {
  padding-bottom:20px;
}
広告を非表示にする