花屋さんのサイトを、
読み解く。

hidamari-flower/
├── index.html          … ページの本体（内容と構造）
├── thanks.html         … お問い合わせを送ったあとに表示するページ
├── stylesheets/
│   ├── style.css       … CSS の入口。下の 4 つを読み込む
│   ├── base.css        … リセット・色などの変数・要素の土台・並べ方
│   ├── components.css  … ボタン・カードなど、何度も使う部品
│   ├── sections.css    … セクションごとの見た目
│   └── utilities.css   … スクロールの演出・印刷用の指定
├── javascripts/
│   └── main.js         … メニューの開閉、料金の計算、写真の拡大など
└── images/             … 写真とロゴ（WebP 形式）

<!-- 検索結果に表示される、ページの説明文 -->
<meta name="description" content="ひだまりフラワーは、季節の切り花や花束、植物と自然素材の鉢カバーを揃えた街角の花屋です。一輪から気軽にお立ち寄りください。">
<!-- スマートフォンのブラウザで、アドレスバーなどに使われる色 -->
<meta name="theme-color" content="#416b49">
<!-- SNS でページを共有したときに表示される題名と説明（OGP） -->
<meta property="og:title" content="ひだまりフラワー｜日常に、小さな「ひだまり」を。">
…
<!-- 見た目は style.css にまとめて書く -->
<link rel="stylesheet" href="stylesheets/style.css">
<!-- defer を付けると、HTML を最後まで読み込んでから JavaScript が実行される -->
<script src="javascripts/main.js" defer></script>

<a class="skip-link" href="#main">本文へスキップ</a>

<header class="site-header" id="header">
  …ロゴとメニュー（nav）…
</header>

<main id="main">
<section class="hero" id="hero">…h1 はここに 1 つだけ…</section>
<section class="section" id="about">…</section>
…
</main>

<footer class="site-footer dark">…</footer>

<div class="faq-list" data-reveal>
  <details class="card faq" name="faq" open><summary>一輪だけでも買えますか？</summary><p>もちろんです。お部屋の雰囲気や飾る場所に合う一輪を、一緒に選びましょう。</p></details>
  <details class="card faq" name="faq"><summary>花束の予算が決まっていません。相談できますか？</summary>…</details>
  …
</div>

@layer reset, tokens, base, layout, components, sections, utilities;

@import url("base.css");         /* reset・tokens・base・layout */
@import url("components.css");   /* ボタン・カードなどの共通部品 */
@import url("sections.css");     /* ページの各セクション */
@import url("utilities.css");    /* 表示の演出・印刷 */

@layer reset {
  :where(body, h1, h2, h3, p, figure, dl, dd, ul, ol, fieldset) {
    margin: 0;
    padding: 0;
  }

  :where(img, svg) {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }

  /* 上の display: block に負けないよう、hidden 属性の付いた要素は必ず隠す */
  [hidden] { display: none; }
}

@layer tokens {
  :root {
    /* 葉の緑。数字が大きいほど濃い */
    --leaf-800: #284831;
    --leaf-600: #416b49;
    …
    /* 花びらの黄色 */
    --sun-500: #e2b65e;
    …
    /* 役割で名前を付けた色。ページではこちらを使う。
       暗い背景の .dark では、この値だけを差し替える（components.css） */
    --text: #2d3b31;
    --heading: var(--leaf-800);
    --surface: var(--white);          /* カードの地 */
    --icon-bg: var(--leaf-600);
    …
    --radius: 18px;
    --shadow: 0 12px 32px -14px rgb(30 56 39 / .3);   /* 横 縦 ぼかし 広がり 色 */
  }
}

.dark {
  --text: rgb(255 253 250 / .92);
  --text-soft: rgb(255 253 250 / .75);
  --heading: var(--white);
  --accent: var(--sun-500);
  …
  --surface: rgb(255 255 255 / .08);     /* 暗い背景の上のカードは、白をうっすら重ねる */
  --icon-bg: var(--sun-500);
  --icon-fg: var(--leaf-900);

  color: var(--text);
  background-color: var(--leaf-800);
}

.grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 15rem)), 1fr));
}

.service-grid { --min: 24rem; }

.reason-grid { --min: 15rem; }

.reason-feature {
  grid-column: 1 / -1;                 /* 1 列目から最後の列まで。つまり横いっぱい */
  …
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-block-start: 1rem;
  …
}

