一記事に全部載せてみた ― Claude Code で作るリッチ記事ショーケース
タブ・スライド・カルーセル・アニメーション・紙吹雪・diff・そして遊べるミニゲーム4種まで。ブログの一記事に「無駄に豪華な」HTML 機能を全部載せた、遊び心とシステム実験のデモです。
このサイトのブログは、素の markdown を書くだけで勝手に豪華なページになります。この記事はその「部品」を一枚に全部並べた、遊び心とシステムづくりの実験です。
見出しを付ければ自動で目次・読了バー・ヒーローが付きます。ここから先は、記事の本文に埋め込める「ウィジェット」たちのショーケースです。
タブで切り替える
スライドでめくる
スクロールで現れる
下の段落は、画面に入るとふわっと現れます（prefers-reduced-motion の人には即表示）。
アニメーションは"演出"であって"必須情報"にしない。動きを切っている人にも中身は必ず届きます。
差分（diff）を見せる
コードの変更は緑と赤で。
- const site = "ふつうのブログ";
+ const site = "無駄に豪華なブログ";
publish(site);
バッジと注釈
ステータスは 安定 実験中 NEW のように。
専門語には 注釈 を付けて、読みの流れを止めずに補足できます。
手順を階段で
- markdown に文章と class を書く
- ページの enhancer が起動時に配線する
- 豪華な記事ページが完成する
パラメータをいじる
スライダーを動かすと数値が変わります（デモ）。
つまんで動かす
折りたたみ（native details）
ネタばらしを開く
ここまでの機能は、追加ライブラリほぼゼロ・素の HTML＋小さなスクリプトだけ。重い変換はビルド時に済ませ、配信は静的ファイルです。数字とキーとマーカー
キーボード操作は Ctrl + C のように表示できます。大事な一文は 蛍光ペンで引ける。コードブロックにマウスを乗せると、右上に「コピー」ボタンが出ます（上の diff で試せます）。
このページ自体が"テンプレ"
いま読んでいるこのページには、何も書かなくても付く仕掛けがあります。上部の読了バー、ヒーローの ⏱読了時間、画面を広げると右に出る追従目次、本文冒頭のドロップキャップ、見出しごとの区切り線、右下の ↑ボタン。素の markdown 1 本に、これ全部が自動です。
タイムライン
- ある人が結婚する。
- 式が中止、株価も暴落。そこで投資を始める。
- 資産は当初の十数倍に。そして記事に全部載せ始める。
比較表
| 機能 | ふつうのブログ | このブログ |
|---|---|---|
| 目次 | ✗ | ✓ 自動 |
| タブ / スライド | ✗ | ✓ |
| 追加ライブラリ | 多い | ほぼ 0 |
before / after（仕切りをドラッグ）
カウントアップとゲージ
スポイラー
犯人は 実はにゃび（クリック／Enter で表示）。
サイドノート
これはサイドノート。脱線や注記を、本文の流れを切らずに脇へ逃がせます。
リンクカード
結婚式が飛んだ日に、株価も飛んだ投資を始めた話。内部記事へのリッチなリンク。
クイズ
このブログの追加ライブラリ費用は？
脚注
本文中に参照1を置き、下にまとめられます。
- これは脚注の例。↩ 戻る
アニメーション
スクロールで
左から、
右から、
ズームで、
順に現れます（stagger）。
キラッと光るグラデ文字。ボックスは マウスで傾く。
この行はスクロールでゆっくりズレます（パララックス）。
カルーセル（自動送り・フェード）
ミニゲーム
たかが一記事に、遊べるゲームまで。全部この記事の中で動きます。
🐾 クリッカー（放置系）
⚡ 反射神経テスト
🧠 神経衰弱
🔨 にゃび叩き
書いて、盛って、遊んで、公開する。たかが一記事、されど一記事。