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
---

# プレゼンテーションタイトル

選択の目安

カスタマイズ

各テーマは @import 'base' でbase.cssを継承しているため、必要に応じて部分的なカスタマイズも可能です。

/* my-custom.css */
@import 'demo';  /* demoテーマをベースに */

/* 特定の要素だけ調整 */
h1 {
  color: #e74c3c;  /* 見出しを赤に */
}

注意事項

• PDFエクスポート時も同じテーマが適用されます
• 画像やグラフのサイズは自動調整されないため、必要に応じて個別に調整してください
• フォントサイズが小さいテーマ（compact）は、プロジェクターでの投影時に読みづらい場合があります