パーツ番号 09-11-05 ・ CSSのみ

ハート型評価表示(星の代わりにハート)

星の代わりにハートアイコンで評価を示す表示形式。コスメ・雑貨系サイトのやわらかい印象づくりに向く。

staticcss

プレビュー

ソースコード

HTML

<div class="hearts" aria-label="5段階中3">
          <span class="on">♥</span><span class="on">♥</span><span class="on">♥</span><span>♥</span><span>♥</span>
        </div>

CSS

.d09-11-05 .hearts{ font-size:30px; letter-spacing:4px; color:#e8d9dd; }
        .d09-11-05 .hearts .on{ color:#e0507a; }

クラス名 .d09-11-05 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。