ウノウラボ Unoh Labs: JavaScriptを使わないスターレイティングの作り方

こんにちわ、山下です。 Amazonなどで使われているような商品を☆の数で評価するスターレイティングというものがあります。今回は、CSS The Star Matrix Pre-loadedに紹介されている記事を参考に、その作り方を簡単に紹介しようと思います。 1.画像を用意する まず次のような1枚の画像を用意します。16×16ピクセルの☆が、横に5個、縦に11個並んでいて、下に向かうに従って色の付いている☆の数が増えているのがポイントです。 2.HTMLを書く HTMLはとてもシンプルで、ULリストを使います。 <ul class="rating onestar"> <li class="one"><a href="#" title="1 Star">1</a></li> <li class="two"><a href="#" title="2 Stars">2</a></li> <l

[webmarksjp]

css

[kenkitii]

スターレイティング

[thakuro]

「アンカーをクリックしたら、JavaScriptでPOSTするようにした」りAjaxを用いたら、CSSだけでレイアウトする意味がないと思った。

[teruwyi]

"JavaScriptでPOSTするようにしたり"

[kakkunpakkun]

星をつける

[bigchu]

: jsを使わずにスターレイティング

[sakadon]

自信を持ってる人は、かっこいいですね？

[k_37to]

急にマークアップ批判が出るようになったのは、ご時世か

[kits]

マークアップ自体は単純なリンクリストだと思ったけど、ひどいと言われるのはどの辺だろう。(class名? リストであること?)

[denken]

これが最近話題の「CSS脳」の元ネタですか? 新しい概念を既存のHTMLのどの要素で表現するかは思案のしどころですね。

[reef]

スターレイティング

[ag-commerce]

Amazonなどで使われているような商品を☆の数で評価するスターレイティングというものがあります。今回は、CSS The Star Matrix Pre-loadedに紹介されている記事を参考に、その作り方を簡単に紹介しようと思います。

[topotaupe]

どう考えても HTML に喧嘩売ってるとしか思えない

[mattarin]

結局JavaScript使うんじゃン？

[jamg]

class名がアレやも。あー、そか、リストそれ自体が不思議なのか。

[netfan]

レーティング

[saladdays]

レイティングのマークアップ及びCSS記法

[lucky-bag]

こういう酷いマークアップになってしまうのは、CSS側で指定できる範囲が狭いが上に(X)HTML側にしわ寄せが来てしまうからなんだろうなあ。普通にnth-chlidが使えるようになる日は来るんだろ

[iwaim]

見た目しか考えてないからこんな発想になる。CSS脳からは正しいマークアップは生まれないという好例。

[sho]

ここまでやるか。というか、IE6でちゃんと表示されてねぇ

[wakatakahawks]

"JavaScriptでPOSTするようにしたり、サーバ側でデータを受け取ってデータベースに格納するなどをしなければなりません。"あたりのがむしろ知りたい！！今後続報があることを期待。

[I11]

良エントリー。JavaScriptを使わないというあたりがクール。Ｈ社のＫ社長はどうしてこうしなかったのか不思議。

[spiritloose]

なんというHTML

[teru07]

star cssで

[t_43z]

結局サーバにデータ送るときにはJavaScript使うんじゃ。