unoh.github.com

JavaScriptを使わないスターレイティングの作り方

2007-08-07 11:27:25 +0000

こんにちわ、山下です。
Amazonなどで使われているような商品を☆の数で評価するスターレイティングというものがあります。今回は、CSS The Star Matrix Pre-loadedに紹介されている記事を参考に、その作り方を簡単に紹介しようと思います。

1.画像を用意する



まず次のような1枚の画像を用意します。16×16ピクセルの☆が、横に5個、縦に11個並んでいて、下に向かうに従って色の付いている☆の数が増えているのがポイントです。

star-matrix.gif


2.HTMLを書く



HTMLはとてもシンプルで、ULリストを使います。

<ul class="rating onestar">
<li class="one"><a href="#" title="1 Star">1</a></li>
<li class="two"><a href="#" title="2 Stars">2</a></li>
<li class="three"><a href="#" title="3 Stars">3</a></li>
<li class="four"><a href="#" title="4 Stars">4</a></li>
<li class="five"><a href="#" title="5 Stars">5</a></li>
</ul>


ULタグ自体には、rating と onestar という2つのクラスが指定されていて、ratingは基本的なスタイル指定用です。2番目のonestarで初期値を設定しています。表示したい☆の数に応じて、onestar, twostar, threestar..といったように設定します。
また、それぞれのリストアイテム(li)には識別できるように、one, two, three..といったクラスを割り当てておきます。

3.CSSを書く(1)



基本的なスタイル指定は次のようになります。

.rating{
    width:80px;
    height:16px;
    margin:0 0 20px 0;
    padding:0;
    list-style:none;
    clear:both;
    position:relative;
    background: url(images/star-matrix.gif) no-repeat 0 0;
}
ul.rating li {
    cursor: pointer;
    /*ie5 mac doesn't like it if the list is floated but ie6 does\*/
    float:left;
    /* end hide*/
    text-indent:-999em;/* hide text*/
}
ul.rating li a {
    position:absolute;
    left:0;
    top:0;
    width:16px;
    height:16px;
    text-decoration:none;
    z-index: 200;
}
ul.rating li.one a {left:0}
ul.rating li.two a {left:16px;}
ul.rating li.three a {left:32px;}
ul.rating li.four a {left:48px;}
ul.rating li.five a {left:64px;}


ULタグの背景画像として☆を表示して、その上に16x16ピクセルのアンカーをそれぞれの☆の上に並べるイメージです。また、テキストは表示しないので、text-indent:-999em としておきます。以上は、次の画像を見ると少し分かりやすいかもしれません。

star_layout.png

4.CSSを書く(2)



初期状態で表示する☆の数を設定します。「1.HTMLを書く」でULクラスの2番目に指定したものです。表示する☆の数に応じて、背景画像を縦方向に16ピクセルずつずらして表示します。

.nostar {background-position:0 0}
.onestar {background-position:0 -16px}
.twostar {background-position:0 -32px}
.threestar {background-position:0 -48px}
.fourstar {background-position:0 -64px}
.fivestar {background-position:0 -80px}


5.CSSを書く(3)



最後にここが最大のポイントなのですが、マウスオーバーで☆の表示が変わるようにhover属性を指定します。☆の数に応じて16ピクセルずつずらすのは先ほどと同じなのですが、widthを80ピクセルにして初期表示の背景画像に重ね合わせて表示します(そのためにz-indexを小さくしています)。

ul.rating li a:hover {
    z-index:2;
    width:80px;
    height:16px;
    overflow:hidden;
    left:0;
    background: url(images/star-matrix.gif) no-repeat 0 0
}
ul.rating li.one a:hover {background-position:0 -96px;}
ul.rating li.two a:hover {background-position:0 -112px;}
ul.rating li.three a:hover {background-position:0 -128px}
ul.rating li.four a:hover {background-position:0 -144px}
ul.rating li.five a:hover {background-position:0 -160px}


以上で完成したのが、このサンプルです。






実際にサーバ側にデータを登録するには、もう少しやらなければならないことがあります。アンカーをクリックしたら、JavaScriptでPOSTするようにしたり、サーバ側でデータを受け取ってデータベースに格納するなどをしなければなりません。今回はそこまでは解説できませんでしたが、AJAXでページ遷移なしに処理するのもそんなに難しくないと思いますので、ぜひ挑戦してみてください。

それでは皆さん、良い評価ライフを!