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

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

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

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

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

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

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

修正点は、ただ横幅を短くするだけです。とても簡単ですね。
クラス名を分けているので、同一ページ内で「最大値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 )




■All Aboutで「お金」について、アンケートを実施中です!
回答いただいた内容をAll About記事企画の参考にさせていただきます
※2021/6/1~2021/6/30まで

・【誰でも回答可】「毎月の家計についてのアンケート」に回答する
抽選で10名にAmazonギフト券1000円分プレゼント

・【40歳以上限定】「相続と親の資産管理についてのアンケート」に回答する
抽選で20名にAmazonギフト券1000円分プレゼント

※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。