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

自社vs競合比較表(2列)

自社サービスと競合他社の条件を2列に並べた静止の比較表。料金ページや導入検討セクションでの訴求に使える。

staticcss

プレビュー

ソースコード

HTML

<table>
          <thead>
            <tr><th></th><th>自社サービス</th><th>競合A社</th></tr>
          </thead>
          <tbody>
            <tr><td>初期費用</td><td class="ok">無料</td><td class="ng">33,000円</td></tr>
            <tr><td>月額料金</td><td class="ok">2,980円〜</td><td class="ng">4,980円〜</td></tr>
            <tr><td>サポート</td><td class="ok">24時間対応</td><td class="ng">平日のみ</td></tr>
            <tr><td>契約期間</td><td class="ok">縛りなし</td><td class="ng">12ヶ月〜</td></tr>
          </tbody>
        </table>

CSS

.d05-10-01 table{width:100%;border-collapse:collapse;font-size:11px;font-family:sans-serif;color:#333}
        .d05-10-01 th,.d05-10-01 td{border:1px solid #e0e0e0;padding:6px 8px;text-align:center}
        .d05-10-01 thead th{background:#1f2937;color:#fff;font-weight:600}
        .d05-10-01 thead th:first-child{background:#1f2937}
        .d05-10-01 tbody td:first-child{text-align:left;background:#f7f7f8;font-weight:600;color:#555}
        .d05-10-01 td.ok{color:#0a7d32;font-weight:700;background:#eafbf0}
        .d05-10-01 td.ng{color:#999}

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