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

星の最大値を5以下にするスタイルシート

星の最大値が5であるスタイルシート（starlevel5クラス）は、以下のソースでした。これをベースにして値を書き換えるだけで、最大値を5以下にできます。 （star50～star00クラスは、修正することなくそのまま使用できます。）

.starlevel5 {
   background-image: url('starlevels.gif'); /* 星画像 */
   background-repeat: no-repeat;  /* 繰り返しはナシ */
   width: 75px;                   /* 横幅は星５つ分 */
   height: 15px;                  /* 高さは星１つ分 */
}

星の最大値を4にするには、以下のように記述します。

.starlevel4 {
   background-image: url('starlevels.gif'); /* 星画像 */
   background-repeat: no-repeat;  /* 繰り返しはナシ */
   width: 60px;                   /* 横幅は星４つ分 */
   height: 15px;                  /* 高さは星１つ分 */
}

星の最大値を3にするには、以下のように記述します。

.starlevel3 {
   background-image: url('starlevels.gif'); /* 星画像 */
   background-repeat: no-repeat;  /* 繰り返しはナシ */
   width: 45px;                   /* 横幅は星３つ分 */
   height: 15px;                  /* 高さは星１つ分 */
}

修正点は、ただ横幅を短くするだけです。とても簡単ですね。
クラス名を分けているので、同一ページ内で「最大値5の星レベル」と「最大値3の星レベル」を同時に使用可能です。

星の最大値を5以下にする場合のHTML

HTMLの書き方も、先の例と同じです。
上記で作成した「starlevel4」または「starlevel3」クラスと、実際の値を指定する「star50」～「star00」クラスの2つを同時に指定します。

■最大値3の場合：

星3.0: <div class="starlevel3 star30"></div>
星2.0: <div class="starlevel3 star20"></div>
星1.0: <div class="starlevel3 star10"></div>
星0.0: <div class="starlevel3 star00"></div>

星2.5: <div class="starlevel3 star25"></div>
星1.5: <div class="starlevel3 star15"></div>
星0.5: <div class="starlevel3 star05"></div>

■最大値4の場合：

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

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

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

▲ブラウザでの見え方の例。実際にブラウザで表示確認する場合はこちらへ

なお、星の最大値を6以上にしたい場合は、星画像そのものを変える必要があります。 例えば最大値を10にしたい場合は、同色の星が連続で最低10個並んでいる画像を作らなければなりません。 望みの数に応じて、画像を作ってみて下さい。

おわりに

今回は、星が並んだ画像を1つ用意するだけで、様々な値の星レベル（星ランク）を自在に作る方法をご紹介いたしました。
星画像を1つ1つ掲載するよりも、HTMLソースがシンプルで見やすくなるのでお勧めです。ぜひ、ご活用下さい。

なお、本記事で使用した星画像（下記）は、必要であればご自由にコピーしてご使用下さって構いません。
（ starlevels.gif ）