Initial commit
This commit is contained in:
Zhongwei Li
441
skills/marp-slide/references/advanced-features.md
Normal file
441
skills/marp-slide/references/advanced-features.md
Normal file
@@ -0,0 +1,441 @@
|
||||
# Marp 高度な機能リファレンス
|
||||
|
||||
Marp CoreとMarpitの高度な機能。
|
||||
|
||||
## Fragmented List（段階的表示）
|
||||
|
||||
リストアイテムを段階的に表示する機能（アニメーション効果）。
|
||||
|
||||
公式ドキュメント: https://github.com/marp-team/marpit/tree/main/docs/fragmented-list
|
||||
|
||||
### 基本的な使い方
|
||||
|
||||
```markdown
|
||||
* Item 1
|
||||
* Item 2
|
||||
* Item 3
|
||||
```
|
||||
|
||||
通常、すべてのアイテムが一度に表示されます。
|
||||
|
||||
### アスタリスク（*）の使用
|
||||
|
||||
```markdown
|
||||
* Item 1
|
||||
* Item 2
|
||||
* Item 3
|
||||
```
|
||||
|
||||
Marp CLIで`--html`オプション使用時、各アイテムが順次表示されます。
|
||||
|
||||
### 注意事項
|
||||
|
||||
- **HTML出力時のみ有効**: PDF/PPTX/画像では効果なし
|
||||
- **プレゼンテーションモード**: ブラウザでのプレゼンテーション時に機能
|
||||
- **Marp for VS Code**: プレビューでは動作しない場合あり
|
||||
|
||||
## 数式記法（Marp Core拡張）
|
||||
|
||||
Pandoc形式の数式をサポート。KaTeXを使用してレンダリング。
|
||||
|
||||
公式: https://github.com/marp-team/marp-core#math-typesetting
|
||||
|
||||
### インライン数式
|
||||
|
||||
```markdown
|
||||
文中に $E = mc^2$ を挿入
|
||||
```
|
||||
|
||||
### ブロック数式
|
||||
|
||||
```markdown
|
||||
$$
|
||||
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
|
||||
$$
|
||||
```
|
||||
|
||||
### 複数行の数式
|
||||
|
||||
```markdown
|
||||
$$
|
||||
\begin{aligned}
|
||||
f(x) &= x^2 + 2x + 1 \\
|
||||
&= (x + 1)^2
|
||||
\end{aligned}
|
||||
$$
|
||||
```
|
||||
|
||||
### 数式の例
|
||||
|
||||
```markdown
|
||||
## 二次方程式の解
|
||||
|
||||
$$
|
||||
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
|
||||
$$
|
||||
|
||||
## オイラーの等式
|
||||
|
||||
$$
|
||||
e^{i\pi} + 1 = 0
|
||||
$$
|
||||
```
|
||||
|
||||
### 注意事項
|
||||
|
||||
- **KaTeX記法**: LaTeX構文のサブセット
|
||||
- **サポート外の記法**: 一部のLaTeX機能は非対応
|
||||
- **KaTeX公式**: https://katex.org/docs/supported.html
|
||||
|
||||
## 絵文字（Marp Core拡張）
|
||||
|
||||
GitHub Emoji記法をサポート。
|
||||
|
||||
公式: https://github.com/marp-team/marp-core#emoji
|
||||
|
||||
### 使用方法
|
||||
|
||||
```markdown
|
||||
:smile: :heart: :+1: :sparkles:
|
||||
```
|
||||
|
||||
レンダリング結果: 😄 ❤️ 👍 ✨
|
||||
|
||||
### よく使う絵文字
|
||||
|
||||
```markdown
|
||||
:arrow_right: →
|
||||
:check: ✓
|
||||
:x: ✗
|
||||
:bulb: 💡
|
||||
:warning: ⚠️
|
||||
:rocket: 🚀
|
||||
:tada: 🎉
|
||||
```
|
||||
|
||||
### 絵文字リスト
|
||||
|
||||
完全なリスト: https://github.com/ikatyang/emoji-cheat-sheet
|
||||
|
||||
## Auto-scaling（自動スケーリング）
|
||||
|
||||
テキストが多い場合、自動的にフォントサイズを調整。
|
||||
|
||||
### 無効化
|
||||
|
||||
```markdown
|
||||
---
|
||||
marp: true
|
||||
---
|
||||
|
||||
<!-- _class: no-scaling -->
|
||||
|
||||
# 自動スケーリングなし
|
||||
```
|
||||
|
||||
カスタムCSSで制御：
|
||||
|
||||
```css
|
||||
section.no-scaling {
|
||||
--marpit-auto-scaling: off;
|
||||
}
|
||||
```
|
||||
|
||||
## HTMLタグの使用
|
||||
|
||||
Markdown内で直接HTMLを記述可能。
|
||||
|
||||
### 配置制御
|
||||
|
||||
```markdown
|
||||
<div style="text-align: center;">
|
||||
中央配置のテキスト
|
||||
</div>
|
||||
```
|
||||
|
||||
### 2カラムレイアウト
|
||||
|
||||
```markdown
|
||||
<div style="display: flex;">
|
||||
<div style="flex: 1;">
|
||||
|
||||
## 左側
|
||||
|
||||
- ポイント1
|
||||
- ポイント2
|
||||
|
||||
</div>
|
||||
<div style="flex: 1;">
|
||||
|
||||
## 右側
|
||||
|
||||
- ポイント3
|
||||
- ポイント4
|
||||
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### スタイル付きボックス
|
||||
|
||||
```markdown
|
||||
<div style="background-color: #e3f2fd; padding: 20px; border-radius: 8px;">
|
||||
|
||||
**重要なポイント**
|
||||
|
||||
ここに重要な内容を記述
|
||||
|
||||
</div>
|
||||
```
|
||||
|
||||
## Marp CLI 詳細オプション
|
||||
|
||||
公式: https://github.com/marp-team/marp-cli
|
||||
|
||||
### 基本的なコマンド
|
||||
|
||||
```bash
|
||||
# HTMLに変換
|
||||
marp slide.md
|
||||
|
||||
# PDFに変換
|
||||
marp slide.md --pdf
|
||||
|
||||
# PowerPointに変換
|
||||
marp slide.md --pptx
|
||||
|
||||
# 画像に変換
|
||||
marp slide.md --images png
|
||||
```
|
||||
|
||||
### 監視モード
|
||||
|
||||
```bash
|
||||
# ファイルを監視して自動変換
|
||||
marp -w slide.md
|
||||
|
||||
# サーバーモードで監視
|
||||
marp -s -w slide.md
|
||||
```
|
||||
|
||||
### テーマ指定
|
||||
|
||||
```bash
|
||||
# カスタムテーマを使用
|
||||
marp slide.md --theme custom-theme.css
|
||||
|
||||
# テーマディレクトリを指定
|
||||
marp slide.md --theme-set themes/
|
||||
```
|
||||
|
||||
### 複数ファイルの一括変換
|
||||
|
||||
```bash
|
||||
# ディレクトリ内のすべてのMarkdownを変換
|
||||
marp slides/*.md
|
||||
|
||||
# 出力ディレクトリを指定
|
||||
marp slides/*.md -o output/
|
||||
```
|
||||
|
||||
### HTML出力オプション
|
||||
|
||||
```bash
|
||||
# HTML出力（単一ファイル）
|
||||
marp slide.md -o output.html
|
||||
|
||||
# スタンドアロンHTML（CDN使用）
|
||||
marp slide.md --html
|
||||
```
|
||||
|
||||
### PDF出力オプション
|
||||
|
||||
```bash
|
||||
# PDF出力
|
||||
marp slide.md --pdf --allow-local-files
|
||||
|
||||
# ページ番号なしでPDF
|
||||
marp slide.md --pdf --pdf-notes
|
||||
```
|
||||
|
||||
### 画像出力
|
||||
|
||||
```bash
|
||||
# PNG画像として出力
|
||||
marp slide.md --images png
|
||||
|
||||
# JPEG画像として出力
|
||||
marp slide.md --images jpeg
|
||||
|
||||
# 解像度指定
|
||||
marp slide.md --images png --image-scale 2
|
||||
```
|
||||
|
||||
## Marp for VS Code
|
||||
|
||||
公式: https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode
|
||||
|
||||
### 有効化
|
||||
|
||||
Markdownファイルのフロントマターに記述：
|
||||
|
||||
```markdown
|
||||
---
|
||||
marp: true
|
||||
---
|
||||
```
|
||||
|
||||
### プレビュー
|
||||
|
||||
- `Ctrl+Shift+V` (Win/Linux)
|
||||
- `Cmd+Shift+V` (Mac)
|
||||
|
||||
### エクスポート
|
||||
|
||||
1. コマンドパレット (`Ctrl+Shift+P`)
|
||||
2. "Marp: Export slide deck..."を選択
|
||||
3. 形式を選択（HTML/PDF/PPTX/PNG/JPEG）
|
||||
|
||||
### 設定
|
||||
|
||||
VS Codeの設定でカスタマイズ可能：
|
||||
|
||||
```json
|
||||
{
|
||||
"markdown.marp.themes": [
|
||||
"./themes/custom-theme.css"
|
||||
],
|
||||
"markdown.marp.enableHtml": true
|
||||
}
|
||||
```
|
||||
|
||||
## GitHub Actions での自動ビルド
|
||||
|
||||
公式: https://github.com/marketplace/actions/marp-action
|
||||
|
||||
### 基本的なワークフロー
|
||||
|
||||
```yaml
|
||||
name: Marp Build
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [ main ]
|
||||
|
||||
jobs:
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
|
||||
- name: Marp Build
|
||||
uses: docker://marpteam/marp-cli:latest
|
||||
with:
|
||||
args: slides.md --pdf --allow-local-files
|
||||
|
||||
- name: Upload PDF
|
||||
uses: actions/upload-artifact@v3
|
||||
with:
|
||||
name: slides
|
||||
path: slides.pdf
|
||||
```
|
||||
|
||||
### GitHub Pagesへの公開
|
||||
|
||||
```yaml
|
||||
- name: Marp to Pages
|
||||
uses: docker://marpteam/marp-cli:latest
|
||||
with:
|
||||
args: slides.md -o index.html
|
||||
|
||||
- name: Deploy to Pages
|
||||
uses: peaceiris/actions-gh-pages@v3
|
||||
with:
|
||||
github_token: ${{ secrets.GITHUB_TOKEN }}
|
||||
publish_dir: ./
|
||||
```
|
||||
|
||||
## Tips & Tricks
|
||||
|
||||
### 1. スライド番号のカスタマイズ
|
||||
|
||||
```css
|
||||
section::after {
|
||||
content: 'Page ' attr(data-marpit-pagination);
|
||||
}
|
||||
```
|
||||
|
||||
### 2. 背景のグラデーション
|
||||
|
||||
```markdown
|
||||
---
|
||||
backgroundImage: linear-gradient(135deg, #667eea 0%, #764ba2 100%)
|
||||
color: white
|
||||
---
|
||||
```
|
||||
|
||||
### 3. 2段組レイアウト
|
||||
|
||||
```markdown
|
||||
<div class="columns">
|
||||
<div>
|
||||
|
||||
左側のコンテンツ
|
||||
|
||||
</div>
|
||||
<div>
|
||||
|
||||
右側のコンテンツ
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.columns {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 2rem;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 4. プログレスバー
|
||||
|
||||
```css
|
||||
section::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: calc(var(--paginate) / var(--paginate-total) * 100%);
|
||||
height: 5px;
|
||||
background-color: #3b82f6;
|
||||
}
|
||||
```
|
||||
|
||||
## トラブルシューティング
|
||||
|
||||
### PDFが生成されない
|
||||
|
||||
- ChromeまたはEdgeがインストールされているか確認
|
||||
- `--allow-local-files`オプションを追加
|
||||
|
||||
### フォントが表示されない
|
||||
|
||||
- Google Fontsなどは`@import`で読み込む
|
||||
- ローカルフォントは絶対パスで指定
|
||||
|
||||
### 画像が表示されない
|
||||
|
||||
- 画像の相対パスを確認
|
||||
- `--allow-local-files`が必要な場合あり
|
||||
|
||||
## 公式リファレンス集
|
||||
|
||||
- **Marp公式サイト**: https://marp.app/
|
||||
- **Marpit Directives**: https://marpit.marp.app/directives
|
||||
- **Image Syntax**: https://marpit.marp.app/image-syntax
|
||||
- **Theme CSS**: https://marpit.marp.app/theme-css
|
||||
- **Marp Core**: https://github.com/marp-team/marp-core
|
||||
- **Marp CLI**: https://github.com/marp-team/marp-cli
|
||||
- **VS Code Extension**: https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode
|
||||
160
skills/marp-slide/references/best-practices.md
Normal file
160
skills/marp-slide/references/best-practices.md
Normal file
@@ -0,0 +1,160 @@
|
||||
# Marpスライド作成ベストプラクティス
|
||||
|
||||
「かっこいい」高品質なスライドを作成するためのガイドライン。
|
||||
|
||||
## スライドタイトル（h2）
|
||||
|
||||
### ✅ 良い例
|
||||
- **簡潔に**：5-7文字程度
|
||||
- **分かりやすく**：内容が一目で理解できる
|
||||
- **一貫性**：同じ階層では同じ文体を使う
|
||||
|
||||
```markdown
|
||||
## 導入
|
||||
## 課題
|
||||
## 解決策
|
||||
## 効果
|
||||
```
|
||||
|
||||
### ❌ 悪い例
|
||||
```markdown
|
||||
## この章では導入について説明します
|
||||
## 私たちが直面している課題とは何か
|
||||
```
|
||||
|
||||
## 箇条書き
|
||||
|
||||
### ✅ 良い例
|
||||
- **3-5項目**：多すぎない
|
||||
- **簡潔に**：1行あたり15-25文字程度
|
||||
- **並列性**：同じ階層では同じ文法構造
|
||||
|
||||
```markdown
|
||||
- シンプルで分かりやすい
|
||||
- 統一感のあるデザイン
|
||||
- 効果的な情報伝達
|
||||
```
|
||||
|
||||
### ❌ 悪い例
|
||||
```markdown
|
||||
- これは非常に長い説明文で、一行に収まりきらないため読みにくくなってしまいます
|
||||
- 短い
|
||||
- 次の項目は文章形式になっています。このように統一感がないと読みにくいです。
|
||||
```
|
||||
|
||||
## スライド構成
|
||||
|
||||
### 基本構造
|
||||
|
||||
1. **タイトルスライド**（`<!-- _class: lead -->`）
|
||||
- タイトル
|
||||
- 発表者名
|
||||
- 日付
|
||||
|
||||
2. **アジェンダスライド**
|
||||
- 全体の流れを示す
|
||||
- 3-5項目程度
|
||||
|
||||
3. **本文スライド**
|
||||
- 1スライド = 1メッセージ
|
||||
- タイトルで内容を要約
|
||||
|
||||
4. **まとめスライド**
|
||||
- 要点を再確認
|
||||
- 感謝の言葉
|
||||
|
||||
### スライド枚数の目安
|
||||
|
||||
- 5分プレゼン：5-8枚
|
||||
- 10分プレゼン：10-15枚
|
||||
- 20分プレゼン：15-25枚
|
||||
|
||||
## テキスト量
|
||||
|
||||
### ✅ 良いバランス
|
||||
|
||||
```markdown
|
||||
## 製品の特徴
|
||||
|
||||
- 高速処理
|
||||
- 直感的なUI
|
||||
- 拡張性の高い設計
|
||||
```
|
||||
|
||||
### ❌ 詰め込みすぎ
|
||||
|
||||
```markdown
|
||||
## 製品について
|
||||
|
||||
この製品は、最新のテクノロジーを活用して開発されました。
|
||||
主な特徴として、以下の7点が挙げられます：
|
||||
- 特徴1: 詳細な説明が長々と続く...
|
||||
- 特徴2: さらに詳しい説明...
|
||||
（以下省略）
|
||||
```
|
||||
|
||||
## 余白の使い方
|
||||
|
||||
- **適度な余白**：情報を詰め込みすぎない
|
||||
- **視線誘導**：重要な情報に自然と目が向く配置
|
||||
- **呼吸**：スライド間にも適度な「間」を
|
||||
|
||||
## 色の使い方
|
||||
|
||||
テーマで定義された色を活用：
|
||||
- **背景色**：`#f8f8f4`（明るいベージュ）
|
||||
- **テキスト色**：`#3a3b5a`（濃いネイビー）
|
||||
- **見出し色**：`#4f86c6`（青）
|
||||
- **アクセント色**：`#000000`（黒）
|
||||
|
||||
### 追加の色を使う場合
|
||||
|
||||
```markdown
|
||||
<span style="color: #c62828;">重要なポイント</span>
|
||||
```
|
||||
|
||||
控えめに使用し、過度な装飾を避ける。
|
||||
|
||||
## 画像の使用
|
||||
|
||||
### 効果的な使い方
|
||||
|
||||
- **目的を明確に**：装飾ではなく、理解を助けるため
|
||||
- **高品質**：解像度の高い画像を使用
|
||||
- **適切なサイズ**：大きすぎず小さすぎず
|
||||
|
||||
### 配置のコツ
|
||||
|
||||
```markdown
|
||||
# 左にテキスト、右に画像
|
||||
|
||||
|
||||
- ポイント1
|
||||
- ポイント2
|
||||
```
|
||||
|
||||
## フォントサイズの目安
|
||||
|
||||
テーマで定義済み：
|
||||
- h1: 56px（タイトルスライドのみ）
|
||||
- h2: 40px（通常スライドのタイトル）
|
||||
- h3: 28px（サブ見出し）
|
||||
- 本文: 22px
|
||||
|
||||
## アニメーションとトランジション
|
||||
|
||||
Marpは基本的にアニメーション非対応。
|
||||
シンプルなスライド遷移に集中する。
|
||||
|
||||
## チェックリスト
|
||||
|
||||
スライド完成後、以下を確認：
|
||||
|
||||
- [ ] タイトルは簡潔か（5-7文字）
|
||||
- [ ] 箇条書きは3-5項目か
|
||||
- [ ] 1スライド1メッセージか
|
||||
- [ ] テキスト量は適切か
|
||||
- [ ] 余白は十分か
|
||||
- [ ] 画像は効果的に使われているか
|
||||
- [ ] 全体の統一感はあるか
|
||||
- [ ] スライド枚数は適切か
|
||||
288
skills/marp-slide/references/image-patterns.md
Normal file
288
skills/marp-slide/references/image-patterns.md
Normal file
@@ -0,0 +1,288 @@
|
||||
# Marp 画像記法リファレンス
|
||||
|
||||
Marpit公式の画像記法に基づく、画像の配置とスタイリング方法。
|
||||
|
||||
公式ドキュメント: https://marpit.marp.app/image-syntax
|
||||
|
||||
## 基本的な画像挿入
|
||||
|
||||
### 通常の画像
|
||||
|
||||
```markdown
|
||||
|
||||
|
||||
```
|
||||
|
||||
画像はコンテンツとして表示されます。
|
||||
|
||||
### サイズ指定
|
||||
|
||||
Marpでは画像にサイズキーワードを追加可能：
|
||||
|
||||
```markdown
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
||||
**サポートされる単位**:
|
||||
- `px` - ピクセル
|
||||
- `%` - パーセント
|
||||
- `em`, `rem`, `cm`, `mm`, `in`, `pt`, `pc`
|
||||
|
||||
**省略形**:
|
||||
- `w:` = `width:`
|
||||
- `h:` = `height:`
|
||||
|
||||
## 背景画像 (`bg`キーワード)
|
||||
|
||||
### 基本的な背景画像
|
||||
|
||||
```markdown
|
||||
|
||||
```
|
||||
|
||||
画像をスライドの背景として配置します。テキストコンテンツと重ならず、背景に配置されます。
|
||||
|
||||
### 背景サイズキーワード
|
||||
|
||||
```markdown
|
||||
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
||||
| キーワード | 動作 | CSS相当 |
|
||||
|----------|------|--------|
|
||||
| `fit` | アスペクト比を保ちスライド内に収める | `background-size: contain` |
|
||||
| `cover` | アスペクト比を保ちスライド全体を覆う | `background-size: cover` |
|
||||
| `contain` | `fit`と同じ | `background-size: contain` |
|
||||
| `auto` | 元のサイズ | `background-size: auto` |
|
||||
|
||||
### 背景サイズ（数値指定）
|
||||
|
||||
```markdown
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
||||
CSSの`background-size`プロパティと同じ構文をサポート。
|
||||
|
||||
## 分割背景（Split Backgrounds）
|
||||
|
||||
複数の背景画像を使って画面を分割できます。
|
||||
|
||||
### 基本的な分割
|
||||
|
||||
```markdown
|
||||
|
||||
|
||||
```
|
||||
|
||||
2つの画像が左右に分割表示されます。
|
||||
|
||||
### 3分割以上
|
||||
|
||||
```markdown
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
||||
3つ以上の画像は等分に分割されます。
|
||||
|
||||
### 分割方向の指定
|
||||
|
||||
デフォルトは水平分割（horizontal）ですが、垂直分割も可能：
|
||||
|
||||
```markdown
|
||||
|
||||
|
||||
```
|
||||
|
||||
`vertical`キーワードで垂直分割に変更。
|
||||
|
||||
### 左右の配置指定
|
||||
|
||||
```markdown
|
||||
|
||||
```
|
||||
|
||||
画像を左側に配置し、右側にテキストスペースを確保。
|
||||
|
||||
```markdown
|
||||
|
||||
```
|
||||
|
||||
画像を右側に配置し、左側にテキストスペースを確保。
|
||||
|
||||
### サイズ比率の指定
|
||||
|
||||
```markdown
|
||||
|
||||
```
|
||||
|
||||
左側33%に画像、右側67%にテキストスペース。
|
||||
|
||||
```markdown
|
||||
|
||||
```
|
||||
|
||||
右側60%に画像、左側40%にテキストスペース。
|
||||
|
||||
## フィルター効果
|
||||
|
||||
### 明度調整
|
||||
|
||||
```markdown
|
||||
|
||||
|
||||
```
|
||||
|
||||
値の範囲: 0（真っ黒）〜 1（通常）〜 2以上（明るく）
|
||||
|
||||
### コントラスト
|
||||
|
||||
```markdown
|
||||
|
||||
|
||||
```
|
||||
|
||||
### ぼかし
|
||||
|
||||
```markdown
|
||||
|
||||
```
|
||||
|
||||
### グレースケール
|
||||
|
||||
```markdown
|
||||
|
||||
|
||||
```
|
||||
|
||||
値の範囲: 0（カラー）〜 1（完全なグレースケール）
|
||||
|
||||
### セピア
|
||||
|
||||
```markdown
|
||||
|
||||
|
||||
```
|
||||
|
||||
### 色相回転
|
||||
|
||||
```markdown
|
||||
|
||||
```
|
||||
|
||||
### 反転
|
||||
|
||||
```markdown
|
||||
|
||||
|
||||
```
|
||||
|
||||
### 透明度
|
||||
|
||||
```markdown
|
||||
|
||||
```
|
||||
|
||||
### 彩度
|
||||
|
||||
```markdown
|
||||
|
||||
```
|
||||
|
||||
### 複数のフィルター
|
||||
|
||||
```markdown
|
||||
|
||||
```
|
||||
|
||||
## 実用的なパターン例
|
||||
|
||||
### パターン1: 左にテキスト、右に画像
|
||||
|
||||
```markdown
|
||||
## プロダクト紹介
|
||||
|
||||
|
||||
|
||||
- 特徴1
|
||||
- 特徴2
|
||||
- 特徴3
|
||||
```
|
||||
|
||||
### パターン2: 背景画像 + オーバーレイテキスト
|
||||
|
||||
```markdown
|
||||
|
||||
|
||||
# キャッチコピー
|
||||
|
||||
サブテキスト
|
||||
```
|
||||
|
||||
暗くした背景の上に白いテキストを配置。
|
||||
|
||||
### パターン3: 複数画像の比較
|
||||
|
||||
```markdown
|
||||
|
||||
|
||||
```
|
||||
|
||||
Before/Afterを左右に並べる。
|
||||
|
||||
### パターン4: 縦並び比較
|
||||
|
||||
```markdown
|
||||
|
||||
|
||||
```
|
||||
|
||||
上下に画像を配置。
|
||||
|
||||
### パターン5: サイズ指定した通常画像
|
||||
|
||||
```markdown
|
||||
## 図解
|
||||
|
||||
|
||||
|
||||
上記の図は...
|
||||
```
|
||||
|
||||
### パターン6: 3分割レイアウト
|
||||
|
||||
```markdown
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
||||
### パターン7: フィルター効果を使った背景
|
||||
|
||||
```markdown
|
||||
|
||||
|
||||
# 見やすいテキスト
|
||||
|
||||
ぼかしと暗さで背景を控えめに
|
||||
```
|
||||
|
||||
## 注意事項
|
||||
|
||||
1. **背景画像とテキスト**: `![bg]`画像は背景レイヤーに配置され、テキストと重なりません
|
||||
2. **複数背景の順序**: 記述順に左から右（または上から下）に配置されます
|
||||
3. **フィルター対応**: すべてのフィルターがすべての環境で動作するとは限りません
|
||||
4. **相対パス**: 画像パスはMarkdownファイルからの相対パスで指定
|
||||
|
||||
## 公式リファレンス
|
||||
|
||||
詳細は公式ドキュメントを参照：
|
||||
- **Image syntax**: https://marpit.marp.app/image-syntax
|
||||
256
skills/marp-slide/references/marp-syntax.md
Normal file
256
skills/marp-slide/references/marp-syntax.md
Normal file
@@ -0,0 +1,256 @@
|
||||
# Marp 基本構文リファレンス
|
||||
|
||||
公式ドキュメントに基づくMarpの基本的な書き方。
|
||||
|
||||
## フロントマター（Directives）
|
||||
|
||||
### 基本構造
|
||||
|
||||
```markdown
|
||||
---
|
||||
marp: true
|
||||
theme: default
|
||||
paginate: true
|
||||
---
|
||||
```
|
||||
|
||||
### 主要なグローバルディレクティブ
|
||||
|
||||
| ディレクティブ | 説明 | 値の例 |
|
||||
|------------|------|-------|
|
||||
| `marp` | Marp機能の有効化 | `true` |
|
||||
| `theme` | テーマの指定 | `default`, `gaia`, `uncover` |
|
||||
| `size` | スライドサイズ（Marp Core拡張） | `16:9`, `4:3`, `A4` |
|
||||
| `paginate` | ページ番号の表示 | `true`, `false` |
|
||||
| `header` | 全スライドのヘッダー | 任意のテキスト |
|
||||
| `footer` | 全スライドのフッター | 任意のテキスト |
|
||||
| `backgroundColor` | 背景色 | `#fff`, `white` |
|
||||
| `backgroundImage` | 背景画像 | `url('image.png')` |
|
||||
| `color` | テキスト色 | `#000`, `black` |
|
||||
| `class` | CSSクラスの適用 | `lead`, `invert` |
|
||||
|
||||
### サイズディレクティブ（Marp Core）
|
||||
|
||||
```markdown
|
||||
---
|
||||
size: 16:9
|
||||
---
|
||||
```
|
||||
|
||||
利用可能なサイズ：
|
||||
- `16:9` (1280x720, デフォルト)
|
||||
- `4:3` (960x720)
|
||||
- `A4` (210mm x 297mm)
|
||||
|
||||
### ページ固有のディレクティブ
|
||||
|
||||
スライドごとに設定を変更する場合、`<!-- ディレクティブ名: 値 -->`形式で記述：
|
||||
|
||||
```markdown
|
||||
<!-- _class: lead -->
|
||||
<!-- _backgroundColor: black -->
|
||||
<!-- _color: white -->
|
||||
|
||||
# このスライドだけ適用
|
||||
```
|
||||
|
||||
**アンダースコア `_` の意味**：
|
||||
- `_`なし：以降の全スライドに適用
|
||||
- `_`あり：現在のスライドのみ適用
|
||||
|
||||
## スライドの区切り
|
||||
|
||||
```markdown
|
||||
---
|
||||
|
||||
# 最初のスライド
|
||||
|
||||
---
|
||||
|
||||
# 次のスライド
|
||||
|
||||
---
|
||||
```
|
||||
|
||||
`---`（水平線）で新しいスライドに切り替わります。
|
||||
|
||||
## ヘッダーとフッター
|
||||
|
||||
### グローバル設定
|
||||
|
||||
```markdown
|
||||
---
|
||||
header: '講義名'
|
||||
footer: '2024年10月'
|
||||
---
|
||||
```
|
||||
|
||||
### スライドごとの設定
|
||||
|
||||
```markdown
|
||||
<!-- header: 'セクション1' -->
|
||||
<!-- footer: 'ページ番号表示' -->
|
||||
```
|
||||
|
||||
### 無効化
|
||||
|
||||
```markdown
|
||||
<!-- header: '' -->
|
||||
<!-- footer: '' -->
|
||||
```
|
||||
|
||||
## ページネーション（ページ番号）
|
||||
|
||||
```markdown
|
||||
---
|
||||
paginate: true
|
||||
---
|
||||
```
|
||||
|
||||
テーマによって表示位置やスタイルが異なります。
|
||||
|
||||
特定のスライドで非表示：
|
||||
```markdown
|
||||
<!-- paginate: false -->
|
||||
```
|
||||
|
||||
または：
|
||||
```markdown
|
||||
<!-- _paginate: false -->
|
||||
```
|
||||
|
||||
## インラインスタイル
|
||||
|
||||
### Markdown内でのスタイル指定
|
||||
|
||||
```markdown
|
||||
---
|
||||
marp: true
|
||||
---
|
||||
|
||||
<style>
|
||||
section {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
|
||||
# スライド
|
||||
```
|
||||
|
||||
### Scoped Style
|
||||
|
||||
特定のスライドのみにスタイルを適用：
|
||||
|
||||
```markdown
|
||||
<style scoped>
|
||||
h1 {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
|
||||
# このスライドだけ赤い見出し
|
||||
```
|
||||
|
||||
## 数式（Marp Core拡張）
|
||||
|
||||
Pandoc形式の数式をサポート：
|
||||
|
||||
### インライン数式
|
||||
|
||||
```markdown
|
||||
$E = mc^2$
|
||||
```
|
||||
|
||||
### ブロック数式
|
||||
|
||||
```markdown
|
||||
$$
|
||||
\frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
|
||||
$$
|
||||
```
|
||||
|
||||
## 絵文字（Marp Core拡張）
|
||||
|
||||
```markdown
|
||||
:smile: :+1: :sparkles:
|
||||
```
|
||||
|
||||
GitHub Emoji記法をサポート。
|
||||
|
||||
## コメント
|
||||
|
||||
HTMLコメントはレンダリングされません：
|
||||
|
||||
```markdown
|
||||
<!-- これはコメントです -->
|
||||
```
|
||||
|
||||
ディレクティブもコメント形式で記述：
|
||||
|
||||
```markdown
|
||||
<!-- _class: lead -->
|
||||
```
|
||||
|
||||
## 公式リファレンスリンク
|
||||
|
||||
詳細は公式ドキュメントを参照：
|
||||
|
||||
- **Directives一覧**: https://marpit.marp.app/directives
|
||||
- **Marp Core機能**: https://github.com/marp-team/marp-core
|
||||
- **Theme CSS仕様**: https://marpit.marp.app/theme-css
|
||||
- **公式サイト**: https://marp.app/
|
||||
|
||||
## よくある設定例
|
||||
|
||||
### 基本設定
|
||||
|
||||
```markdown
|
||||
---
|
||||
marp: true
|
||||
theme: default
|
||||
size: 16:9
|
||||
paginate: true
|
||||
---
|
||||
```
|
||||
|
||||
### タイトルスライド
|
||||
|
||||
```markdown
|
||||
---
|
||||
marp: true
|
||||
theme: default
|
||||
---
|
||||
|
||||
<!-- _class: lead -->
|
||||
<!-- _paginate: false -->
|
||||
|
||||
# プレゼンテーションタイトル
|
||||
|
||||
発表者名
|
||||
```
|
||||
|
||||
### セクション区切り
|
||||
|
||||
```markdown
|
||||
<!-- _class: lead -->
|
||||
|
||||
# 第2章
|
||||
|
||||
新しいセクション
|
||||
|
||||
---
|
||||
|
||||
## 通常のスライド
|
||||
```
|
||||
|
||||
### カスタム背景色
|
||||
|
||||
```markdown
|
||||
<!-- _backgroundColor: #e3f2fd -->
|
||||
|
||||
# 明るい青背景のスライド
|
||||
```
|
||||
405
skills/marp-slide/references/official-themes.md
Normal file
405
skills/marp-slide/references/official-themes.md
Normal file
@@ -0,0 +1,405 @@
|
||||
# Marp 公式テーマリファレンス
|
||||
|
||||
Marp Coreに含まれる3つの公式テーマの解説。
|
||||
|
||||
公式実装: https://github.com/marp-team/marp-core/tree/main/themes
|
||||
|
||||
## 公式テーマ一覧
|
||||
|
||||
1. **default** - シンプルで汎用的なテーマ
|
||||
2. **gaia** - モダンでカラフルなテーマ
|
||||
3. **uncover** - ミニマルでエレガントなテーマ
|
||||
|
||||
## Default テーマ
|
||||
|
||||
### 特徴
|
||||
|
||||
- **配色**: 白背景、黒テキスト、青アクセント
|
||||
- **フォント**: シンプルなサンセリフ
|
||||
- **用途**: 汎用的なプレゼンテーション
|
||||
- **スタイル**: 清潔、読みやすい
|
||||
|
||||
### 使用方法
|
||||
|
||||
```markdown
|
||||
---
|
||||
marp: true
|
||||
theme: default
|
||||
---
|
||||
|
||||
# タイトル
|
||||
|
||||
コンテンツ
|
||||
```
|
||||
|
||||
### 利用可能なクラス
|
||||
|
||||
#### lead（タイトルスライド）
|
||||
|
||||
```markdown
|
||||
<!-- _class: lead -->
|
||||
|
||||
# プレゼンテーション
|
||||
|
||||
副題や説明
|
||||
```
|
||||
|
||||
中央寄せ、大きなテキスト。
|
||||
|
||||
#### invert（反転配色）
|
||||
|
||||
```markdown
|
||||
<!-- _class: invert -->
|
||||
|
||||
# 黒背景・白文字
|
||||
```
|
||||
|
||||
背景が黒、テキストが白に反転。
|
||||
|
||||
#### 組み合わせ
|
||||
|
||||
```markdown
|
||||
<!-- _class: lead invert -->
|
||||
|
||||
# 反転タイトルスライド
|
||||
```
|
||||
|
||||
複数のクラスを同時に適用可能。
|
||||
|
||||
### カスタマイズ例
|
||||
|
||||
```markdown
|
||||
---
|
||||
theme: default
|
||||
---
|
||||
|
||||
<style>
|
||||
section {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #1e40af;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## Gaia テーマ
|
||||
|
||||
### 特徴
|
||||
|
||||
- **配色**: カラフル、鮮やかなアクセントカラー
|
||||
- **フォント**: モダンなサンセリフ
|
||||
- **用途**: クリエイティブなプレゼン、デザイン発表
|
||||
- **スタイル**: 活気的、視覚的に魅力的
|
||||
|
||||
### 使用方法
|
||||
|
||||
```markdown
|
||||
---
|
||||
marp: true
|
||||
theme: gaia
|
||||
---
|
||||
|
||||
# タイトル
|
||||
```
|
||||
|
||||
### カラーバリエーション
|
||||
|
||||
Gaiaテーマは複数の配色を持ちます：
|
||||
|
||||
```markdown
|
||||
<!-- _class: lead -->
|
||||
# デフォルト配色
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: lead invert -->
|
||||
# 反転配色
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: lead gaia -->
|
||||
# Gaia配色
|
||||
```
|
||||
|
||||
### 特徴的なスタイル
|
||||
|
||||
- **グラデーション背景**: タイトルスライドで使用
|
||||
- **カラフルなアクセント**: 見出しやリンク
|
||||
- **大きなタイポグラフィ**: インパクトのある見出し
|
||||
|
||||
### カスタマイズ例
|
||||
|
||||
```markdown
|
||||
---
|
||||
theme: gaia
|
||||
---
|
||||
|
||||
<style>
|
||||
section {
|
||||
--color-background: #fff;
|
||||
--color-foreground: #333;
|
||||
--color-highlight: #e91e63;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## Uncover テーマ
|
||||
|
||||
### 特徴
|
||||
|
||||
- **配色**: ミニマル、白または黒ベース
|
||||
- **フォント**: エレガントなセリフフォント
|
||||
- **用途**: フォーマルなプレゼン、学術発表
|
||||
- **スタイル**: 洗練、シンプル、エレガント
|
||||
|
||||
### 使用方法
|
||||
|
||||
```markdown
|
||||
---
|
||||
marp: true
|
||||
theme: uncover
|
||||
---
|
||||
|
||||
# タイトル
|
||||
```
|
||||
|
||||
### 利用可能なクラス
|
||||
|
||||
#### lead（タイトルスライド）
|
||||
|
||||
```markdown
|
||||
<!-- _class: lead -->
|
||||
|
||||
# プレゼンテーション
|
||||
```
|
||||
|
||||
中央寄せ、大きなセリフフォント。
|
||||
|
||||
#### invert（反転配色）
|
||||
|
||||
```markdown
|
||||
<!-- _class: invert -->
|
||||
|
||||
# 黒背景のスライド
|
||||
```
|
||||
|
||||
黒背景、白文字。
|
||||
|
||||
### 特徴的なスタイル
|
||||
|
||||
- **セリフフォント**: 見出しに使用
|
||||
- **広い余白**: ミニマルなレイアウト
|
||||
- **中央寄せ**: コンテンツが中央に配置される傾向
|
||||
|
||||
### カスタマイズ例
|
||||
|
||||
```markdown
|
||||
---
|
||||
theme: uncover
|
||||
---
|
||||
|
||||
<style>
|
||||
section {
|
||||
font-family: 'Georgia', serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## テーマ比較表
|
||||
|
||||
| 特徴 | default | gaia | uncover |
|
||||
|------|---------|------|---------|
|
||||
| **背景色** | 白 | カラフル | 白/黒 |
|
||||
| **フォント** | サンセリフ | サンセリフ | セリフ |
|
||||
| **配色** | シンプル | 鮮やか | ミニマル |
|
||||
| **用途** | 汎用 | クリエイティブ | フォーマル |
|
||||
| **スタイル** | 清潔 | 活気的 | エレガント |
|
||||
|
||||
## クラスの共通仕様
|
||||
|
||||
すべての公式テーマで使用可能：
|
||||
|
||||
### lead
|
||||
|
||||
```markdown
|
||||
<!-- _class: lead -->
|
||||
```
|
||||
|
||||
- タイトルスライド用
|
||||
- 中央寄せ
|
||||
- 大きなテキスト
|
||||
- フッター/ページ番号を非表示
|
||||
|
||||
### invert
|
||||
|
||||
```markdown
|
||||
<!-- _class: invert -->
|
||||
```
|
||||
|
||||
- 配色を反転
|
||||
- 背景とテキストの色を入れ替え
|
||||
- ダークモード風
|
||||
|
||||
## テーマ選択のガイドライン
|
||||
|
||||
### defaultを選ぶべき場合
|
||||
|
||||
- 汎用的なプレゼンテーション
|
||||
- ビジネス用途
|
||||
- シンプルで読みやすいデザインが必要
|
||||
- カスタマイズの基盤として使用
|
||||
|
||||
### gaiaを選ぶべき場合
|
||||
|
||||
- クリエイティブなプレゼン
|
||||
- デザイン関連の発表
|
||||
- 若い世代向け
|
||||
- 視覚的なインパクトが必要
|
||||
|
||||
### uncoverを選ぶべき場合
|
||||
|
||||
- フォーマルなプレゼン
|
||||
- 学術発表
|
||||
- ミニマルなデザイン志向
|
||||
- エレガントな印象を与えたい
|
||||
|
||||
## カスタムテーマとの組み合わせ
|
||||
|
||||
### 公式テーマを拡張
|
||||
|
||||
```css
|
||||
/* @theme my-custom-default */
|
||||
|
||||
@import-theme 'default';
|
||||
|
||||
section {
|
||||
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #1e3a8a;
|
||||
}
|
||||
```
|
||||
|
||||
### 複数テーマの切り替え
|
||||
|
||||
```markdown
|
||||
---
|
||||
marp: true
|
||||
theme: default
|
||||
---
|
||||
|
||||
# セクション1（defaultテーマ）
|
||||
|
||||
---
|
||||
|
||||
<!-- theme: gaia -->
|
||||
|
||||
# セクション2（gaiaテーマ）
|
||||
|
||||
---
|
||||
|
||||
<!-- theme: uncover -->
|
||||
|
||||
# セクション3（uncoverテーマ）
|
||||
```
|
||||
|
||||
注：同一ファイル内でのテーマ切り替えは限定的なサポート。
|
||||
|
||||
## 実践例
|
||||
|
||||
### defaultテーマの活用
|
||||
|
||||
```markdown
|
||||
---
|
||||
marp: true
|
||||
theme: default
|
||||
paginate: true
|
||||
---
|
||||
|
||||
<!-- _class: lead -->
|
||||
|
||||
# プロジェクト報告
|
||||
|
||||
2024年10月
|
||||
|
||||
---
|
||||
|
||||
## アジェンダ
|
||||
|
||||
1. 進捗状況
|
||||
2. 課題と対策
|
||||
3. 今後の予定
|
||||
|
||||
---
|
||||
|
||||
## 進捗状況
|
||||
|
||||
- タスクA: 完了
|
||||
- タスクB: 進行中
|
||||
- タスクC: 予定通り
|
||||
```
|
||||
|
||||
### gaiaテーマの活用
|
||||
|
||||
```markdown
|
||||
---
|
||||
marp: true
|
||||
theme: gaia
|
||||
---
|
||||
|
||||
<!-- _class: lead -->
|
||||
|
||||
# 新製品発表
|
||||
|
||||
革新的なデザイン
|
||||
|
||||
---
|
||||
|
||||
## コンセプト
|
||||
|
||||
**3つの柱**
|
||||
|
||||
1. 🎨 美しさ
|
||||
2. 🚀 速さ
|
||||
3. 💡 使いやすさ
|
||||
```
|
||||
|
||||
### uncoverテーマの活用
|
||||
|
||||
```markdown
|
||||
---
|
||||
marp: true
|
||||
theme: uncover
|
||||
---
|
||||
|
||||
<!-- _class: lead -->
|
||||
|
||||
# 研究発表
|
||||
|
||||
深層学習の応用
|
||||
|
||||
---
|
||||
|
||||
## 研究背景
|
||||
|
||||
近年の技術発展により...
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: invert -->
|
||||
|
||||
## 実験結果
|
||||
|
||||
精度: 95.3%
|
||||
```
|
||||
|
||||
## 公式リファレンス
|
||||
|
||||
- **公式テーマ実装**: https://github.com/marp-team/marp-core/tree/main/themes
|
||||
- **Marp Core README**: https://github.com/marp-team/marp-core
|
||||
- **テーマCSS仕様**: https://marpit.marp.app/theme-css
|
||||
394
skills/marp-slide/references/theme-css-guide.md
Normal file
394
skills/marp-slide/references/theme-css-guide.md
Normal file
@@ -0,0 +1,394 @@
|
||||
# Marp テーマCSS作成ガイド
|
||||
|
||||
Marpit公式のテーマCSS仕様に基づく、カスタムテーマの作成方法。
|
||||
|
||||
公式ドキュメント: https://marpit.marp.app/theme-css
|
||||
|
||||
## テーマの基本構造
|
||||
|
||||
### @themeメタデータ（必須）
|
||||
|
||||
テーマCSSには`@theme`メタデータが必要：
|
||||
|
||||
```css
|
||||
/* @theme theme-name */
|
||||
```
|
||||
|
||||
このメタデータがないと、テーマとして認識されません。
|
||||
|
||||
### 基本的なテーマCSS例
|
||||
|
||||
```css
|
||||
/* @theme my-theme */
|
||||
|
||||
section {
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
font-size: 24px;
|
||||
padding: 60px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #1e40af;
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #3b82f6;
|
||||
font-size: 36px;
|
||||
}
|
||||
```
|
||||
|
||||
## HTML構造
|
||||
|
||||
Marpが生成するHTML構造：
|
||||
|
||||
```html
|
||||
<section>
|
||||
<h1>スライドタイトル</h1>
|
||||
<p>コンテンツ</p>
|
||||
</section>
|
||||
```
|
||||
|
||||
各スライドは`<section>`要素として生成されます。
|
||||
|
||||
## スライドサイズ
|
||||
|
||||
### デフォルトサイズ
|
||||
|
||||
```css
|
||||
section {
|
||||
width: 1280px;
|
||||
height: 720px;
|
||||
}
|
||||
```
|
||||
|
||||
16:9比率（1280x720）がデフォルト。
|
||||
|
||||
### カスタムサイズの定義
|
||||
|
||||
```css
|
||||
/* @theme my-theme */
|
||||
/* @size 4:3 960px 720px */
|
||||
|
||||
section {
|
||||
width: 960px;
|
||||
height: 720px;
|
||||
}
|
||||
```
|
||||
|
||||
`@size`メタデータでカスタムサイズを定義できます。
|
||||
|
||||
## ページネーション
|
||||
|
||||
ページ番号のスタイリング：
|
||||
|
||||
```css
|
||||
section::after {
|
||||
content: attr(data-marpit-pagination) ' / ' attr(data-marpit-pagination-total);
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
bottom: 20px;
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
}
|
||||
```
|
||||
|
||||
**利用可能な属性**:
|
||||
- `data-marpit-pagination` - 現在のページ番号
|
||||
- `data-marpit-pagination-total` - 総ページ数
|
||||
|
||||
## ヘッダーとフッター
|
||||
|
||||
### ヘッダー
|
||||
|
||||
```css
|
||||
header {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: 60px;
|
||||
right: 60px;
|
||||
font-size: 18px;
|
||||
color: #666;
|
||||
}
|
||||
```
|
||||
|
||||
### フッター
|
||||
|
||||
```css
|
||||
footer {
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
left: 60px;
|
||||
right: 60px;
|
||||
font-size: 18px;
|
||||
color: #666;
|
||||
}
|
||||
```
|
||||
|
||||
## テーマの拡張と継承
|
||||
|
||||
### @importでの読み込み
|
||||
|
||||
```css
|
||||
/* @theme my-extended-theme */
|
||||
|
||||
@import 'default';
|
||||
|
||||
section {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
```
|
||||
|
||||
既存のテーマを拡張できます。
|
||||
|
||||
### @import-themeで名前付きテーマを継承
|
||||
|
||||
```css
|
||||
/* @theme my-theme */
|
||||
|
||||
@import-theme 'default';
|
||||
|
||||
h1 {
|
||||
color: red;
|
||||
}
|
||||
```
|
||||
|
||||
`@import-theme`を使用すると、テーマ名で読み込めます。
|
||||
|
||||
## クラスベースのバリエーション
|
||||
|
||||
### leadクラス（タイトルスライド）
|
||||
|
||||
```css
|
||||
section.lead {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
section.lead h1 {
|
||||
font-size: 64px;
|
||||
}
|
||||
```
|
||||
|
||||
### invertクラス（反転配色）
|
||||
|
||||
```css
|
||||
section.invert {
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
section.invert h1,
|
||||
section.invert h2 {
|
||||
color: #fff;
|
||||
}
|
||||
```
|
||||
|
||||
## Scoped Style（スライド固有のスタイル）
|
||||
|
||||
Markdown内で`<style scoped>`を使用：
|
||||
|
||||
```markdown
|
||||
<style scoped>
|
||||
section {
|
||||
background-color: #e3f2fd;
|
||||
}
|
||||
</style>
|
||||
|
||||
# このスライドだけ青い背景
|
||||
```
|
||||
|
||||
## 背景画像のスタイリング
|
||||
|
||||
背景画像は自動的に処理されますが、CSSで調整可能：
|
||||
|
||||
```css
|
||||
section[data-marpit-background-image] {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
```
|
||||
|
||||
## 数式のスタイリング（Marp Core）
|
||||
|
||||
```css
|
||||
.katex {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.katex-display {
|
||||
margin: 1em 0;
|
||||
}
|
||||
```
|
||||
|
||||
## リストのスタイリング
|
||||
|
||||
```css
|
||||
ul, ol {
|
||||
margin: 0.5em 0;
|
||||
padding-left: 1.5em;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 0.3em 0;
|
||||
}
|
||||
|
||||
li::marker {
|
||||
color: #3b82f6;
|
||||
}
|
||||
```
|
||||
|
||||
## テーブルのスタイリング
|
||||
|
||||
```css
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
th, td {
|
||||
border: 1px solid #ddd;
|
||||
padding: 0.5em 1em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: #f0f0f0;
|
||||
font-weight: bold;
|
||||
}
|
||||
```
|
||||
|
||||
## コードブロックのスタイリング
|
||||
|
||||
```css
|
||||
pre {
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 4px;
|
||||
padding: 1em;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
pre code {
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
```
|
||||
|
||||
## レスポンシブ対応
|
||||
|
||||
```css
|
||||
@media screen and (max-width: 1280px) {
|
||||
section {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 実践的なテーマ例
|
||||
|
||||
### ミニマルテーマ
|
||||
|
||||
```css
|
||||
/* @theme minimal */
|
||||
|
||||
section {
|
||||
background-color: #ffffff;
|
||||
color: #333333;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
font-size: 24px;
|
||||
padding: 80px;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
font-weight: 300;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 60px;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 40px;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
```
|
||||
|
||||
### ダークテーマ
|
||||
|
||||
```css
|
||||
/* @theme dark */
|
||||
|
||||
section {
|
||||
background-color: #1a1a1a;
|
||||
color: #e0e0e0;
|
||||
font-size: 22px;
|
||||
padding: 60px;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
color: #61dafb;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #61dafb;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: #2d2d2d;
|
||||
color: #61dafb;
|
||||
}
|
||||
```
|
||||
|
||||
## Markdown内でのスタイル埋め込み
|
||||
|
||||
```markdown
|
||||
---
|
||||
marp: true
|
||||
---
|
||||
|
||||
<style>
|
||||
section {
|
||||
background-color: #f8f8f4;
|
||||
font-family: 'Noto Sans JP', sans-serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #4f86c6;
|
||||
}
|
||||
</style>
|
||||
|
||||
# スライド
|
||||
```
|
||||
|
||||
この方法でテーマを使わずにカスタムスタイルを適用できます。
|
||||
|
||||
## ベストプラクティス
|
||||
|
||||
1. **コントラストを確保**: 背景とテキストの色のコントラスト比を4.5:1以上に
|
||||
2. **適切なフォントサイズ**: 本文22-24px、タイトル40-60px程度
|
||||
3. **余白を十分に**: パディング60px以上推奨
|
||||
4. **フォールバックフォント**: Web Fontが読み込めない場合のシステムフォントを指定
|
||||
5. **印刷対応**: `@media print`で印刷用スタイルも定義
|
||||
|
||||
## 公式リファレンス
|
||||
|
||||
詳細は公式ドキュメントを参照：
|
||||
- **Theme CSS**: https://marpit.marp.app/theme-css
|
||||
- **Marpit API**: https://marpit-api.marp.app/
|
||||
- **公式テーマ実装**: https://github.com/marp-team/marp-core/tree/main/themes
|
||||
115
skills/marp-slide/references/theme-selection.md
Normal file
115
skills/marp-slide/references/theme-selection.md
Normal file
@@ -0,0 +1,115 @@
|
||||
# Marpテーマ選択ガイド
|
||||
|
||||
全7種類のテーマから、用途に合わせて最適なテーマを選択します。
|
||||
|
||||
## テーマ一覧と用途
|
||||
|
||||
### 1. デフォルト（theme-default.css / template-basic.md）
|
||||
**特徴**: 洗練された日本語対応デザイン、装飾線、フッターバー
|
||||
**配色**: ベージュ背景 + ネイビー文字 + 青見出し
|
||||
**用途**: 汎用的なセミナー、講習、プレゼンテーション
|
||||
**雰囲気**: 落ち着いた、上品、洗練された
|
||||
|
||||
### 2. シンプル＆ミニマル（theme-minimal.css / template-minimal.md）
|
||||
**特徴**: 最小限の装飾、広い余白、軽量フォント
|
||||
**配色**: 白背景 + グレー文字 + 黒見出し
|
||||
**用途**: 内容重視のプレゼン、学術発表、静かな印象を与えたい場合
|
||||
**雰囲気**: 清潔、シンプル、洗練された
|
||||
|
||||
### 3. カラフル＆ポップ（theme-colorful.css / template-colorful.md）
|
||||
**特徴**: グラデーション、明るい色使い、太字強調
|
||||
**配色**: ピンク系背景 + マルチカラーアクセント
|
||||
**用途**: 若い世代向け、イベント、クリエイティブな企画
|
||||
**雰囲気**: 楽しい、元気、華やか
|
||||
|
||||
### 4. ダークモード（theme-dark.css / template-dark.md）
|
||||
**特徴**: 暗い背景、グロー効果、目に優しい
|
||||
**配色**: 黒背景 + シアン/紫アクセント
|
||||
**用途**: 技術プレゼン、夜間発表、モダンな印象
|
||||
**雰囲気**: クール、モダン、未来的
|
||||
|
||||
### 5. グラデーション背景（theme-gradient.css / template-gradient.md）
|
||||
**特徴**: 各スライドで異なるグラデーション、白文字、影効果
|
||||
**配色**: 紫〜ピンク〜青〜緑のグラデーション
|
||||
**用途**: ビジュアル重視、クリエイティブ発表、印象的なプレゼン
|
||||
**雰囲気**: 鮮やか、ダイナミック、印象的
|
||||
|
||||
### 6. 技術系（コード向け）（theme-tech.css / template-tech.md）
|
||||
**特徴**: GitHub風デザイン、コードフォント、Markdown風記号
|
||||
**配色**: 黒背景 + 青/緑アクセント
|
||||
**用途**: プログラミング講座、技術勉強会、開発者向け
|
||||
**雰囲気**: 技術的、開発者向け、GitHub風
|
||||
|
||||
### 7. ビジネスライク（theme-business.css / template-business.md）
|
||||
**特徴**: 企業プレゼン風、テーブル対応、上部ボーダー
|
||||
**配色**: 白背景 + 濃紺見出し + 青アクセント
|
||||
**用途**: ビジネスプレゼン、企画提案、報告会
|
||||
**雰囲気**: フォーマル、信頼感、プロフェッショナル
|
||||
|
||||
## テーマ選択の判断フロー
|
||||
|
||||
### ステップ1: 用途で絞り込む
|
||||
|
||||
**技術系/開発者向け** → 技術系（コード向け）
|
||||
**ビジネス/企業向け** → ビジネスライク
|
||||
**クリエイティブ/イベント** → カラフル＆ポップ or グラデーション背景
|
||||
**学術/シンプル** → シンプル＆ミニマル
|
||||
**汎用/迷ったら** → デフォルト
|
||||
|
||||
### ステップ2: 雰囲気で選ぶ
|
||||
|
||||
**明るく楽しく** → カラフル＆ポップ、グラデーション背景
|
||||
**落ち着いて上品** → デフォルト、ビジネスライク
|
||||
**クールでモダン** → ダークモード、技術系
|
||||
**シンプルで清潔** → シンプル＆ミニマル
|
||||
|
||||
### ステップ3: 背景色で選ぶ
|
||||
|
||||
**明るい背景**: シンプル＆ミニマル、デフォルト、ビジネスライク、カラフル＆ポップ
|
||||
**暗い背景**: ダークモード、技術系
|
||||
**グラデーション**: グラデーション背景
|
||||
|
||||
## ユーザーリクエストからの推測
|
||||
|
||||
### 「良い感じにして」「かっこよく」
|
||||
→ 内容に応じて判断：
|
||||
- ビジネス系: ビジネスライク
|
||||
- 技術系: 技術系 or ダークモード
|
||||
- 汎用: デフォルト
|
||||
- クリエイティブ: グラデーション背景
|
||||
|
||||
### 「シンプルに」「見やすく」
|
||||
→ シンプル＆ミニマル or デフォルト
|
||||
|
||||
### 「派手に」「目立つように」
|
||||
→ カラフル＆ポップ or グラデーション背景
|
||||
|
||||
### 「技術的に」「プログラミング」
|
||||
→ 技術系（コード向け）
|
||||
|
||||
### 「ビジネス」「企業」「提案」
|
||||
→ ビジネスライク
|
||||
|
||||
### 「ダーク」「黒背景」「目に優しい」
|
||||
→ ダークモード or 技術系
|
||||
|
||||
## デフォルトテーマの使用判断
|
||||
|
||||
以下の場合はデフォルトテーマを使用：
|
||||
- ユーザーが特定のテーマを指定していない
|
||||
- 用途が明確でない
|
||||
- 「良い感じに」などの曖昧な指示のみ
|
||||
- 講習・セミナー用途
|
||||
|
||||
## 複数テーマの提案
|
||||
|
||||
以下の場合は、2-3個のテーマを簡潔に提案：
|
||||
- ユーザーが「どれがいい？」と聞いた場合
|
||||
- 内容から複数の選択肢がある場合
|
||||
- 初めての利用で迷っていそうな場合
|
||||
|
||||
提案例：
|
||||
「このプレゼンには以下のテーマがおすすめです：
|
||||
1. **ビジネスライク**: フォーマルな印象
|
||||
2. **デフォルト**: バランスの取れた万能型
|
||||
どちらがよろしいですか？」
|
||||
Reference in New Issue
Block a user