苦手なCSSを克服しよう

<!-- 親要素 -->
<div style="position: relative;">
  <!-- 子要素は、親の相対位置を基準に絶対位置で配置されます -->
  <div style="position: absolute; top: 0; left: 0;"></div>
</div>

<div class="container">
  <section>
    <h2>タイトル</h2>
    <div>コンテンツ</div>
  </section>
  <section>
    <h2>タイトル</h2>
    <div>コンテンツ</div>
  </section>
  <!-- 省略 -->
</div>

.container {
  /* 横幅を制限します */
  max-width: var(--breakpoint-desktop);
  /* 横幅を左右中央寄せにします */
  margin-left: auto;
  margin-right: auto;
}

<section class="hero-cover">
  <main class="hero-container">
    <hgroup>
      <h1>CSS AI</h1>
      <p>AI駆動CSSスタイリング<wbr />プラットフォーム</p>
    </hgroup>
    <div>
      <p>
        次世代AIがあなたのCSSを自動最適化。
      </p>
      <p>
        自然言語でスタイルを指定するだけで、美しいCSSコードを瞬時に生成します。
      </p>
    </div>
    <div class="cluster">
      <button>今すぐ始める</button>
      <button>詳細を見る</button>
    </div>
  </main>
</section>

.hero-cover {
  /* 上下左右中央の配置します。 */
  /* 他にも方法は色々ありますが、こちらの書き方がシンプルで良いでしょう */
  display: grid;
  place-items: center;
 
  /* 最小の高さを、ビューポートの最大まで広げます */
  min-height: 100dvh;
}
 
.hero-container {
  /* 左右中央寄せにしつつ、コンテンツの横を制限させます */
  display: grid;
  /* 1列で、横幅いっぱいに表示します */
  grid-template-columns: 1fr;
  /* 左右中央寄せにします */
  justify-items: center;
  /* 横幅を制限します */
  max-width: var(--breakpoint-desktop);
 
  /* 余白の調整 */
  gap: var(--spacing-lg); /* 子要素の間隔を指定 */
  padding: 0 var(--spacing-base); /* 左右の余白を指定 */
}
 
.cluster {
  /* ボタンを単純に横に並べる */
  display: flex;
  /* ボタンを折り返す */
  /* ボタンが増えたり、横幅が狭くなると効果を発揮します */
  flex-wrap: wrap;
 
  /* 余白の調整 */
  gap: var(--spacing-sm);
}

<section class="section">
  <h2>主要機能</h2>
  <div class="feature-grid">
    <div class="feature-card">
      <div class="card-icon">🤖</div>
      <h3 class="card-title">AI CSS生成</h3>
      <p class="card-description">
        自然言語でデザインを記述するだけで、最適化されたCSSコードを自動生成。
      </p>
    </div>
    <div class="feature-card">
      <div class="card-icon">🎨</div>
      <h3 class="card-title">スマートスタイル提案</h3>
      <p class="card-description">
        AIがデザインパターンを分析し、美しいスタイルを自動提案。クリエイティブな発想をサポート。
      </p>
    </div>
    <!-- 省略 -->
  </div>
</section>

.section {
  display: grid;
  /* 1列で、横幅いっぱいに表示します */
  grid-template-columns: 1fr;
 
  /* 余白の調整 */
  gap: var(--spacing-md); /* 見出しとコンテンツの間隔を指定 */
}
 
.feature-grid {
  /* 列数を変更しやすいように、ローカル変数に定義 */
  --_column: 1;
 
  display: grid;
  /* 指定する列数で分割 */
  grid-template-columns: repeat(var(--_column), 1fr);
 
  /* 余白の調整 */
  gap: var(--spacing-sm); /* 各機能の間隔を指定 */
 
  /* tabletの列数 */
  @media (min-width: 40rem) {
    --_column: 2;
  }
 
  /* laptopの列数 */
  @media (min-width: 48rem) {
    --_column: 3;
  }
}
 
