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

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

CSS Spriteの記述

CSS Sprite

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ホバーの練習</title>
<style>
html,body,ul,li {
  margin: 0;
  padding: 0;
}
ul { list-style: none; }

.nav {
  width: 800px;
  margin: 50px auto;
}
  .nav ul {
    overflow: hidden;
  }
  .nav li {
    float:left;
    width: 160px;
  }
  .nav li a {
    display: block;
    width: 160px;
    height: 50px;
    background: url(img/button.png) no-repeat left top;
    white-space: nowrap;
    text-indent: 100%;
    overflow: hidden;
  }
  .nav li a:hover {
    background-position: left bottom;
  }
  .nav li.food a {
    background-position: -160px top;
  }
  .nav li.food a:hover {
    background-position: -160px bottom;
  }
  .nav li.drink a {
    background-position: -320px top;
  }
  .nav li.drink a:hover {
    background-position: -320px bottom;
  }
  .nav li.info a {
    background-position: -480px top;
  }
  .nav li.info a:hover {
    background-position: -480px bottom;
  }
  .nav li.contact a {
    background-position: -640px top;
  }
  .nav li.contact a:hover {
    background-position: -640px bottom;
  }
</style>
</head>
<body>
<div class="nav">
<ul>
<li class="home"><a href="#">ホーム</a></li>
<li class="food"><a href="#">カフェフード</a></li>
<li class="drink"><a href="#">カフェドリンク</a></li>
<li class="info"><a href="#">インフォメーション</a></li>
<li class="contact"><a href="#">お問い合わせ</a></li>
</ul>
</div>
</body>
</html>


応用課題

ナビゲーションボタン作成
  • 横幅「140px」高さ「50px」のナビゲーションボタンを7個作成
  • 「トップページ TOPPAGE」「ソリューション SOLUTION」「実績紹介 ACHIEVEMENT」「パートナー PARTNERS」「カスタマー CUSTOMERS」「会社概要 COMPANY」「お問い合わせ CONTACT」
広告を非表示にする