はてなブックマーク - ウノウラボ Unoh Labs: JavaScriptを使わないスターレイティングの作り方

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

labs.unoh.net

タグ : css JavaScript tips rating design HTML webデザイン dev web star

コンピュータ・IT 145 users

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

最終更新時間: 2007年08月07日21時37分

▼ブログで紹介する

みんなのブックマーク人気（0）新着

siokou_jp css
レーティング 2010/09/19
webmarksjp Web開発, javascript, web, html, tips, あとで
css 2008/07/14
kenkitii css, javascript
スターレイティング 2007/08/22
kakkunpakkun web, design, html, css
星をつける 2007/08/12
bigchu css, webdesign, tutorial
: jsを使わずにスターレイティング 2007/08/10
sakadon CSS脳, css
自信を持ってる人は、かっこいいですね？ 2007/08/10
k_37to (X)HTML, CSS, star, rating
急にマークアップ批判が出るようになったのは、ご時世か 2007/08/10
kits css, html
マークアップ自体は単純なリンクリストだと思ったけど、ひどいと言われるのはどの辺だろう。(class名? リストであること?) 2007/08/09
denken CSS, HTML, アイデア, JavaScript
これが最近話題の「CSS脳」の元ネタですか? 新しい概念を既存のHTMLのどの要素で表現するかは思案のしどころですね。 2007/08/09
ag-commerce
Amazonなどで使われているような商品を☆の数で評価するスターレイティングというものがあります。今回は、CSS The Star Matrix Pre-loadedに紹介されている記事を参考に、その作り方を簡単に紹介しようと思います。 2007/08/09
topotaupe これはひどい, html
どう考えても HTML に喧嘩売ってるとしか思えない 2007/08/09
rusica CSS, HTML, これはひどい
ﾅﾆｺﾚ。とりあえずそれはリストじゃないでしょ。 2007/08/09
mattarin
結局JavaScript使うんじゃン？ 2007/08/09
jamg css, これはひどい
class名がアレやも。あー、そか、リストそれ自体が不思議なのか。 2007/08/08
hkn css脳
こんな酷いマークアップで、text-indent:-999em とか評判悪い書き方をしてまでCSSでやる理由は? 表示だけしてどうするの? んで何故こんな記事がここまで批判もされずにブクマされたの? JS使わないのがクールだなんて馬鹿げてる 2007/08/08
netfan css
レーティング 2007/08/08
saladdays css, design, javascript, tips
レイティングのマークアップ及びCSS記法 2007/08/08
lucky-bag css, rating
こういう酷いマークアップになってしまうのは、CSS側で指定できる範囲が狭いが上に(X)HTML側にしわ寄せが来てしまうからなんだろうなあ。普通にnth-chlidが使えるようになる日は来るんだろ 2007/08/08
vantguarde markup
マークアップを考えてないとこうなる。みんなCSS脳なのかなあ。 2007/08/08
iwaim これはひどい, html, css, CSS脳, 後でネタにする
見た目しか考えてないからこんな発想になる。CSS脳からは正しいマークアップは生まれないという好例。 2007/08/08