# HTML Slides

> HTMLで1つのページを縦にスクロールし続ける連続スクロール型のWebネイティブなプレゼンテーションやスライドを設計・制作する。PowerPoint風のページ切り替えを避け、Liquid Glassナビゲーション、タイマー、注釈、スクロール連動アニメーション、sticky表現を備えたHTMLスライドの依頼に使用する。

- Skill: `6uclz1/html-slides` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add 6uclz1/html-slides`
- Raw SKILL.md: https://api.skillmd.com/api/skills/6uclz1/html-slides/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: 6uclz1 (https://skillmd.com/u/6uclz1)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/6uclz1/html-slides

---


# HTML Slides

## Core Experience

- ユーザーが指定したテーマを、1つのHTMLページを縦に連続スクロールして読み進めるプレゼンテーションとして構成する。
- 「HTMLでスライドを作成する方法」を解説する場合は、設計、HTML構造、CSS表現、JavaScriptによるインタラクション、検証の順に理解できる章立てにする。
- PowerPointのようなページ切り替え式にしない。各章を必要に応じて画面高いっぱいに見せながら、背景、グラデーション、余白で連続した流れを作る。
- Apple公式サイトのような、スクロールによって情報の焦点、奥行き、展開が変化する体験を目指す。特定サイトの外観を複製せず、スクロールを情報設計に活用する。
- 画面幅いっぱいの背景を途切れさせず、章ごとの色、光、画像、グラデーションが自然に移り変わるようにする。

## Liquid Glass Interface

- 左側にLiquid Glass風のサイドバーを固定し、章タイトルと現在位置を表示する。
- サイドバーを背景から切り離された不透明パネルにしない。半透明の色、`backdrop-filter`、薄い境界線、ハイライト、影を使い、背後の背景色と光の影響を受けるようにする。
- 現在の章を明確に強調し、ナビ項目の選択で対応する章へスムーズにスクロールできるようにする。
- サイドバー左下に経過時間タイマーを配置し、プレゼンテーション中に常時確認できるようにする。
- 画面右下にLiquid Glass風の注釈UIをフローティング表示し、現在の章に対応する補足、話者メモ、要点を表示する。
- 小さい画面ではサイドバーと注釈UIを縮小、折りたたみ、または再配置し、本文を隠さないようにする。

## Scroll Interaction

- 各章の要素にフェード、移動、スケール、段階的表示を加え、スクロール位置に応じて自然に登場させる。
- 重要な説明、図、コード例には`sticky`表現を使い、周囲の内容が進行する間も焦点を維持する。
- `IntersectionObserver`または同等の仕組みで現在の章を判定し、サイドバーの強調表示と右下の注釈を同期して更新する。
- アニメーションはネイティブスクロールを妨げない範囲に保ち、キーボード、トラックパッド、マウス、タッチ操作で同じ内容へ到達できるようにする。
- `prefers-reduced-motion`を尊重し、動きを減らした環境でも情報と現在位置が失われないフォールバックを用意する。

## Implementation And Validation

- 指定がなければ、セマンティックなHTML、CSS、JavaScriptを1つの実行可能なHTMLファイルにまとめる。状態管理、表示ロジック、スタイルの責務を分けて保守しやすくする。
- 章ごとに安定した`id`を付け、ナビゲーション、現在位置判定、注釈データを同じ章定義から参照できるようにする。
- レスポンシブ表示、十分な文字コントラスト、フォーカス表示、横スクロールの防止を実装する。
- 実ブラウザでスクロールし、現在位置ナビ、タイマー、章別注釈、フェード、`sticky`表現が連動することを確認する。
- デスクトップ幅とモバイル幅の両方で、本文、サイドバー、注釈UIが重ならず、最後の章まで自然に到達できることを検証する。