.profile {
  --card-pad: clamp(1.5rem, 4vw, 3rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);

  /* flex: 0 1 260px … 広がらない・縮んでよい・基本の幅は 260px */
  .profile-photo {
    …
    flex: 0 1 260px;
    …
  }

  /* flex: 1 1 22rem … 余った幅まで広がる・縮んでよい・基本の幅は 22rem */
  .profile-body { flex: 1 1 22rem; }
  …
}

.photo {
  overflow: hidden;                  /* 角丸の外にはみ出した写真を隠す */
  border-radius: var(--radius-l);
  box-shadow: var(--shadow);

  img {
    inline-size: 100%;
    aspect-ratio: var(--ratio, 4 / 3);   /* --ratio が無ければ 4 / 3 */
    object-fit: cover;
  }
}

.reason-feature {
  …
  /* 写真の上に暗いグラデーションを 1 枚重ね、文字を読みやすくする
     カンマで区切った背景は、先に書いたものが手前に重なる */
  background-image:
    linear-gradient(90deg, rgb(30 56 39 / .92) 35%, rgb(30 56 39 / .35)),
    url("../images/image.webp");
  background-size: cover;              /* 写真を、枠いっぱいに広げる */
  background-position: center 58%;     /* 写真のどこを見せるか（横 中央・縦 58%） */
  …
}

.hero-card {
  position: relative;                 /* 写真より手前に重ねる */
  inline-size: min(80%, 300px);
  margin-block-start: -3rem;          /* 上へ食い込ませて、写真に重ねる */
  margin-inline: auto 1.5rem;         /* 右寄せ */
  text-align: center;
  rotate: -2deg;                      /* マイナスで反時計回りに傾く */
  transition: rotate .4s ease;

  &:hover { rotate: 0deg; }
  …
}

.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;                   /* 左右とも 0。画面の横幅いっぱいに広げる */
  z-index: 100;
  border-block-end: 1px solid var(--line);
  background-color: rgb(252 249 243 / .85);   /* 少し透ける紙の色 */
  backdrop-filter: blur(10px);   /* 後ろに流れる内容をすりガラスのようにぼかす */
  …
}

.gnav {
  …
  /* 狭い画面：ボタンで開くまで隠しておく
     開くと、JavaScript が .is-open を付ける。ヘッダーのすぐ下に、画面幅いっぱいで表示する。 */
  @media (width < 60rem) {
    display: none;
    position: fixed;
    inset: var(--header-h) 0 auto;   /* 上 左右 下 の順。上はヘッダーの高さの位置から */
    …
    &.is-open {
      display: grid;
      gap: 1.2rem;
    }
    …
  }
}

function setMenuOpen(isOpen) {
  navToggle.setAttribute('aria-expanded', String(isOpen));   // 属性の値は文字列なので String() で "true" / "false" にする
  nav.classList.toggle('is-open', isOpen);
}

// メニューボタンを押したら、今の状態と逆にする（開いていれば閉じ、閉じていれば開く）
navToggle.addEventListener('click', () => {
  setMenuOpen(navToggle.getAttribute('aria-expanded') !== 'true');
});

// Esc キーでも閉じる
document.addEventListener('keydown', (event) => {
  if (event.key === 'Escape') {
    setMenuOpen(false);
  }
});

// スクロールできる長さ ＝ ページ全体の高さ − 画面の高さ
const scrollableHeight = document.documentElement.scrollHeight - window.innerHeight;
// 「条件 ? A : B」は、条件が正しければ A、そうでなければ B になる書き方
const progress = scrollableHeight > 0 ? Math.min(scrollPosition / scrollableHeight, 1) : 0;
scrollProgress.style.setProperty('--progress', (progress * 100).toFixed(1) + '%');

.scroll-progress {
  position: absolute;
  inset-block-end: -1px;
  inset-inline-start: 0;
  inline-size: var(--progress, 0%);
  block-size: 3px;
  background-image: linear-gradient(90deg, var(--leaf-600), var(--sun-500));   /* 左から右へ、緑から黄色へ */
}

[data-reveal] {
  opacity: 0;
  translate: 0 24px;
  transition: opacity .7s ease, translate .7s ease;

  &.is-revealed {
    opacity: 1;
    translate: 0 0;
  }
}

