💬 コミュニケーションコミュニティ 🟢 非エンジニアでもOK 👤 管理職・人事・カスタマー対応

💬 Presentation Styling

presentation-styling

プレゼンテーション資料のCSSクラスやコンポーネントのパターン、シンタックスハイライトに関する知識を活かし、視覚的に魅力的な資料を作成するSkill。

⚡ ⏱ クレーム返信ドラフト 15分 → 2分

📺 まず動画で見る(YouTube)

※ jpskill.com 編集部が参考用に選んだ動画です。動画の内容と Skill の挙動は厳密には一致しないことがあります。

📜 元の英語説明(参考)

Knowledge about CSS classes, component patterns, and syntax highlighting in the presentation

🇯🇵 日本人クリエイター向け解説

一言でいうと

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux

mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o presentation-styling.zip https://jpskill.com/download/2016.zip && unzip -o presentation-styling.zip && rm presentation-styling.zip

🪟 Windows (PowerShell)

$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/2016.zip -OutFile "$d\presentation-styling.zip"; Expand-Archive "$d\presentation-styling.zip" -DestinationPath $d -Force; ri "$d\presentation-styling.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)

1. 下の青いボタンを押して presentation-styling.zip をダウンロード
2. ZIPファイルをダブルクリックで解凍 → presentation-styling フォルダができる
3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
4. Claude Code を再起動

⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
- · macOS / Linux: ~/.claude/skills/
- · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →

最終更新: 2026-05-17
取得日時: 2026-05-17
同梱ファイル: 1

💬 こう話しかけるだけ — サンプルプロンプト

› Presentation Styling で、お客様への返信文を作って
› Presentation Styling を使って、社内向けアナウンスを書いて
› Presentation Styling で、メールテンプレートを整備して

これをClaude Code に貼るだけで、このSkillが自動発動します。

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

プレゼンテーションスタイリングスキル

presentation/index.htmlで使用されているCSSクラスとHTMLパターンです。

CSSコンポーネントクラス

レイアウト

.two-col — 24pxのギャップを持つ2カラムグリッドレイアウト
.info-grid — 情報カード用の2カラムグリッド
.col-card — カラム内のカード（緑色の枠線には.good、赤色の枠線には.badを追加します）
.info-card — 情報グリッド内のカード

コンテンツブロック

.trigger-box — 濃い左枠線を持つ灰色のボックス（主要な概念、前提条件用）
.how-to-trigger — 緑色の枠線を持つ緑色のボックス（「試してみる」アクション用）
.warning-box — 警告枠線を持つオレンジ色のボックス（重要な警告用）
.code-block — 等幅フォントの暗いコード表示ブロック

タグとバッジ

.matcher-tag — 灰色のインラインピルタグ
.weight-badge — 緑色のピルバッジ（重み付けされたスライドに対してJSによって自動的に挿入されます）

コードブロックの構文ハイライト

.code-block内で、構文の色付けには以下のスパンを使用します。

<div class="code-block">
<span class="comment"># This is a comment</span>
<span class="key">field_name</span>: <span class="string">value</span>
<span class="cmd">&gt;</span> command to run
</div>

.comment — コメント用の緑色（#6a9955）
.key — プロパティ名/キー用の青色（#9cdcfe）
.string — 文字列値用のオレンジ色（#ce9178）
.cmd — コマンド/プロンプト用の黄色（#dcdcaa）

スライドタイプパターン

2カラムのコンテンツスライド（良い例と悪い例）

<div class="slide" data-slide="N" data-weight="5">
    <h1>Title</h1>
    <div class="two-col">
        <div class="col-card bad">
            <h4>Before (Vibe Coding)</h4>
            <!-- bad example -->
        </div>
        <div class="col-card good">
            <h4>After (Agentic)</h4>
            <!-- good example -->
        </div>
    </div>
</div>

スライドのHTMLに<span class="weight-badge">をハードコードしないでください。プレゼンテーションのJavaScriptがウェイトバッジを自動的に挿入および削除します。

コード例を含むコンテンツスライド

<div class="slide" data-slide="N">
    <h1>Title</h1>
    <div class="trigger-box">
        <h4>Key Concept</h4>
        <p>Description</p>
    </div>
    <div class="code-block"><span class="comment"># Example</span>
<span class="key">field</span>: <span class="string">value</span></div>
</div>

アイコンリストパターン

<div class="use-cases">
    <div class="use-case-item">
        <span class="use-case-icon">EMOJI</span>
        <div class="use-case-text">
            <strong>Title</strong>
            <span>Description text</span>
        </div>
    </div>
</div>

ジャーニーバー固有

.journey-bar — プログレスバーの下に固定されたバー
.journey-bar.hidden — タイトルスライドでは非表示
ジャーニーバーの色は、HSL補間により赤（0%）から緑（100%）に遷移します
ウェイトバッジは、重み付けされたスライドのh1要素にJSによって自動的に挿入されます

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Presentation Styling Skill

CSS classes and HTML patterns used in presentation/index.html.

CSS Component Classes

Layout

.two-col — 2-column grid layout with 24px gap
.info-grid — 2-column grid for info cards
.col-card — Card inside a column (add .good for green border, .bad for red border)
.info-card — Card in an info grid

Content Blocks

.trigger-box — Gray box with dark left border (for key concepts, prerequisites)
.how-to-trigger — Green box with green border (for "Try This" actions)
.warning-box — Orange box with warning border (for important warnings)
.code-block — Dark code display block with monospace font

Lists

.use-cases — Container for icon+text list items
.use-case-item — Individual item with icon and text
.feature-list — Simple bordered list

Tags & Badges

.matcher-tag — Gray inline pill tag
.weight-badge — Green pill badge (auto-injected by JS for weighted slides)

Code Block Syntax Highlighting

Inside .code-block, use these spans for syntax coloring:

<div class="code-block">
<span class="comment"># This is a comment</span>
<span class="key">field_name</span>: <span class="string">value</span>
<span class="cmd">&gt;</span> command to run
</div>

.comment — Green (#6a9955) for comments
.key — Blue (#9cdcfe) for property names/keys
.string — Orange (#ce9178) for string values
.cmd — Yellow (#dcdcaa) for commands/prompts

Slide Type Patterns

Content Slide with Two Columns (Good vs Bad)

<div class="slide" data-slide="N" data-weight="5">
    <h1>Title</h1>
    <div class="two-col">
        <div class="col-card bad">
            <h4>Before (Vibe Coding)</h4>
            <!-- bad example -->
        </div>
        <div class="col-card good">
            <h4>After (Agentic)</h4>
            <!-- good example -->
        </div>
    </div>
</div>

Do not hardcode <span class="weight-badge"> in slide HTML. The presentation JavaScript injects and removes weight badges automatically.

Content Slide with Code Example

<div class="slide" data-slide="N">
    <h1>Title</h1>
    <div class="trigger-box">
        <h4>Key Concept</h4>
        <p>Description</p>
    </div>
    <div class="code-block"><span class="comment"># Example</span>
<span class="key">field</span>: <span class="string">value</span></div>
</div>

Icon List Pattern

<div class="use-cases">
    <div class="use-case-item">
        <span class="use-case-icon">EMOJI</span>
        <div class="use-case-text">
            <strong>Title</strong>
            <span>Description text</span>
        </div>
    </div>
</div>

Journey Bar Specific

.journey-bar — Fixed bar below progress bar
.journey-bar.hidden — Hidden on title slide
Journey bar color transitions from red (0%) to green (100%) via HSL interpolation
Weight badges are auto-injected by JS into h1 elements of weighted slides