.feature-card {
  display: grid;
  /* 親グリッドから子グリッドを入れ子にします */
  grid-template-rows: subgrid;
 
  /* グリッドアイテムを縦に並べる */
  grid-template-areas:
    "icon"
    "title"
    "description";
 
  /* サブグリッドとして、3つの行があることを明示 */
  grid-row: span 3;
 
  /* 余白の調整 */
  padding: var(--spacing-base); /* 自身のカードの内側の余白を指定 */
 
  /* 装飾 */
  border: 1px solid var(--color-border); /* 枠線の装飾 */
}
 
.card-icon {
  /* grid-template-areasで指定された名前を定義する */
  grid-area: icon;
}
 
.card-title {
  /* grid-template-areasで指定された名前を定義する */
  grid-area: title;
}
 
.card-description {
  /* grid-template-areasで指定された名前を定義する */
  grid-area: description;
}

<section class="section">
  <h2>対応技術</h2>
  <div class="cluster">
    <span class="tech-tag">GPT-4</span>
    <span class="tech-tag">Claude</span>
    <!-- 省略 -->
  </div>
</section>

.section {
  display: grid;
  /* 1列で、横幅いっぱいに表示します */
  grid-template-columns: 1fr;
 
  /* 余白の調整 */
  gap: var(--spacing-md); /* 見出しとコンテンツの間隔を指定 */
}
 
.cluster {
  /* ボタンを単純に横に並べる */
  display: flex;
  /* ボタンを折り返す */
  /* ボタンが増えたり、横幅が狭くなると効果を発揮します */
  flex-wrap: wrap;
  /* 左右中央に寄せる */
  justify-content: center;
 
  /* 余白の調整 */
  gap: var(--spacing-sm); /* タグの間隔を指定 */
}
 
.tech-tag {
  /* 余白の調整 */
  padding: var(--spacing-xs) var(--spacing-sm); /* タグの内側の余白を指定 */
 
  /* 装飾 */
  background-color: var(--color-black);
  color: var(--color-white);
}

<section class="section">
  <h2>デモ</h2>
  <div class="sidebar">
    <div class="sidebar-video">
      <div class="demo-video">
        <h3>ライブデモ</h3>
        <p>実際のCSS AIの動作をご覧ください</p>
        <button>デモを開始</button>
      </div>
    </div>
    <div class="sidebar-steps">
      <div class="step-items">
        <div class="step-item">
          <strong class="step-item-title">1. 要望を自然言語で入力</strong>
          <p class="step-item-description">
            「モダンなカードデザインを作って」など、自然な言葉でデザインを指示
          </p>
        </div>
        <div class="step-item">
          <strong class="step-item-title">2. AIがCSSを自動生成</strong>
          <p class="step-item-description">高度なAIが最適化されたCSSコードを瞬時に生成</p>
        </div>
        <div class="step-item">
          <strong class="step-item-title">3. プレビュー・調整・適用</strong>
          <p class="step-item-description">リアルタイムプレビューで確認し、微調整してプロジェクトに適用</p>
        </div>
      </div>
    </div>
  </div>
</section>

.section {
  display: grid;
  /* 1列で、横幅いっぱいに表示します */
  grid-template-columns: 1fr;
 
  /* 余白の調整 */
  gap: var(--spacing-md); /* 見出しとコンテンツの間隔を指定 */
}
 
.sidebar {
  display: flex;
  /* 説明ステップを折り返せるようにする */
  flex-wrap: wrap;
 
  /* 余白の調整 */
  gap: var(--spacing-base); /* デモと説明ステップの間隔を指定 */
}
 
.sidebar-video {
  flex-basis: 25rem; /* デモの基本幅を指定（最小限の見せたいサイズ） */
  flex-grow: 1;      /* 余白があれば少し広がる */
}
 
.sidebar-steps {
  flex-grow: 999;  /* スペースが余れば優先的に広がるようにする */
  flex-basis: 50%; /* 横幅は最低50%を確保する（デモが25remなのでバランスを取る） */
}
 
.demo-video {
  /* デモ動画のコンテンツを縦に並べる */
  display: flex;
  flex-direction: column;
 
  /* 余白の調整 */
  gap: var(--spacing-md);       /* デモ動画のコンテンツの間隔を指定 */
  padding: var(--spacing-base); /* デモ動画の内側の余白を指定 */
 
  /* 装飾 */
  background-color: var(--color-border);
}
 