/* JavaScript が動かないときも、内容は必ず見えるようにする
   <html class="no-js"> の no-js は、JavaScript が動くと main.js が取り除く。
   残っているのは JavaScript が動かなかったときなので、最初から表示しておく。 */
.no-js [data-reveal] {
  opacity: 1;
  translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
  …
  /* すべての要素のアニメーションと変化の時間を、ほぼ 0 にする */
  *, *::before, *::after {
    animation-duration: .01ms;
    transition-duration: .01ms;
  }
  …
  /* 流れ続ける動きは、時間を短くすると高速で回ってしまうので、止める */
  .marquee p { animation: none; }
}

<fieldset class="sim-field">
  <legend>サイズを選ぶ</legend>
  <label class="choice"><input type="radio" name="size" value="3000">S（3,000円）</label>
  <label class="choice"><input type="radio" name="size" value="5000" checked>M（5,000円）</label>
  <label class="choice"><input type="radio" name="size" value="8000">L（8,000円）</label>
</fieldset>
<div class="sim-field">
  <label for="simQuantity">点数：<output id="simQuantityOut" for="simQuantity">1 点</output></label>
  <input type="range" id="simQuantity" min="1" max="5" step="1" value="1">
</div>
…
<p class="sim-result">合計金額<output class="sim-amount" id="simAmount" aria-live="polite">5,300 円</output></p>

.choice {
  …
  input {
    …
    accent-color: var(--sun-500);
  }

  &:has(input:checked) {
    border-color: var(--sun-500);
    background-color: rgb(226 182 94 / .15);
  }
}

const yen = new Intl.NumberFormat('ja-JP');   // 5300 を「5,300」のように 3 桁ごとに区切る書式

function updateEstimate() {
  // 入力欄の値は文字列なので、Number() で数に直してから計算する
  const quantity = Number(quantityInput.value);
  const selectedSize = sizeInputs.find((input) => input.checked);   // 選ばれているラジオボタン
  const basePrice = Number(selectedSize.value);

  // チェックされたオプションだけを取り出し（filter）、価格を足し合わせる（reduce）。0 は足し始めの値
  const optionPrice = optionInputs
    .filter((input) => input.checked)
    .reduce((sum, input) => sum + Number(input.value), 0);
  const total = quantity * (basePrice + optionPrice);

  quantityOutput.textContent = quantity + ' 点';
  amountOutput.textContent = yen.format(total) + ' 円';
}

// スライダーは動かしている最中（input）、ラジオとチェックは選んだとき（change）に計算し直す
quantityInput.addEventListener('input', updateEstimate);

link.addEventListener('click', (event) => {
  // 新しいタブで開く操作（Ctrl キーを押しながらのクリックなど）は、通常のリンクとして扱う。
  if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
    return;
  }
  event.preventDefault();   // リンク本来の動き（画像ファイルへの移動）を止める
  opener = link;
  showGalleryImage(index);
  lightbox.showModal();     // dialog をページの手前に開く
});
…
// 閉じたら、開いたときのリンクにフォーカスを戻す。キーボードで操作する人が、元の場所から続けられる。
// ?. は、opener が null のときは何もしない書き方
lightbox.addEventListener('close', () => {
  opener?.focus();
});

<!-- action の仮 ID を SSGform で発行された ID に替え、転送先を thanks.html に設定する。 -->
<form class="card contact-form" action="https://ssgform.com/s/HidamariFlowerDemo" method="post" data-contact-form data-reveal>
  …
  <label for="contactEmail">メールアドレス <span class="required">必須</span></label>
  <input id="contactEmail" name="メールアドレス" type="email" autocomplete="email" maxlength="254" required>
  …
  <!-- SSGform の簡易スパム対策用。人には見えない欄で、入力があれば迷惑メールとして扱われる。 -->
  <p hidden>
    <label>入力しないでください <input type="text" name="wana" tabindex="-1" autocomplete="off"></label>
  </p>
  <button class="btn" type="submit">送信する…</button>
</form>

contactForm.addEventListener('submit', (event) => {
  requiredFields.forEach((field) => {
    field.setCustomValidity(field.value.trim() ? '' : 'この項目を入力してください。');
  });
  if (!contactForm.reportValidity()) {
    event.preventDefault();   // 送信を止める
  }
});