ニコニコ動画のPSP変換方法、アニメ銀河英雄伝説の壁紙、CSSリファレンスなど、趣味に偏った情報を公開中

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

background-positionを使って、CSSのみで動的メニューを作る

 本日は、CSS(スタイルシート)のみで、動きのあるメニューの作り方を紹介したいと思います。
 特長はbackground-positionを利用することによって画像一枚でスムーズな動きを表現できるところです。

 今回は外部CSSで作ってます。

 まず、こちらの→ サンプルページをご覧ください。 使ったCSSはこちら
ページ上部のメニューにカーソルを合わせると、画像が変わります。
 ↑
 なんでFLASHの上に画像があるの?と思われた方は、前回の記事で紹介していますのでご参照ください。

 こういった仕掛けはメジャーなものとなりましたが、javascriptを使って表現しているサイトが多い気がします。
 しかし、私はjavascriptが好きではないので、この程度ならCSSだけで十分だと思います。

ポイント1: CSSの「:hover」を使って、リンクに動きをつける


 javascriptでは … 2枚の画像をonmouseover、onmouseoutを使って画像変更
 対して、
 CSSでは … リンク要素<a href="..."> に指定可能なクラスである「:link」「 :visited 」「:active」「:hover」を使って、画像変更
※ 「:link」=通常のリンク
  「:visited」=訪問済みのリンク
   「:active」=クリック時のリンク
   「:hover」=マウスが乗っている状態のリンク

ポイント2: background-positionを使って画像を切り替える


 サンプルのメニューに使っている画像の全体像は実はコレ→ top.png

 通常のリンク時とマウスを乗せたときのリンクを並べて一枚の画像にしてあります。

仕掛けは単純、
まず、メニュー画像を背景として表示させて、
 ①通常時は画像の上半分だけ表示させます。
  (↑ display: blockとwidth・heightを指定)
 ②リンクをクリックしたとき(:active)とマウスを乗せたとき(:hover)に画像の下半分を表示させます。
  (↑ background-positionで背景位置をずらして表示)


ソースとCSSは以下
 ※メニューの"HOME"に使う部分のみ太字で見やすくしてみました。一つの仕掛けにどの程度の文字数が必要か分かると思います。

HTML
<li><a href=" リンク先 " id="top" title="トップページ"><img src="menu_dummy.gif" width="110" height="27" alt="トップページ"></a></li>
<li><a href=" リンク先 " id="intro" title="紹介"><img src="menu_dummy.gif" width="110" height="27" alt="紹介"></a></li>
<li><a href=" リンク先 " id="joboffer" title="求人"><img src="menu_dummy.gif" width="110" height="27" alt="求人"></a></li>
<li><a href=" リンク先 " id="link" title="リンク"><img src="menu_dummy.gif" width="110" height="27" alt="リンク"></a></li>


CSS
/* ここからメニュー部分全体 */
ul {width: 450px; /* メニュー全体の幅 */
margin: 0;
padding: 0;}
ul li { float: left;
list-style: none;
list-style-type: none; /* リストマーク非表示 */}
/* 『 Top 』 の設定 */
ul li a#top {
display: block;
width: 110px; height: 27px;
margin-left: 0px;

background: transparent url(top.png) no-repeat 0px 0px; }
ul li a#top:hover,
ul li a#top:active { /* マウスオーバー・クリック時の設定 */
background-position: 0px -27px; /* 画像位置の指定 */}

/* 『 Introduction 』 の設定 */
ul li a#intro {
display: block;
width: 110px; height: 27px; 
margin-left: 0px;
background: transparent url(intro.png) no-repeat 0px 0px; }
ul li a#intro:hover,
ul li a#intro:active { /* マウスオーバー・クリック時の設定 */
background-position: 0px -27px; /* 画像位置の指定 */}
/* 『Job Offer 』 の設定 */
ul li a#joboffer {
display: block;
width: 110px; height: 27px; 
margin-left: 0px;
background: transparent url(job.png) no-repeat 0px 0px; }
ul li a#joboffer:hover,
ul li a#joboffer:active { /* マウスオーバー・クリック時の設定 */
background-position: 0px -27px; /* 画像位置の指定 */}
/* 『Link 』 の設定 */
ul li a#link {
display: block;
width: 110px; height: 27px; 
margin-left: 0px;
background: transparent url(link.png) no-repeat 0px 0px; }
ul li a#link:hover,
ul li a#link:active { /* マウスオーバー・クリック時の設定 */
background-position: 0px -27px; /* 画像位置の指定 */}
/* ここまで、メニュー部分全体 */



読んでもよく意味が分からない人はこちらのサイトをご利用ください。
 とほほのWWW入門
 TAG index - スタイルシート CSS[スタイルシートのカテゴリー一覧]

さて、このようなHTMLソース・CSSの解説を以下に↓

●なぜメニューをul、liで書いたのか?
 詳しくは知らないが、ソース中でメニューであることが分かりやすいため、SEO対策とかになるらしいです。

●"menu_dummy.gif" ってなに?
 画像読み込みOFFにしている人のための保険なので<img ~~~>は消してもOK。

●なぜメニュー画像を背景画像にしたのか?
 メニューはフレームでも使わない限りすべてのページに設けるものであり、ソースが長ったらしいとファイルサイズがでかくなるし、SEO対策的に邪魔になるので、CSSで外部ファイルとして指定できる「背景」にしました。

●なぜ1枚の画像にしたのか?
 javascriptの場合はページ読み込み時にscriptを使って、切り替えに使う画像をあらかじめユーザーにロードさせます。それによってストレスのないスムーズな画像変更を可能にします。
 しかし、CSSのみの場合はscriptであらかじめ画像を読み込ませておくことが出来ないため、はじめにカーソルを乗せたときに切り替え後の画像をロードする間、若干のタイムラグが生じてしまいます
 ページ読み込み時に切り替え前後の2つの画像を読ませることはscriptでないと難しいので、2つの画像を一つにまとめてしまえばいいと考えたわけです。

 といってもこれは私のオリジナルではなくて、昔どこかでこのようなメニューを見て感心した覚えがあるからですが…



このページの関連記事
関連記事
スポンサーサイト

テーマ : ホームページ・ブログ制作
ジャンル : コンピュータ

コメントの投稿












管理者にだけ表示を許可する
トラックバック
この記事のトラックバックURL

メニュー

以下はクリックすると、下位メニューに飛びます。

↑TOP ↑TOP ↑TOP ↑TOP ↑TOP ↑TOP ↑TOP ↑TOP ----------------------------
メニューにない記事はサイトマップへ
カテゴリー
プロフィール

みやま

Author:みやま

地域ブランド力 45位の茨城県在住
20代/女
  • ガンダムと攻殻機動隊と銀河英雄伝説が大好きだ
  • 士郎正宗の描く尻は素晴らしいと思う
--------------------
近況報告、更新情報などツイートしていく予定です。
ツイッターへのリンク@miyama_tweet

リンク
↓バナーとHTMLタグ↓

<a href="http://gogosanzi.blog46.fc2.com/" target="_blank" title="AGPP~趣味に偏った情報を公開"><img src="http://blog-imgs-37.fc2.com/g/o/g/gogosanzi/agpp-bunner.jpg" alt="agpp-bunner" border="0" width="200" height="40"></a>
    ↓登録させていただきました↓
  • loghsearch
銀河英雄伝説名言録


present by 田中芳樹:徳間書店「銀河英雄伝説」
 
  
AGPP TOP > スポンサー広告 > スポンサーサイト> HTML活用 > background-positionを使って、CSSのみで動的メニューを作る
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。