.step-items {
  display: grid;
  /* 1列で、横幅いっぱいに表示します */
  grid-template-columns: 1fr;
 
  /* 余白の調整 */
  gap: var(--spacing-sm); /* タイトルと説明文の間隔を指定 */
}
 
.step-item {
  display: grid;
  /* 親グリッドから子グリッドを入れ子にします */
  grid-template-rows: subgrid;
 
  /* グリッドアイテムを縦に並べる */
  grid-template-areas:
    "title"
    "description";
 
  /* サブグリッドとして、2つの行があることを明示 */
  grid-row: span 2;
 
  /* 余白の調整 */
  padding: var(--spacing-base); /* ステップアイテムの内側の余白を指定 */
 
  /* 装飾 */
  border-top: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  border-left: 3px solid var(--color-black);
}
 
.step-item-title {
  /* grid-template-areasで指定された名前を定義する */
  grid-area: title;
}
 
.step-item-description {
  /* grid-template-areasで指定された名前を定義する */
  grid-area: description;
}

<section class="section">
  <h2>お客様の声</h2>
  <div class="reel">
    <div class="review-card">
      <div>
        "CSS AIを使い始めてから、コーディング時間が半分になりました。"
      </div>
      <div>
        <strong>田中様</strong> - フロントエンドエンジニア
      </div>
      <div>★★★★★</div>
    </div>
    <div class="review-card">
      <div>
        "自然言語でデザインを指示するだけで、想像以上の美しいCSSが生成されます。"
      </div>
      <div>
        <strong>佐藤様</strong> - UIデザイナー
      </div>
      <div>★★★★★</div>
    </div>
    <!-- 省略 -->
  </div>
</section>

.section {
  display: grid;
  /* 1列で、横幅いっぱいに表示します */
  grid-template-columns: 1fr;
 
  /* 余白の調整 */
  gap: var(--spacing-md); /* 見出しとコンテンツの間隔を指定 */
}
 
.reel {
  /* flexboxで横に並べる */
  display: flex;
  /* 横スクロールを許可 */
  overflow-x: auto;
 
  /* アイテム間の間隔 */
  --_gap: var(--spacing-sm);
  gap: var(--_gap);
 
  & > * {
    /* 1.5列分表示 */
    /* 0.5分非表示になるため、横スクロールできるように見える */
    --_column: 1.5;
 
    flex-grow: 0;   /* 伸びない */
    flex-shrink: 0; /* 縮まない */
 
    /* 指定された列数ぶん表示されるように幅を計算 */
    flex-basis: calc(
      (100% - (var(--_gap) * (var(--_column) - 1))) / var(--_column)
    );
 
    /* tabletの列数 */
    @media (min-width: 40rem) {
      --_column: 2.5;
    }
 
    /* laptopの列数 */
    @media (min-width: 48rem) {
      --_column: 3.5;
    }
  }
}
 
.review-card {
  display: grid;
 
  /* 余白の調整 */
  row-gap: var(--spacing-sm);   /* グリッド行の間隔を指定 */
  padding: var(--spacing-base); /* レビューカードの内側の余白を指定 */
 
  /* 装飾 */
  border: 1px solid var(--color-border);
  background: var(--color-white);
}

<section class="section">
  <h2>料金プラン</h2>
  <div class="price-items">
    <div class="price-item">
      <h4 class="plan-name">スターター</h4>
      <div class="plan-price">¥980<span>/月</span></div>
      <div class="plan-features">
        <div class="plan-feature">✓ 基本AI CSS生成</div>
        <div class="plan-feature">✓ 月100回まで生成</div>
        <!-- 省略 -->
      </div>
      <button class="btn btn-outline">選択する</button>
    </div>
    <div class="price-item popular">
      <div class="popular-badge">人気</div>
      <h4 class="plan-name">プロ</h4>
      <div class="plan-price">¥2,980<span>/月</span></div>
      <div class="plan-features">
        <div class="plan-feature">✓ 高度なAI機能</div>
        <div class="plan-feature">✓ 無制限生成</div>
        <!-- 省略 -->
      </div>
      <button class="btn btn-primary">選択する</button>
    </div>
    <div class="price-item">
      <h4 class="plan-name">エンタープライズ</h4>
      <div class="plan-price">お問い合わせ</div>
      <div class="plan-features">
        <div class="plan-feature">✓ カスタムAIモデル</div>
        <div class="plan-feature">✓ 専用API</div>
        <!-- 省略 -->
      </div>
      <button class="btn btn-outline">相談する</button>
    </div>
  </div>
