このページの中身

CTA帯

ヒーロー ／ パターン集トップ

ページ末尾や章の区切りで次の行動を1つに絞る

プレビュー#

この枠の中は出発点のCSSの上で動いています。下のコードは、そちらを先に貼ってから足してください。

コピーする#

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

<section class="cta-band" aria-labelledby="cta-band-title">
  <div class="cta-band__inner page">
    <div class="cta-band__copy">
      <h2 id="cta-band-title">まずは30分、話を聞かせてください</h2>
      <p>料金の話の前に、困っていることを整理します。</p>
    </div>
    <a class="button button--primary" href="#contact">無料相談を予約</a>
  </div>
</section>
.cta-band {
  background: var(--color-surface);
  border-block: 1px solid var(--color-border);
}
.cta-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-7);
}
.cta-band__copy h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
}
.cta-band__copy p {
  margin: 0;
  color: var(--color-text-muted);
}
/* .button の基底と派生は「出発点のCSS」にある */
.cta-band .button {
  white-space: nowrap;
}

確認する#

関連#

この資料は、Webサイトを作るときに引くためのものです。 何のために作ったか。作っているのは AK²Lab。