ヒーローコンポーネントシミュレーター

ヒーローセクションの背景画像、見出し、本文、CTAボタンなどを カスタマイズして、オリジナルのヒーローコンポーネントを作成できます。 作成したヒーローコンポーネントのHTML、CSSコードをコピーして、 あなたのプロジェクトで使用できます。

ヒーロー管理

ヒーロー設定

デバイスモード

全体設定

背景設定

見出し設定

本文設定

CTAボタン設定

Hero background

ヒーローセクションの見出し

ここにヒーローセクションの説明文を入力します。ユーザーに伝えたい重要なメッセージを簡潔に記載しましょう。

コード

<div class="hero-1">
  <div class="hero-1-background">
    <img src="https://placehold.jp/1200x600.png" alt="Hero background">
  </div>
  <div class="hero-1-content">
    <div class="hero-1-heading-box">
      <h1 class="hero-1-heading">ヒーローセクションの見出し</h1>
    </div>
    <div class="hero-1-content-box">
      <p class="hero-1-content-text">ここにヒーローセクションの説明文を入力します。ユーザーに伝えたい重要なメッセージを簡潔に記載しましょう。</p>
    </div>
    <div class="hero-1-cta-container">
      <button class="hero-1-cta-button">詳細を見る <span class="arrow-icon">→</span></button>
    </div>
  </div>
</div>