L-001 Layout medium

How to create a split hero panel スプリットヒーローパネルの作り方

A split hero layout that separates copy and preview panels with a customizable column ratio. コピーとプレビューを左右に分けるヒーローレイアウト。カラム比率をカスタムプロパティで柔軟に変更できます。

hero layout grid marketing

ライブデモ Live Demo

NEW

Design-focused layout block.

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

55% / 45%

概要・用途・特徴Overview, Usage & Features

何ができるかWhat it does

A split hero layout that separates copy and preview panels with a customizable column ratio.

コピーとプレビューを左右に分けるヒーローレイアウト。カラム比率をカスタムプロパティで柔軟に変更できます。

どこで使うかWhere to use

landing page, marketing site, portfolio, product page

ヒーローセクション、ログインページ、プロダクト紹介、ポートフォリオサイト

特徴Key features

CSS Grid split-panel layout with a 50/50 (or custom) column split. Fully responsive — collapses to stacked on mobile. Left panel holds media/visual; right panel holds text content. No JavaScript required.

CSS Gridによるスプリットパネルレイアウト。50/50（またはカスタム）の列分割。完全レスポンシブ — モバイルでスタック。左パネルにメディア/ビジュアル、右パネルにテキストコンテンツ。JavaScript不要。

調整可能パラメータ Adjustable Parameters

Parameter Default Description
--hero-split—tune spacing for different emphasis
visual slot—swap the right column with 3D, Lottie, or video
theme—provide light/dark color sets
breakpoints—customize mobile breakpoint

実装コード Implementation Code 

// 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;
  }
}
import "./L-001.css";

export default function SplitHeroPanel() {
  return (
    <section className="split-hero">
      <div className="split-hero__copy">
        <span>Launch</span>
        <h2>Split hero layout</h2>
        <p>Highlight messaging on the left and showcase a preview on the right.</p>
        <button>Get Started</button>
      </div>
      <div className="split-hero__visual">
        <div className="preview-card">
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
    </section>
  );
}
/* Split hero layout styles are now in global.css */

仕組みとカスタマイズHow It Works & Customization

仕組みHow it works

A CSS Grid container uses grid-template-columns: 1fr 1fr (or a custom split). The visual panel often uses object-fit: cover on an image or a background-image with background-size: cover. Below a breakpoint, grid-template-columns switches to 1fr via @media query, stacking the panels vertically.

CSS Gridコンテナがgrid-template-columns:1fr 1fr（またはカスタム分割）を使用。ビジュアルパネルは通常、画像にobject-fit:coverまたはbackground-image+background-size:coverを使用。ブレークポイント以下では@media queryでgrid-template-columnsを1frに切り替えパネルを縦積みにします。

カスタマイズ方法Customization

Adjust the grid column ratio (60/40, 40/60) to weight the visual or text side. Add a diagonal separator using clip-path: polygon() on the visual panel for a dynamic split. Use position: sticky on the text panel for a scroll-fixed content experience.

グリッド列比率（60/40、40/60）を調整してビジュアルまたはテキスト側を強調。ビジュアルパネルにclip-path:polygon()で斜め区切りを追加してダイナミックな分割に。テキストパネルにposition:stickyを使用してスクロール固定コンテンツ体験を実現。

注意点Caveats

Ensure decorative images in the visual panel have alt="" and role="presentation" if they convey no information. When the layout stacks on mobile, reorder the panels so the heading appears above the image using CSS order or grid-row.

ビジュアルパネルの装飾的な画像が情報を伝えない場合はalt=""とrole="presentation"を設定してください。モバイルでレイアウトがスタックする場合、CSS orderまたはgrid-rowを使用して見出しが画像の上に表示されるようにパネルを並び替えてください。

よくある質問 Frequently Asked Questions

How to customize the split hero panel? Split Hero Panelをカスタマイズするには？

Modify the CSS custom properties and class styles defined in the code section. Key adjustable values include colors, sizes, durations, and spacing. See the Adjustable Parameters section for specific variables.

コードセクションで定義されているCSSカスタムプロパティとクラススタイルを変更してください。色、サイズ、時間、間隔が主な調整可能値です。具体的な変数は調整可能パラメータセクションを参照してください。

How to use the split hero panel in React? ReactでSplit Hero Panelを使うには？

Import the provided React component and its CSS file. The component accepts props for customization. Check the React code section for the full implementation and available props.

提供されているReactコンポーネントとCSSファイルをインポートしてください。コンポーネントのpropsでカスタマイズできます。完全な実装と利用可能なpropsはReactコードセクションを参照してください。

What are the performance implications of split hero panel? Split Hero Panelのパフォーマンスへの影響は？

This implementation uses CSS transforms and opacity for animations, which are GPU-accelerated. It's lightweight and doesn't cause layout thrashing. Consider using prefers-reduced-motion for accessibility.

この実装はCSSのtransformとopacityを使用しており、GPUアクセラレーションされます。軽量でレイアウトスラッシングを引き起こしません。アクセシビリティのためにprefers-reduced-motionの使用を検討してください。

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

以下をAIに貼り付けると実装を依頼できます。 Paste the following into your AI assistant to request implementation.