Skip to main content Link Menu Expand (external link) Document Search Copy Copied
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)は、プロジェクターでの投影時に読みづらい場合があります