星5つを表示するHTMLソース

それでは、実際に星を表示させるHTMLを記述しましょう。
class属性を使ってクラス名を指定するだけなので簡単です。クラス名を2つ同時に指定している点に注意して下さい。

星5.0: <div class="starlevel5 star50"></div>
星4.0: <div class="starlevel5 star40"></div>
星3.0: <div class="starlevel5 star30"></div>
星2.0: <div class="starlevel5 star20"></div>
星1.0: <div class="starlevel5 star10"></div>
星0.0: <div class="starlevel5 star00"></div>

星4.5: <div class="starlevel5 star45"></div>
星3.5: <div class="starlevel5 star35"></div>
星2.5: <div class="starlevel5 star25"></div>
星1.5: <div class="starlevel5 star15"></div>
星0.5: <div class="starlevel5 star05"></div>

2つのクラス名は半角スペースで区切って指定します。
「starlevel5」クラスは必ず指定します。それに加えて、表示させる星の数にあわせて「star50」~「star00」クラスを指定して下さい。

上記のソースを表示すると、以下のように見えます。

このように、クラス名を変えるだけで、星の値を0.0~5.0まで自在に指定できます。

星の最大値を5以下にするには

ここで使用している画像では、同じ色の星が連続で最大5つ並んでいます。 ですから、表現できる星レベル(星ランク)の最大値は5です。 ということは、最大値は4にも3にもできます。
例えば、下図のように3つの星を抜き出して表示させれば、「最大値3」の星レベルを表現できます。

星の最大値3の場合の表示例
 

これは、前ページで用意したスタイルシートソースのうち「starlevel5」クラスの値を書き換えるだけで実現できます。 (star50~star00クラスは、そのまま使用できます。)

具体的な記述内容を、次のページでご紹介いたします。