ライブデモ Live Demo

ヒーローセクションは `--hero-split` でカラム比率を制御するCSSグリッドを使用します。小画面では1カラムに折りたたまれ、疑似要素で右パネルに階層化されたカード詳細を作成します。

The hero uses a CSS grid whose column ratio is stored in `--hero-split`. On smaller screens it collapses to a single column, while pseudo-elements create layered card details on the right panel.

NEW

Design-focused layout block.

グリッドカラムが `--hero-split` で制御されているため、比率の入れ替えは `element.style.setProperty` で1行になります。メディアクエリはモバイルで単純にグリッド定義を1カラムに上書きします。

55% / 45%

AI向け説明 AI Description

`L-001` は `--hero-split` CSSカスタムプロパティで制御されるCSSグリッドレイアウトを使用します。メディアクエリでモバイル時に1カラムに折りたたみ、疑似要素で右パネルに階層的なカード表示を作成します。

`L-001` uses a CSS grid layout controlled by the `--hero-split` custom property. A media query collapses to a single column on mobile, while pseudo-elements create layered card visuals in the right panel.

調整可能パラメータ Adjustable Parameters

実装 Implementation

HTML + CSS

<div class="hero-preview">
  <div class="hero-copy">
    <span>NEW</span>
    <h3>Design-focused layout block.</h3>
    <p>Description text here.</p>
    <button>Learn More</button>
  </div>
  <div class="hero-visual">
    <!-- Replace with your visual content -->
  </div>
</div>

<style>
:root {
  --hero-split: 1.1fr 0.9fr;
}

.hero-preview {
  display: grid;
  grid-template-columns: var(--hero-split);
  border-radius: 22px;
  overflow: hidden;
  min-height: 260px;
}

.hero-copy {
  padding: clamp(24px, 5vw, 48px);
  background: linear-gradient(140deg, rgba(90, 110, 255, 0.85), rgba(125, 218, 255, 0.6));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.hero-visual {
  background: #090d24;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 640px) {
  .hero-preview {
    grid-template-columns: 1fr;
  }
}
</style>

<script>
// Change column ratio dynamically
const hero = document.querySelector(".hero-preview");
hero.style.gridTemplateColumns = "60fr 40fr";
</script>

React (JSX + CSS)

// react/L-001.jsx
import "./L-001.css";
import { useState } from "react";

export default function SplitHeroPanel({
  tag = "NEW",
  title = "Design-focused layout block.",
  description = "Description text here.",
  cta = "Learn More",
  initialRatio = 55,
  children,
}) {
  const [ratio, setRatio] = useState(initialRatio);

  return (
    <div
      className="hero-preview"
      style={{ gridTemplateColumns: `${ratio}fr ${100 - ratio}fr` }}
    >
      <div className="hero-copy">
        <span>{tag}</span>
        <h3>{title}</h3>
        <p>{description}</p>
        <button>{cta}</button>
      </div>
      <div className="hero-visual">
        {children}
      </div>
    </div>
  );
}
/* react/L-001.css */
.hero-preview {
  display: grid;
  border-radius: 22px;
  overflow: hidden;
  min-height: 260px;
}

.hero-copy {
  padding: clamp(24px, 5vw, 48px);
  background: linear-gradient(140deg, rgba(90, 110, 255, 0.85), rgba(125, 218, 255, 0.6));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  color: #fff;
}

.hero-visual {
  background: #090d24;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 640px) {
  .hero-preview {
    grid-template-columns: 1fr !important;
  }
}

AIへの指示テンプレート AI Prompt Template

以下のテンプレートをコピーしてAIアシスタントに貼り付けると、このパターンの実装を依頼できます。 Copy the template below and paste it into your AI assistant to request an implementation of this pattern.

注意とバリエーション Notes & Variations

右列を動画、3D、チャートに入れ替えてオーダーメイドなヒーロー体験を作成してください。バリアント比率やスタックCTAについてAIに指示する際にこのページをベースラインとして使用してください。

Swap the right column for video, 3D, or charts to create bespoke hero experiences. Use this page as the baseline when instructing AI about variant ratios or stacked CTAs.