2009年12月21日(月) 18時06分45秒 [仕事]

画像1つで星ランクを表示させる方法

「星ランク」と言われても大半の人々は何のことか分からないんじゃないかと思うんですが(^_^;)、他に何と書けば分かりやすいか思いつかなかったのでそう書いてみたんですが……。
というわけで、12月2本目の記事を書きました。

↑こんな感じの「星ランク」を、用意する画像はたった1つで、0.0～5.0まで0.5単位で作る方法を説明しています。

単純に星に色を付けるだけならテキストでも構いませんが、星の半分だけに色を付けたりするには画像を使う必要があります。また、ここではシンプルな星を使っていますが、もっと凝ったイラストを使ってランクを表現することももちろんできます。

■画像1つで様々な星レベル(ランク)を表示（＠All About ホームページ作成）

画像が1つだけなので読み込みが早く、HTMLソースもスパゲッティにならずに済みます。スタイルシートを事前にちょちょっと書いておけば済むので、お手軽です。
そんな方法を解説。