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

円形バッジ○×比較表

対応・非対応を丸背景のバッジアイコンで示す静止の比較表。フリープランと有料プランの機能差を視覚的に伝えられる。

staticcss

プレビュー

ソースコード

HTML

<table>
          <thead><tr><th>機能</th><th>フリー</th><th>プロ</th></tr></thead>
          <tbody>
            <tr><td>基本編集</td><td><span class="badge yes">&#10003;</span></td><td><span class="badge yes">&#10003;</span></td></tr>
            <tr><td>チーム共有</td><td><span class="badge no">&#10005;</span></td><td><span class="badge yes">&#10003;</span></td></tr>
            <tr><td>API連携</td><td><span class="badge no">&#10005;</span></td><td><span class="badge yes">&#10003;</span></td></tr>
          </tbody>
        </table>

CSS

.d05-10-11 table{width:100%;border-collapse:collapse;font-size:11px;font-family:sans-serif}
        .d05-10-11 th,.d05-10-11 td{padding:7px 6px;text-align:center;border-bottom:1px solid #eee}
        .d05-10-11 thead th{background:#f8fafc;color:#334155;font-weight:700}
        .d05-10-11 tbody td:first-child{text-align:left;color:#475569}
        .d05-10-11 .badge{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;font-size:11px;font-weight:800}
        .d05-10-11 .yes{background:#dcfce7;color:#16a34a}
        .d05-10-11 .no{background:#fee2e2;color:#dc2626}

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