webデザイン演習実演005

サンプルサイトのナビゲーションを画像に換える


サンプルデータ
それでは、サンプルサイトのナビゲーション部分のテキストを消し背景画像を設定してみましょう。

テキストを消す

CSSフォルダのbase.cssを開きナビゲーションのソースコードを変更していきましょう。
テキストを背景画像にかえると文字間のパディングは必要なくなりますので、paddingプロパティの値は0にします。
そして、テキストを消すためにtext-indent:-9999px;を加え、さらに背景画像の一項目分の高さ34pxも指定します。

#header ul#nav li {
  list-style: none;
  display: block;
  margin: 0;
  padding: 0;
  text-indent: -9999px;
  height: 34px;
  float: left;
}


base.cssを保存してindex.htmlをブラウザで開いてみるとナビゲーションのテキストが消えています。

背景画像を指定する

次にa要素に背景画像を指定します。
まずは、文字色の指定(color:#FFF;)を削除してから、余白と高さを設定します。
そして背景画像との繰り返しを以下のように設定してください。

#header ul#nav li a {
  display: block;
  padding: 0;
  height: 34px;
  text-decoration: none;
  background-image: url(images/nav-items.jpg);
  background-repeat: no-repeat;
}
li要素にidを付ける

このナビゲーション部分の高さは34pxで共通なのですが、幅は項目によって異なります。
そこで項目ごとに別々の幅を指定できるようにli要素にidを指定します。
テキストエディタでindex.htmlを開き以下のようにidを付けて保存します。

<ul id="nav">
<li id="nav-home">ホーム</li>
<li id="nav-products"><a href="products/index.html">製品情報</a></li>
<li id="nav-services"><a href="services/index.html">サービス</a></li>
<li id="nav-about"><a href="about/index.html">会社概要</a></li>
<li id="nav-contact"><a href="contact/index.html">お問い合わせ</a></li>
</ul>
li要素の幅を指定する

テキストエディタでbase.cssを開き次のようにli要素の幅を指定し追加します。

#header ul#nav li#nav-home     { width:  85px; }
#header ul#nav li#nav-products { width:  95px; }
#header ul#nav li#nav-services { width:  98px; }
#header ul#nav li#nav-about    { width:  95px; }
#header ul#nav li#nav-contact  { width: 121px; }


幅は確保されていますが、背景画像の表示位置は指定されていないので
ホームの画像ばかりが表示されています。

背景画像の表示位置を指定する

続けて背景画像の表示位置を指定し追加します。

#header ul#nav li#nav-home a     { background-position:      0 0; }
#header ul#nav li#nav-products a { background-position:  -85px 0; }
#header ul#nav li#nav-services a { background-position: -180px 0; }
#header ul#nav li#nav-about a    { background-position: -278px 0; }
#header ul#nav li#nav-contact a  { background-position: -373px 0; }


ブラウザで再表示させてみると、ホーム以外の項目が表示されるようになっています。
トップページではホームはリンクになっていないため、この段階ではまだ表示されません。

hover時の表示位置を指定する。

続けて、次のようにhover時の表示位置を指定します。
hover時に使う画像は縦方向の真ん中にありますので、
横方向の位置は同じで、縦方向の位置だけ50%に変更すればOKです。

#header ul#nav li#nav-home a:hover     { background-position:      0 50%; }
#header ul#nav li#nav-products a:hover { background-position:  -85px 50%; }
#header ul#nav li#nav-services a:hover { background-position: -180px 50%; }
#header ul#nav li#nav-about a:hover    { background-position: -278px 50%; }
#header ul#nav li#nav-contact a:hover  { background-position: -373px 50%; }


ブラウザで表示させるとhover時に画像が切り替わるようになっています。

リンクではないli要素にclassを付ける

今の状態では、ホームという項目はりんくではないため、背景画像が表示されていません。
そこで、このサンプルサイト全体を通してナビゲーションの現在ページを示す項目には
current-pageというclassを付けることにして、そこに背景をしていすることにします。
テキストエディタでindex.htmlを開いて、以下のようにclass属性を追加して保存してください。

<ul id="nav">
<li id="nav-home" class="current-page">ホーム</li>
<li id="nav-products"><a href="products/index.html">製品情報</a></li>
<li id="nav-services"><a href="services/index.html">サービス</a></li>
<li id="nav-about"><a href="about/index.html">会社概要</a></li>
<li id="nav-contact"><a href="contact/index.html">お問い合わせ</a></li>
</ul>
current-pageの表示位置を指定する

現在のページを示すclass属性の値current-pageが指定されたli要素に背景画像とその表示位置を指定します。
今確認出来るのはホームだけですが、ここですべての項目について指定しましょう。
以下のような指定を追加してください。
背景画像の表示位置としては横方向は同じで、縦方向の位置だけが100%となります。

#header ul#nav li#nav-home.current-page     { background: url(images/nav-items.jpg)      0 100%; }
#header ul#nav li#nav-products.current-page { background: url(images/nav-items.jpg)  -85px 100%; }
#header ul#nav li#nav-services.current-page { background: url(images/nav-items.jpg) -180px 100%; }
#header ul#nav li#nav-about.current-page    { background: url(images/nav-items.jpg) -278px 100%; }
#header ul#nav li#nav-contact.current-page  { background: url(images/nav-items.jpg) -373px 100%; }


ブラウザで表示させるとホームという項目が正しく表示されるようになってます。

カテゴリー: WEB DESIGN 2018-2019 パーマリンク