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

○×△三段階評価表

対応・一部対応・非対応を記号で示す三段階評価の静止表。機能比較や仕様一覧のページに向く。

staticcss

プレビュー

ソースコード

HTML

<table>
          <thead>
            <tr><th>機能</th><th>Aプラン</th><th>Bプラン</th></tr>
          </thead>
          <tbody>
            <tr><td>データ連携</td><td class="m">○</td><td class="m">○</td></tr>
            <tr><td>自動レポート</td><td class="p">△</td><td class="m">○</td></tr>
            <tr><td>API公開</td><td class="x">×</td><td class="m">○</td></tr>
            <tr><td>専任担当</td><td class="x">×</td><td class="p">△</td></tr>
          </tbody>
        </table>

CSS

.d05-10-02 table{width:100%;border-collapse:collapse;font-size:11px;font-family:sans-serif}
        .d05-10-02 th,.d05-10-02 td{border:1px solid #e3e3e3;padding:6px 4px;text-align:center}
        .d05-10-02 thead th{background:#f0f2f5;color:#333;font-weight:700}
        .d05-10-02 tbody td:first-child{text-align:left;padding-left:8px;color:#444}
        .d05-10-02 td.m{color:#1a8f4c;font-weight:700;font-size:13px}
        .d05-10-02 td.p{color:#c98a00;font-weight:700;font-size:13px}
        .d05-10-02 td.x{color:#c1362f;font-weight:700;font-size:13px}

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