にしし ふぁくとりー(西村文宏 個人サイト)

Presented by Nishishi via Movable Type. Last Updated: 2015/09/22. 13:20:25.

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

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

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

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

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

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

コメント

コメント数: 0件

コメント投稿欄 この日記に対するコメント投稿を歓迎します。

保存しますか?



※本文中にURLは書けません。(書くと投稿が拒否されますのでご注意下さい。)

※投稿内容は、実際にページ上に掲載される前に、管理者によって確認される設定にしている場合があります。その場合は、投稿後にその旨が表示されます。たいてい1~2日以内には表示されるはずですので、気長にお待ち願います。m(_ _)m

トラックバック

このエントリーへのトラックバックURLを表示するにはここをクリック
※スパム防止のため、トラックバックURLは別ウインドウで表示します。(JavaScriptが有効でないと表示されません。)

--- 当サイト内を検索 ---