YAMLセクション
stat-grid セクション
ガラスカードのグリッド。統計数値・仕様一覧・機能リストを表示。
概要
type: stat-grid はガラスエフェクト（glass-card）のカードをグリッドで並べるセクションです。リンクなしの情報表示用で、タイトルと本文テキストで構成されます。本文には HTML タグが使用できます。sectionClass で背景スタイルを切り替えられます（省略時: section--white）。
見た目のイメージ
セクション（グラスモーフィズム）
┌─────────────────────────────────────┐
│ [英語ラベル] │
│ 日本語見出し │
│ │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ カードタイトル │ │ カードタイトル │ │ カードタイトル │ │
│ │ │ │ │ │ │ │
│ │ 本文テキスト。 │ │ 本文テキスト。 │ │ 本文テキスト。 │ │
│ │ HTMLタグ可。 │ │ HTMLタグ可。 │ │ HTMLタグ可。 │ │
│ └─────────┘ └─────────┘ └─────────┘ │
│ ↑ glass-card（半透明） │
└─────────────────────────────────────┘
パラメータ
セクションパラメータ
| パラメータ | 必須 | 型 | 説明 |
|---|---|---|---|
type |
✅ | string | "stat-grid" 固定 |
sectionClass |
— | string | 外側 <section> の CSS クラス（省略時: "section--white"） |
heading |
— | string | セクション英語ラベル（sectionHeader 上段） |
subheading |
— | string | セクション日本語見出し（sectionHeader 下段） |
items |
✅ | array | カード配列（後述） |
items 各要素
| キー | 必須 | 説明 |
|---|---|---|
title |
✅ | カードタイトル |
text |
— | カード本文（HTML タグ使用可） |
titleClass |
— | card-title への追加 CSS クラス（省略可） |
extraClass |
— | glass-card への追加 CSS クラス（省略可） |
使用例
基本
sections:
- type: stat-grid
heading: "LAYOUT PLUGINS"
subheading: "レイアウトプラグイン"
items:
- title: "layout-header-nav"
text: "グローバルヘッダー。スクロールで <code>is-scrolled</code> クラスが付与されます。"
- title: "layout-footer-kinetic"
text: "グローバルフッター。<code>site.footerDesc</code> でカスタマイズ。"
HTML タグを使った本文
text: の値には HTML タグが使えます。<br> で改行、<code> でコードスタイルを適用できます。
items:
- title: "27 Effects"
text: "Aurora / Snow / Sakura など<br>全 <strong>27種</strong> の背景エフェクト"
titleClass: "card-title--accent"
feature-grid との使い分け
| feature-grid | stat-grid | |
|---|---|---|
| 背景 | 白（section--white） |
白（section--white）※ sectionClass で変更可 |
| カード | リンク付き <a> |
リンクなし <div> |
| 用途 | ページ一覧・ナビゲーション | 仕様・統計・機能説明 |