← 静的パーツギャラリーへ戻る

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

プラン別機能マトリクス(3プラン×複数機能)

縦に機能、横に3つの料金プランを並べた静止マトリクス。料金ページのプラン比較に使える。

staticcss

プレビュー

ソースコード

HTML

<table>
          <thead>
            <tr><th>機能</th><th>Light</th><th>Standard</th><th>Pro</th></tr>
          </thead>
          <tbody>
            <tr><td>ユーザー数</td><td>1名</td><td>5名</td><td>無制限</td></tr>
            <tr><td>ストレージ</td><td>1GB</td><td>50GB</td><td>500GB</td></tr>
            <tr><td>解析機能</td><td class="no">−</td><td class="yes">✓</td><td class="yes">✓</td></tr>
            <tr><td>優先サポート</td><td class="no">−</td><td class="no">−</td><td class="yes">✓</td></tr>
          </tbody>
        </table>

CSS

.d05-10-03 table{width:100%;border-collapse:collapse;font-size:10.5px;font-family:sans-serif}
        .d05-10-03 th,.d05-10-03 td{border:1px solid #e5e5e5;padding:5px 4px;text-align:center}
        .d05-10-03 thead th{background:#2d3648;color:#fff}
        .d05-10-03 thead th:nth-child(3){background:#3f4d68}
        .d05-10-03 tbody td:first-child{text-align:left;padding-left:6px;background:#f6f7f9;font-weight:600}
        .d05-10-03 td.yes{color:#0a7d32;font-weight:700}
        .d05-10-03 td.no{color:#bbb}

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