忍者ブログ
SOLID DAYS
カウンター

開設から 日が経過しましたよ
おすすめ
最新コメント
無題 名無しさん@そりっどでいず。 [06/19]
上信越道の甘楽PA上下線 ぴよ子彦 [02/26]
オンライン うぃーく(weak) [02/21]
無題 ショウ [02/21]
無題 名無しさん@そりっどでいず。 [02/19]
無題 名無しさん@そりっどでいず。 [02/19]
久しぶりに 名無 [02/18]
無題 栃木 [02/16]
管理人 うぃーく(weak)
画像の上にポインタを乗っける(マウスオーバー、オンマウス)とその画像が切り替わり、さらにクリックするとまた画像が変わる。
そんなインタラクティブな動きを、JavaScirptを使わずHTMLとスタイルシートCSSだけで実現することが出来ます。
ボタンみたいで、文字やただの画像でのリンクとは一味違った感じが出せます。
今回紹介するCSSは、横に並んだトップコンテンツなどを作るのに適しています。


まずその仕組みを簡単に説明します。

画像を切り替えるには、最低でも2枚の画像が必要です。
今回紹介する方法では、通常時、マウスオーバー時、クリック時の3つの画像が必要になります。

では、3枚の画像をそれぞれアップロードすればいいのでしょうか。
しかしその方法では、上のように4つ並べると、3×4=12枚もの画像を用意してアップロードしなくてはいけません。
それは面倒なことだし、3枚の画像がそれぞれ違う場所にあると、マウスオーバー時やクリック時の処理に時間がかかってしまいます。

画像の枚数を節約し、さらに処理を速くするには・・・
画像を1枚にし、それをずらせばいいのです!

今回はCSSを使って画像をずらし、あたかも画像が切り替わってるように見せる技術の紹介です。
初めての人にはとってはとても難しいかもしれません。でも諦めずに頑張れば必ずできます。コードの書き換えが一番重要だと思います。


■準備段階1 画像を用意する

sdx3.PNG

同じサイズの画像が、3つ縦に並んだ状態の画像を作ってください。
※「ボタン工房」を使えば簡単に作る事が出来ます。
「ボタン工房」 - WEBページ製作者向けのボタン作成ツール

この時、「100px×20px」というような、一つの画像の縦サイズと横サイズ把握しておいてください。

上の画像は、「100px×20px」の画像が3つ縦に並んでいて、合計のサイズは「100px×60px」です。
sdx31.png この部分のサイズが「100px×20px」
(pxはピクセルの意味で、サイズの単位です。 参考: ピクセル - Wikipedia / 長さ(length)の単位

ペイントでのサイズの求め方
peintx3.PNG
左メニューの「選択」をクリックし、求めたい部分をドラッグで選択してください。すると右下にその部分のサイズ(単位:px)が表示されます。



■準備段階2 画像をアップロードする

無料ホームページスペースなどに画像をアップロードします。
FC2の無料ホームページとFTP転送~サービス登録~
FC2の無料ホームページとFTP転送~FFFTPの設定~

アップロードした画像へのURLを把握しておいてください。
(例)http://andornot.nobody.jp/picture/exbotan1.png





いよいよHTMLとCSSの記述方法です。
 
上の5枚の画像と、以下の情報を例にして紹介します。
【一つの画像の縦サイズ(px)】20
【一つの画像の横サイズ(px)】100
【画像のURL】
http://andornot.nobody.jp/picture/exbotan1.png
http://andornot.nobody.jp/picture/exbotan2.png
http://andornot.nobody.jp/picture/exbotan3.png
http://andornot.nobody.jp/picture/exbotan4.png
http://andornot.nobody.jp/picture/exbotan5.png


<CSSのソース>

ul#navigation {
    position: relative;
    width: 【一つの画像の横サイズ×横に並べたい画像の数 (例)100×5=500】-px;
    margin: 0;
    height: 【一つの画像の縦サイズ×(例)20】px;
    list-style: none;
    overflow: hidden;
}

ul#navigation li a {
    height: 【一つの画像の縦サイズ(例)20】px;
    position: absolute;
    overflow: hidden;
    padding: 【一つの画像の縦サイズ(例)20】px 0 0 0;
    text-indent: -100em;
    text-decoration: none;
    top: 0;
    width: 【一つの画像の横サイズ(例)100)】px;
}
html>body ul#navigation li a{
    height: 0;
}


li#botan1 a{
    background: transparent url('【画像1へのURL(例)http://andornot.nobody.jp/picture/exbotan1.png') no-repeat 0 0;
    left: 【一つの画像の横サイズ×0(例)0】px;
    }
li#botan2 a{
    background: transparent url('【画像2へのURL(例)http://andornot.nobody.jp/picture/exbotan2.png') no-repeat 0 0;
    left: 【一つの画像の横サイズ×1(例)100】px;
    }
li#botan3 a{
    background: transparent url('【画像3へのURL(例)http://andornot.nobody.jp/picture/exbotan3.png】') no-repeat 0 0;
    left: 【一つの画像の横サイズ×2(例)200】px;
    }
li#botan4 a{
    background: transparent url('【画像4へのURL(例)http://andornot.nobody.jp/picture/exbotan4.png】') no-repeat 0 0;
    left: 【一つの画像の横サイズ×3(例)300】px;
    }
