html-ppt-course-module

HTML PPT・コースモジュール

html-ppt のマスタースキルへの、焦点を絞った導入です。ユーザーを course-module のフルデッキテンプレートへ直接案内します。

このカードを選ぶ場面

Examples ギャラリーでは、「Use this prompt」が上記の example_prompt に紐付けられています。このプロンプトを受け入れたとき、ユーザーが course-module のビジュアルアイデンティティそのものを求めているなら、このカードが適しています（スクリーンショットと選定理由については、上流のフルデッキカタログを参照してください）。

デッキの作成方法

1. まずマスタースキルを読みます。 作成ルールはすべて design-templates/html-ppt/SKILL.md に記載されています。内容と対象読者のチェックリスト、 トークンのルール、レイアウトの再利用、プレゼンターモード、キーボードランタイム、および 「スライドにプレゼンター専用のテキストを載せない」というルールが含まれます。
2. 該当するテンプレートフォルダーを使用します。 design-templates/html-ppt/templates/full-decks/course-module/ から index.html と style.css をプロジェクトにコピーし、.tpl-course-module の body クラスはそのままにします。
3. 共有ランタイムもテンプレートと一緒に配置します。 上流の index.html は ../../../assets/... 経由で共有 CSS／JS を読み込みます。これは design-templates/html-ppt/templates/full-decks/ の中で3階層下にあるためです。 index.html をプロジェクトにコピーすると、これらの親相対 URL は解決できなくなり、 base.css、animations.css、runtime.js が404エラーになります。 その結果、デッキが有効にならず、スライドのナビゲーションも機能しません。 プロジェクトごとに、次のいずれかの方法を選んでください。
   • 方法A — コピーして書き換える（推奨）： 以下をコピーします。 design-templates/html-ppt/assets/fonts.css、design-templates/html-ppt/assets/base.css、 design-templates/html-ppt/assets/animations/animations.css、および design-templates/html-ppt/assets/runtime.js をプロジェクト内の assets/（assets/animations/animations.css を含む）に配置し、index.html 内の4つの <link>／<script> タグを、../../../assets/... からプロジェクト内の対応するパス （assets/fonts.css、assets/base.css、 assets/animations/animations.css、assets/runtime.js）に書き換えます。
   • 方法B — インライン化する： 同じ4つのファイルを読み込み、それぞれの <link rel="stylesheet" href="../../../assets/..."> を、ファイルの内容を含む <style>...</style> に置き換えます。また、 <script src="../../../assets/runtime.js"> を、runtime.js の内容を含む <script>...</script> に置き換えます。これにより、自己完結型の index.html が1つできます。 どちらの方法でも、上流の ../../../assets/... URL をそのままプロジェクトの成果物に 含めないでください。これらの URL が機能するのはリポジトリ内だけです。
4. テーマを選びます。 デフォルトのトークンで問題なければそのまま使えます。別の 雰囲気にしたい場合は、design-templates/html-ppt/assets/themes/*.css にある36種類のテーマから いずれかを <link id="theme-link"> で読み込み、T キーで切り替えられるようにします。
5. クラスではなく、デモコンテンツを置き換えます。 .tpl-course-module のスコープ付き CSS が 認識するのはテンプレートに含まれる構造クラスだけなので、そのまま維持してください。
6. スピーカーノートは <aside class="notes"> または <div class="notes"> の中に記述します。 スライド上に表示されるテキストとして記述してはいけません。

クレジット表記

ビジュアルシステム、レイアウト、テーマ、およびランタイムのキーボードモデルは、 MITライセンスの上流プロジェクト lewislulu/html-ppt-skill に由来します。LICENSE ファイルは design-templates/html-ppt/LICENSE に同梱されています。再配布する際は、そのまま保持してください。