Skip to content

index.md

Latest commit

 

History

History
161 lines (103 loc) · 4.38 KB

index.md

File metadata and controls

161 lines (103 loc) · 4.38 KB
marp true
theme classmethod
paginate true
title Classmethod Marp Theme
description クラスメソッドのスライドデザインを参考に作成したMarpテーマ

classmethod-logo w:400px

Classmethod Marp Theme

セットアップスライド

2025/08/19 更新

概要

クラスメソッドのスライドデザインを参考に作成したMarpテーマです。

参考リンク

サンプルスライド

こちらのリンクからサンプルスライドをみることができます。 https://classmethod.github.io/classmethod-marp-theme/sample-slide.html

Github

https://github.com/classmethod/classmethod-marp-theme

Marp 公式サイト

https://marp.app/

特徴

📝 マークダウンでスライド作成

クラスメソッドのスライドデザインのスライドがマークダウンで作成可能

🤗 豊富な要素対応

テーブル、コードブロック、引用など、マークダウン要素に対応

🤖 生成AIで作りやすい

生成AIに内容、README.md、sample-slide.mdを入力して爆速でスライド作成可能

利用方法

VSCodeやCLIで簡単に使えます

VSCodeでの設定方法

w:450px w:450px

  1. Marpの拡張機能をインストール https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode
  2. VSCodeの設定を開く（Cmd+, または Ctrl+,）
  3. 検索ボックスで「Markdown › Marp: Themes」を検索
  4. 「項目の追加」をクリック
  5. 以下のリンクを入力 
    https://classmethod.github.io/classmethod-marp-theme/classmethod-theme.css
  6. Markdownファイルの先頭でテーマを指定
  7. サンプルスライドを参考にスライドを作成
  8. このスライドと同じデザインになったらOK！

VSCode拡張機能を利用してマークダウンからスライドを表示する

右上のMarpアイコンからマークダウンをスライドで表示することができます

w:1000px

VSCode拡張機能を利用してHTML・PDFへの出力を行う

右上のMarpアイコンからHTML・PDFへの出力を行うことができます

w:1000px

CLIでの利用

  1. GithubからテーマのCSSファイルをダウンロード

  2. Marp形式で作成したマークダウンファイルを用意

  3. Markdownファイルの先頭でテーマを指定

  4. 以下のコマンドを実行

npx @marp-team/marp-cli@latest slide.md --theme your-directory/classmethod-theme.css

テーマの指定方法

Markdownファイルの先頭に以下のFront Matterを記述します

---
marp: true
theme: classmethod
---

これだけでクラスメソッドのデザインテーマが適用されます！


細かい内容はサンプルスライドをご覧ください！

https://classmethod.github.io/classmethod-marp-theme/sample-slide.html

🤖AIを使ってスライドを作成する方法（オススメ）

  1. スライドの内容を考える
  2. sample-slide.mdのテキストをコピー（下図参照） リンク: https://github.com/classmethod/classmethod-marp-theme/blob/main/sample-slide.md
  3. AIツール(Cursor, Claude Codeなど)のチャット欄に貼り付け
{sample-slide.mdのコピペ}
このテンプレートを使って〇〇.mdの内容のMarpスライドを作成して〇〇.mdに出力してください。
  1. スライドの内容、レイアウト、画像のサイズを調整

w:500px

w:450px

ぜひお試しください！

このテーマはクラスメソッド社の内部使用を目的として作成されています