li#botan5 a{
    background: transparent url('【画像5へのURL(例)http://andornot.nobody.jp/picture/exbotan5.png') no-repeat 0 0;
    left: 【一つの画像の横サイズ×4(例)400】px;
    }

li#botan1 a:hover,
li#botan2 a:hover,
li#botan3 a:hover,
li#botan4 a:hover,
li#botan5 a:hover{
    background-position: 0px -【一つの画像の縦サイズ(例)20】px;
    }
li#botan1 a:active,
li#botan2 a:active,
li#botan3 a:active,
li#botan4 a:active,
li#botan5 a:active{
    background-position: 0px -【一つの画像の縦サイズ×2(例)40】px;
    }




<HTMLのソース>

<ul id="navigation">
<li id="botan1"><a href="リンク先のURL" title="【1】" accesskey="0">【1】</a></li>

<li id="botan2"><a href="リンク先のURL" title="【2】" accesskey="1">【2】</a></li>

<li id="botan3"><a href="リンク先のURL" title="【3】" accesskey="2">【3】</a></li>

<li id="botan4"><a href="リンク先のURL" title="【4】" accesskey="3">【4】</a></li>

<li id="botan5"><a href="リンク先のURL" title="【5】" accesskey="4">【5】</a></li>

</ul>



以上です。
青色の部分はそれぞれのボタンのサイズやURLに合わせて、好きなように書き換えてください。【】も消してね。
赤色の部分は書き換えても書き換えなくてもOKです。
ただし、例えば「li#botan1 a:hover,」の部分を「li#home a:hover,」と書き換えたならば、「li#botan1 a:active, 」や「<li id="botan1">」のbotan1も同様に、homeに書き換えてください。

CSSとHTMLのソースを書き足したり消したりすれば、コンテンツの数を変えられます。
この色が付け足した部分です。

<CSSのソース>
(中略)
    }
li#botan5 a{
    background: transparent url('【画像5へのURL(例)http://andornot.nobody.jp/picture/exbotan5.png') no-repeat 0 0;
    left: 【一つの画像の横サイズ×4(例)400】px;
    }
li#botan6 a{
    background: transparent url('【画像6へのURL】') no-repeat 0 0;
    left: 【一つの画像の横サイズ×5(例)500】px;
    }

(中略)
li#botan4 a:hover,
li#botan5 a:hover,
li#botan6 a:hover
{
    background-position: 0px -【一つの画像の縦サイズ(例)20】px;
    }
(中略)
li#botan4 a:active,
li#botan5 a:active,
li#botan5 a:active
{
    background-position: 0px -【一つの画像の縦サイズ×2(例)40】px;
    }


<HTMLのソース>
(中略)
<li id="botan4"><a href="リンク先のURL" title="4" accesskey="3">4</a></li>

<li id="botan5"><a href="リンク先のURL" title="5" accesskey="4">5</a></li>

<li id="botan6"><a href="リンク先のURL" title="6" accesskey="4">6</a></li>
(中略)




完成例

完成したHTMLソース
完成したCSSソース

●テンプレートへの挿入方法
後で書きますっ

PR
RSS Feed Widget
この記事にコメントする
お名前
タイトル
メールアドレス
URL
コメント
パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
無題
う~ん
これをまっていたんだ!!
でも激ムズだね^^
APL2E URL 2008/11/16(Sun)20:57:02 編集
無題
そうとう気持ち悪い、コードばっかりの記事になってしまった。
でも手順に沿って、ちゃんとコードを書き換えが上手くいけば出来る!
ちょっと今も記事編集中。
weak weak★ URL 2008/11/16(Sun)21:20:40 編集
無題
うぉぉマジでやってみてー!!
でもコードが複雑で難しいそぉorz

俺が本格的にテンプレ改造するとき
weak weakさんにはお世話になりそうですw
そんときはよろしくお願いしますよw
RBE太郎 URL 2008/11/16(Sun)21:39:20 編集
無題
書いてることは分かるけどムズイ・・・・orz
盾蟹男 URL 2008/11/16(Sun)22:06:40 編集
無題
>>RBE太郎
確かに複雑・・・
その時は協力するよ!w

>>盾蟹男
次はもっと、すぐ出来るやつを紹介するぞー!
weak weak★ URL 2008/11/17(Mon)17:49:32 編集
無題
これ役に立つなー早速やってみるわ
カイト URL 2008/12/30(Tue)14:44:00 編集
無題
やってみてね
ややこしくてごめんな
weak weak★ URL 2009/01/01(Thu)21:39:07 編集
無題
非常に役立ちました。ありがとうございます!
名無しさん@そりっどでいず。 2009/11/13(Fri)04:52:17 編集
RSS Feed Widget
ブログ内検索
プロフィール
[HN]
うぃーく(weak)
[性別]
男性
職業:
学生
[趣味]
ゲーム、ランニング、WEBデザイン、動画編集、音楽鑑賞
お問い合わせ
ブログランキング
にほんブログ村 スマホ・携帯ブログ iPhoneへ


人みている。
管理
Respect Links
相互リンク
Twitter
RANK
ページランク
Copyright © 2008 SOLID DAYS All rights reserved.
忍者ブログ [PR]