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

チェックリスト形式の比較表

項目ごとにチェック済み・未チェックを並べた静止のチェックリスト表。仕様確認や導入前チェックに使える。

staticcss

プレビュー

ソースコード

HTML

<table>
          <tbody>
            <tr><td class="c c1">✓</td><td>SSL対応</td></tr>
            <tr><td class="c c1">✓</td><td>多言語対応</td></tr>
            <tr><td class="c c0"></td><td>オフライン利用</td></tr>
            <tr><td class="c c1">✓</td><td>自動バックアップ</td></tr>
            <tr><td class="c c0"></td><td>カスタムドメイン</td></tr>
          </tbody>
        </table>

CSS

.d05-10-05 table{width:100%;border-collapse:collapse;font-size:11px;font-family:sans-serif}
        .d05-10-05 td{padding:6px 4px;border-bottom:1px solid #eee;vertical-align:middle}
        .d05-10-05 td.c{width:26px;text-align:center;font-weight:700}
        .d05-10-05 td.c1{color:#fff;background:#2f9e5c;border-radius:4px}
        .d05-10-05 td.c0{background:#eee;border-radius:4px}
        .d05-10-05 tr td:last-child{padding-left:10px;color:#444}

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