星画像を使ってレベル（ランク）を表示
お勧め度合いや面白さ度合いなどを表現する方法として、星の数でレベル（ランク）を表す方法がよく使われます。例えば以下のような感じです。
 |
| ▲星の数でレベル（ランク）を表現 |
このような表示を、「星画像を5つ並べる」ことで実現すると、少々面倒です。 img要素を5つ並べるとHTMLソースが見にくくなりますし、 レベル（ランク）の値を変更したい場合には、必要なだけimg要素のsrc属性値を書き換えないといけません。
「星を並べた画像」1つだけで実現する
そこで、次のように「星が19個並んだ画像」を1つ用意して、上記のような星レベルの表示を実現させてみましょう。
 |
上記の画像には、星が19個並べられています。 「橙色5つ」→「灰色5つ」→「橙色4つ」→「橙と灰の半分1つ」→「灰色4つ」の順に計19個が並んでいます。
これらの星のうち、スタイルシートで5つだけを表示させれば、星レベル0～5までを0.5単位で表すことができます。
 |
この画像では、橙色・灰色ともに最大5つ連続していますので、最小値0・最大値5を表せます。 表現できるすべての値は、下図の通りです。
 |
画像は1つで、スタイルシートを活用する方がシンプル
スタイルシートを使えば、画像のうち、任意の部分だけを抜き出して表示させることができます。 上記のように、たった1つの画像を用意するだけで、0～5までの値を0.5刻みで自由に表現できます。
HTMLでは、スタイルシートのクラス名を指定するだけで済むので、img要素を並べるよりもソースがシンプルで見やすくなります。 また、値の修正はクラス名を変更するだけで済むので容易です。
今回は、このように「星を並べた1つの画像」から、スタイルシートを使って様々な値の「星レベル（星ランク）」を作る方法をご紹介いたします。
それでは、次のページでスタイルシートの具体的な記述方法をご紹介いたします。
