アクセント面

色 ／ パターン集トップ

面積5%以内の強調ブロック。文字は --color-accent-text

プレビュー#

コピーする#

上のプレビューでつまみを動かし、「生成する」で調整を反映したコードを作ってからコピーしてください。下の欄は生成の元になる型で、直接コピーするものではありません。

<div class="with-aside">
  <div>
    <p>本文の列。アクセント面は脇の列に入れるので、面の幅も文の折り返しも列が決めます。</p>
  </div>
  <aside class="accent-surface" aria-label="注目">
    <p class="accent-surface__label">今日の要点</p>
    <p>アクセント色は面全体ではなく、小さな面と線に使う。</p>
  </aside>
</div>

/* 面にも中の文にも幅は持たせない。幅は starter の
   .with-aside が持つ 16rem の列が決める（面積を5%に収める歯止めもここ） */
.accent-surface {
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-accent) 14%, var(--color-bg));
  border-inline-start: 4px solid var(--color-accent-text);
  color: var(--color-text);
}
.accent-surface__label {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
}

確認する#

• 画面面積の5%を超えていない
• 本文色は --color-text のまま
• 左線で意味を足し、枠全体をベタ塗りにしない

関連#

• 配色の型
• 役割で色を持つ
• 出発点のCSS