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

ブランドカラーパレット表示

メイン・サブ・アクセントの3色をスウォッチとカラーコードで一覧化した見本です。WordPressサイト構築時の配色ガイドライン共有に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d07-04-01-card">
          <div class="d07-04-01-head">ブランドカラー</div>
          <div class="d07-04-01-row">
            <div class="d07-04-01-sw" style="background:#2563eb"></div>
            <div class="d07-04-01-txt"><b>メイン</b><span>#2563EB</span></div>
          </div>
          <div class="d07-04-01-row">
            <div class="d07-04-01-sw" style="background:#0f172a"></div>
            <div class="d07-04-01-txt"><b>サブ</b><span>#0F172A</span></div>
          </div>
          <div class="d07-04-01-row">
            <div class="d07-04-01-sw" style="background:#f59e0b"></div>
            <div class="d07-04-01-txt"><b>アクセント</b><span>#F59E0B</span></div>
          </div>
        </div>

CSS

.d07-04-01-card{width:250px;background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:18px 20px;box-shadow:0 6px 18px rgba(15,23,42,.06)}
        .d07-04-01-head{font-size:12px;font-weight:700;color:#475569;margin-bottom:12px}
        .d07-04-01-row{display:flex;align-items:center;gap:12px;padding:7px 0}
        .d07-04-01-sw{width:36px;height:36px;border-radius:10px;flex:0 0 36px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
        .d07-04-01-txt{display:flex;flex-direction:column;font-size:12.5px;color:#334155}
        .d07-04-01-txt b{font-weight:700;color:#0f172a;font-size:13px}
        .d07-04-01-txt span{font-size:11px;color:#94a3b8;font-family:monospace;margin-top:2px}

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