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

60-30-10配色ルール見本

ベース60%・補助30%・アクセント10%の黄金比を帯グラフで可視化した見本です。WordPressサイト全体の配色バランスを決める基準として使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d07-04-11-wrap">
          <div class="d07-04-11-bar">
            <span class="d07-04-11-p60" style="background:#f8fafc"></span>
            <span class="d07-04-11-p30" style="background:#0f172a"></span>
            <span class="d07-04-11-p10" style="background:#f59e0b"></span>
          </div>
          <div class="d07-04-11-legend">
            <span><i style="background:#f8fafc;border:1px solid #e2e8f0"></i>60% ベース</span>
            <span><i style="background:#0f172a"></i>30% 補助</span>
            <span><i style="background:#f59e0b"></i>10% アクセント</span>
          </div>
        </div>

CSS

.d07-04-11-wrap{width:260px}
        .d07-04-11-bar{display:flex;width:100%;height:36px;border-radius:8px;overflow:hidden;box-shadow:0 4px 12px rgba(15,23,42,.08)}
        .d07-04-11-p60{flex:6}
        .d07-04-11-p30{flex:3}
        .d07-04-11-p10{flex:1}
        .d07-04-11-legend{display:flex;flex-direction:column;gap:6px;margin-top:12px}
        .d07-04-11-legend span{display:flex;align-items:center;gap:8px;font-size:11px;color:#475569}
        .d07-04-11-legend i{display:inline-block;width:12px;height:12px;border-radius:3px}

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