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

カラーコード評価表(信号色)

緑・黄・赤の信号色で評価レベルを色分けした静止表。診断結果やステータス一覧の提示に使える。

staticcss

プレビュー

ソースコード

HTML

<table>
          <tbody>
            <tr><td>安定性</td><td class="lv g">良好</td></tr>
            <tr><td>応答速度</td><td class="lv y">やや遅い</td></tr>
            <tr><td>互換性</td><td class="lv g">良好</td></tr>
            <tr><td>エラー率</td><td class="lv r">要改善</td></tr>
          </tbody>
        </table>

CSS

.d05-10-07 table{width:100%;border-collapse:collapse;font-size:11px;font-family:sans-serif}
        .d05-10-07 td{padding:7px 6px;border-bottom:1px solid #eee;color:#444}
        .d05-10-07 td.lv{text-align:right;font-weight:700;border-radius:3px}
        .d05-10-07 td.g{color:#1a8f4c}
        .d05-10-07 td.y{color:#b8860b}
        .d05-10-07 td.r{color:#c1362f}

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