パーツ番号 05-02-03 ・ CSSのみ

機能比較表(○×)

行ホバーでハイライトし、対応は緑✓・非対応はグレー×で表示。WordPressのプラン比較セクションに。

hovercss

プレビュー

ソースコード

HTML

<table class="d05-02-03-tbl">
          <thead><tr><th>機能</th><th>フリー</th><th>スタンダード</th><th>プロ</th></tr></thead>
          <tbody>
            <tr><td>基本機能</td><td class="y">✓</td><td class="y">✓</td><td class="y">✓</td></tr>
            <tr><td>広告非表示</td><td class="n">×</td><td class="y">✓</td><td class="y">✓</td></tr>
            <tr><td>優先サポート</td><td class="n">×</td><td class="y">✓</td><td class="y">✓</td></tr>
            <tr><td>API連携</td><td class="n">×</td><td class="n">×</td><td class="y">✓</td></tr>
            <tr><td>専任担当</td><td class="n">×</td><td class="n">×</td><td class="y">✓</td></tr>
          </tbody>
        </table>

CSS

.d05-02-03-tbl{border-collapse:collapse;width:100%;font-size:11px}
        .d05-02-03-tbl th,.d05-02-03-tbl td{border:1px solid #e5e7eb;padding:7px 6px;text-align:center}
        .d05-02-03-tbl th{background:#f8fafc;color:#374151;font-weight:700}
        .d05-02-03-tbl td:first-child,.d05-02-03-tbl th:first-child{text-align:left;color:#4b5563}
        .d05-02-03-tbl tbody tr{transition:background .2s}
        .d05-02-03-tbl tbody tr:hover{background:#eef2ff}
        .d05-02-03-tbl .y{color:#10b981;font-weight:800}
        .d05-02-03-tbl .n{color:#cbd5e1;font-weight:700}

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