English | 日本語 |
CSSテーマガイド
AutoSlideIdeaでは、スライドの情報量に応じて4つのCSSテーマを用意しています。
テーマ一覧
1. base.css - 標準テーマ
- 用途: 一般的なプレゼンテーション
- フォントサイズ: 28px
- パディング: 70px
- 特徴: バランスの取れた標準的なレイアウト
2. relaxed.css - ゆったりテーマ
- 用途: 情報量が少なく、インパクト重視のスライド
- フォントサイズ: 32px(+14%)
- パディング: 90px
- 特徴:
- 大きな文字で読みやすい
- 余白を広く取り、高級感のある印象
- キーメッセージを強調したいスライドに最適
3. demo.css - デモテーマ
- 用途: デモや技術説明など、やや情報量の多いスライド
- フォントサイズ: 24px(-14%)
- パディング: 50px
- 特徴:
- 標準より少し詰めたレイアウト
- コード例や図表を含むスライドに適している
4. compact.css - コンパクトテーマ
- 用途: 情報量が非常に多いスライド
- フォントサイズ: 20px(-29%)
- パディング: 40px
- 特徴:
- 最大限の情報を1スライドに収める
- 技術仕様や詳細な表を含むスライドに最適
使い方
Marp CLIでの指定
# 標準テーマ
marp slides.md --theme config/marp/base.css
# ゆったりテーマ
marp slides.md --theme config/marp/relaxed.css
# デモテーマ
marp slides.md --theme config/marp/demo.css
# コンパクトテーマ
marp slides.md --theme config/marp/compact.css
フロントマターでの指定
---
marp: true
theme: ./config/marp/compact.css
---
# プレゼンテーションタイトル
選択の目安
スライドの内容 | 推奨テーマ | 1スライドあたりの目安 |
---|---|---|
キーメッセージ、ビジョン | relaxed | 1-3個の要点 |
一般的な説明、概要 | base | 3-5個の要点 |
技術説明、デモ | demo | 5-8個の要点 |
詳細仕様、データ表 | compact | 8個以上の要点 |
カスタマイズ
各テーマは @import 'base'
でbase.cssを継承しているため、必要に応じて部分的なカスタマイズも可能です。
/* my-custom.css */
@import 'demo'; /* demoテーマをベースに */
/* 特定の要素だけ調整 */
h1 {
color: #e74c3c; /* 見出しを赤に */
}
注意事項
- PDFエクスポート時も同じテーマが適用されます
- 画像やグラフのサイズは自動調整されないため、必要に応じて個別に調整してください
- フォントサイズが小さいテーマ(compact)は、プロジェクターでの投影時に読みづらい場合があります