パーツ番号 07-04-06 ・ CSSのみ

セマンティックカラー一覧

成功・警告・エラー・情報の4色をラベルとカラーコードで整理した見本です。フォームやアラート表示の色設計基準として参照できます。

staticcss

プレビュー

ソースコード

HTML

<div class="d07-04-06-list">
          <div class="d07-04-06-row"><span class="d07-04-06-dot" style="background:#16a34a"></span>成功<em>#16A34A</em></div>
          <div class="d07-04-06-row"><span class="d07-04-06-dot" style="background:#f59e0b"></span>警告<em>#F59E0B</em></div>
          <div class="d07-04-06-row"><span class="d07-04-06-dot" style="background:#ef4444"></span>エラー<em>#EF4444</em></div>
          <div class="d07-04-06-row"><span class="d07-04-06-dot" style="background:#3b82f6"></span>情報<em>#3B82F6</em></div>
        </div>

CSS

.d07-04-06-list{width:230px;background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:14px 18px;box-shadow:0 6px 18px rgba(15,23,42,.06)}
        .d07-04-06-row{display:flex;align-items:center;gap:10px;font-size:12.5px;color:#334155;padding:6px 0;border-top:1px solid #f1f5f9}
        .d07-04-06-row:first-child{border-top:none}
        .d07-04-06-dot{width:12px;height:12px;border-radius:50%;flex:0 0 12px}
        .d07-04-06-row em{margin-left:auto;font-style:normal;font-size:11px;color:#94a3b8;font-family:monospace}

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