</section>

.section {
  display: grid;
  /* 1列で、横幅いっぱいに表示します */
  grid-template-columns: 1fr;
 
  /* 余白の調整 */
  gap: var(--spacing-md); /* 見出しとコンテンツの間隔を指定 */
}
 
.price-items {
  display: flex;
  /* プランカードを折り返せるようにする */
  flex-wrap: wrap;
 
  /* 余白の調整 */
  gap: var(--spacing-md); /* プランカードの間隔を指定 */
 
  & > * {
    /* すべて同じ比率で伸びるようにする */
    flex-grow: 1;
 
    /* 横幅に応じて縦並び ⇄ 横並びが切り替わるように調整 */
    /* 横幅が45rem未満では縦並び、それ以上では横並びになる */
    flex-basis: calc((45rem - 100%) * 999);
  }
}
 
.price-item {
  /* 子要素の絶対配置（例: 人気バッジ）を基準にするための基点 */
  position: relative;
 
  display: grid;
  grid-template:
    /* プラン名を表示する行 */
    "name" auto
    /* 空行（スペースなし、調整用） */
    "." 0
    /* 価格を表示する行 */
    "price" auto
    /* 空行（価格と機能リストの間にスペースを入れる） */
    "." var(--spacing-md)
    /* 機能リストを表示する行 */
    "features" auto
    /* 空行（機能リストとボタンの間にスペースを入れる） */
    "." var(--spacing-md)
    /* ボタンを表示する行 */
    "button" auto / auto; /* 列幅は自動（1列レイアウト） */
 
    /* 余白の調整 */
    padding: var(--spacing-base); /* プランカードの内側の余白を指定 */
 
  /* 装飾 */
  border: 1px solid var(--color-border);
 
  &.popular {
    /* 人気プランは枠線を強調 */
    border-color: var(--color-black);
  }
 
  & > button {
    /* grid-template-areasで指定された名前を定義する */
    grid-area: button;
    width: fit-content;  /* ボタン幅を内容に合わせる */
    margin: 0 auto;      /* 左右中央寄せ */
  }
}
 
.popular-badge {
  /* 親要素 (.price-item) を基準に絶対位置で配置する */
  position: absolute;
 
  /* 上にずらして、カードの外にはみ出すように配置 */
  top: -1rem;
  /* 横中央に配置するために、左端を中央に設定 */
  left: 50%;
  /* 左に50%分ずらして、左右中央に揃える */
  /* 横方向の中央寄せテクニック */
  transform: translateX(-50%);
 
  /* バッジの装飾 */
  background-color: var(--color-black);
  color: var(--color-white);
 
  /* 余白の調整 */
  padding: var(--spacing-xs) var(--spacing-sm); /* 上下左右の余白を指定 */
}
 
.plan-name {
  /* grid-template-areasで指定された名前を定義する */
  grid-area: name;
}
 
.plan-price {
  /* grid-template-areasで指定された名前を定義する */
  grid-area: price;
  text-align: center;
 
  & > span {
    /* 単位との間隔 */
    margin-left: var(--spacing-xs);
  }
}
 
.plan-features {
  /* grid-template-areasで指定された名前を定義する */
  grid-area: features;
  display: grid;
  /* 1列で、横幅いっぱいに表示します */
  grid-template-columns: 1fr;
 
  /* 余白の調整 */
  gap: var(--spacing-xs);       /* 特徴の間隔を指定 */
  padding: 0 var(--spacing-sm); /* 左右の余白を指定 */
}
 
.plan-feature {
  /* 余白の調整 */
  padding: var(--spacing-xs) 0; /* 上下の余白を指定 */
 
  /* 装飾 */
  border-bottom: 1px solid var(--color-border);
}