星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」の星レベルを表現できます。
 |
これは、前ページで用意したスタイルシートソースのうち「starlevel5」クラスの値を書き換えるだけで実現できます。 （star50～star00クラスは、そのまま使用できます。）
具体的な記述内容を、次のページでご紹介いたします。
