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