ヒーローセクション

見出し・リード文・CTA2つのファーストビュー。背景はCSS変数で、グラデーションのままでも画像に差し替えても使えます。JavaScript不要。

プレビュー

<section class="hero">
  <div class="hero__inner">
    <p class="hero__eyebrow">Highneeds</p>
    <h1 class="hero__title">
      3D・Web・AIの実装を、<br />
      事例とコードで追いかける。
    </h1>
    <p class="hero__lead">
      Three.js / WebGL を使ったサイトの実装解説、コピーして使えるコードスニペット、
      AIまわりの最新動向。「実際どう作られているか」に寄せたメディアです。
    </p>
    <div class="hero__actions">
      <a class="hero__button hero__button--primary" href="/thereed">
        3Dサイトギャラリーを見る
      </a>
      <a class="hero__button" href="/snippets">スニペットを探す</a>
    </div>
  </div>
</section>

/* このスニペット配下だけ box-sizing を揃える（既存のリセットとは競合しません） */
.hero,
.hero *,
.hero *::before,
.hero *::after {
  box-sizing: border-box;
}

.hero {
  /* 背景画像を使う場合は --hero-image を url(...) に差し替える */
  --hero-image: linear-gradient(135deg, #1e3a8a 0%, #0f172a 55%, #312e81 100%);
  --hero-overlay: linear-gradient(180deg, rgb(0 0 0 / 10%), rgb(0 0 0 / 55%));
  --hero-fg: #ffffff;
  --hero-muted: rgb(255 255 255 / 78%);
  --hero-accent: #3b82f6;
  --hero-min-height: 420px;

  position: relative;
  display: grid;
  align-items: center;
  min-height: var(--hero-min-height);
  background-image: var(--hero-overlay), var(--hero-image);
  background-size: cover;
  background-position: center;
  color: var(--hero-fg);
  isolation: isolate;
}

.hero__inner {
  width: 100%;
  max-width: 1152px;
  margin: 0 auto;
  padding: 4rem 1rem;
}

.hero__eyebrow {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--hero-muted);
}

.hero__title {
  margin: 0.75rem 0 0;
  font-size: clamp(1.75rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.hero__lead {
  max-width: 60ch;
  margin: 1.25rem 0 0;
  font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
  line-height: 1.9;
  color: var(--hero-muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.hero__button {
  display: inline-block;
  padding: 0.875rem 1.5rem;
  border: 1px solid rgb(255 255 255 / 35%);
  border-radius: 8px;
  color: var(--hero-fg);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s, opacity 0.15s;
}

.hero__button:hover {
  background: rgb(255 255 255 / 12%);
  border-color: rgb(255 255 255 / 60%);
}

.hero__button--primary {
  background: var(--hero-accent);
  border-color: var(--hero-accent);
}

.hero__button--primary:hover {
  background: var(--hero-accent);
  opacity: 0.9;
}

.hero__button:focus-visible {
  outline: 2px solid var(--hero-fg);
  outline-offset: 3px;
}

/* 改行は広い画面でだけ効かせる */
@media (max-width: 639px) {
  .hero__title br {
    display: none;
  }
}

/* ここから下はプレビュー表示用です。コピーして使うときは不要です */
body {
  margin: 0;
  background: #ffffff;
  font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Sans",
    "Noto Sans JP", sans-serif;
  color: #111827;
}

@media (prefers-color-scheme: dark) {
  body {
    background: #111827;
    color: #f9fafb;
  }
}