パーツ番号 05-10-06 ・ CSSのみ

星評価付き比較表

各評価項目に星の数で満足度を示した静止表。レビューまとめや商品評価セクションに使える。

staticcss

プレビュー

ソースコード

HTML

<table>
          <tbody>
            <tr><td>操作性</td><td class="s"><span>★★★★</span>☆</td></tr>
            <tr><td>デザイン</td><td class="s"><span>★★★★★</span></td></tr>
            <tr><td>コスパ</td><td class="s"><span>★★★</span>☆☆</td></tr>
            <tr><td>サポート</td><td class="s"><span>★★★★</span>☆</td></tr>
          </tbody>
        </table>

CSS

.d05-10-06 table{width:100%;border-collapse:collapse;font-size:11px;font-family:sans-serif}
        .d05-10-06 td{padding:7px 4px;border-bottom:1px solid #eee;color:#444}
        .d05-10-06 td.s{text-align:right;letter-spacing:1px;color:#ddd;font-size:13px}
        .d05-10-06 td.s span{color:#e0a800}

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