文字の画像(イメージ)化
cman.jp cman.jp > パーツ作成メニュー > 吹き出しのデザイン > 星の採点表示

星(★)の採点表示のCSS生成

口コミサイトやレビューの評価で使用される星(★)の採点表示をCSSのみで作成することができます。

当ページでは、簡単な操作で星(★)の数や色を指定し、CSSを自動で作成できます。

星(★)の採点表示を作ろう

評価する星(☆)の総数(最大6個)
評価した星(★)の数(最大6個、0.1刻み)
評価前の星(☆)の色
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度
評価した星(★)の色
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度
星(★)の大きさ(10px~100px)
使用したhtml
<div class="rateoya">
  <div class="rate"></div>
</div>
生成したCSS
.rateoya {
  height:100px;
}
.rate {
  position:relative;
  font-size:100px;
}
.rate:before {
  position:absolute;
  display:inline-block;
  content:'★★★★★★';
  color:#999999;
  white-space:nowrap;
  top: 0;
  left: 0;
  line-height:1em;
}
.rate:after {
  position:absolute;
  display:inline-block;
  content:'★★★★★★';
  color:#ffff1a;
  white-space:nowrap;
  top: 0;
  left: 0;
  line-height:1em;
  overflow:hidden;
  width:100px;
}
ページTOP
広告
広告

注意事項

特になし

ページTOP
広告

生成できるホームページ・パーツ一覧
ご利用時の注意事項・制約事項
よくあるご質問
何で無料なの?
生成コードに利用制限はある?
生成コードに保証はある?
jQueryで生成できない?

広告
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット
運営:株式会社シーマン