画像1つで様々な星レベル(ランク)を表示

星画像を使ってレベル（ランク）を表示

お勧め度合いや面白さ度合いなどを表現する方法として、星の数でレベル（ランク）を表す方法がよく使われます。例えば以下のような感じです。

このような表示を、「星画像を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つの画像」から、スタイルシートを使って様々な値の「星レベル（星ランク）」を作る方法をご紹介いたします。

それでは、次のページでスタイルシートの具体的な記述方法をご紹介いたします。