Classmethod Marp Theme

classmethod-logo

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での設定方法


  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アイコンからマークダウンをスライドで表示することができます

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

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

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. スライドの内容、レイアウト、画像のサイズを調整

ぜひお試しください!

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

\n
\n
\n `.split(/\n\s*/).join(""),this.wrapper=this.shadowRoot.querySelector(`div[${e}]`)??void 0;const t=this.svg;this.svg=this.wrapper?.querySelector(`svg[${i}]`)??void 0,this.svg!==t&&(this.svgComputedStyle=this.svg?window.getComputedStyle(this.svg):void 0),this.container=this.svg?.querySelector(`span[${n}]`)??void 0,this.observe()}disconnectedCallback(){this.svg=void 0,this.svgComputedStyle=void 0,this.wrapper=void 0,this.container=void 0,this.observe()}attributeChangedCallback(){this.observe()}flushSvgDisplay(){const{svg:t}=this;t&&(t.style.display="inline",requestAnimationFrame((()=>{t.style.display=""})))}observe(){this.containerObserver.disconnect(),this.wrapperObserver.disconnect(),this.wrapper&&this.wrapperObserver.observe(this.wrapper),this.container&&this.containerObserver.observe(this.container),this.svgComputedStyle&&this.observeSVGStyle(this.svgComputedStyle)}observeSVGStyle(t){const e=()=>{const i=(()=>{const e=t.getPropertyValue("--preserve-aspect-ratio");if(e)return e.trim();return`x${(({textAlign:t,direction:e})=>{if(t.endsWith("left"))return"Min";if(t.endsWith("right"))return"Max";if("start"===t||"end"===t){let i="rtl"===e;return"end"===t&&(i=!i),i?"Max":"Min"}return"Mid"})(t)}YMid meet`})();i!==this.svgPreserveAspectRatio&&(this.svgPreserveAspectRatio=i,this.updateSVGRect()),t===this.svgComputedStyle&&requestAnimationFrame(e)};e()}updateSVGRect(){let t=Math.ceil(this.containerSize?.width??0);const e=Math.ceil(this.containerSize?.height??0);void 0!==this.dataset.downscaleOnly&&(t=Math.max(t,this.wrapperSize?.width??0));const i=this.svg?.querySelector(":scope > foreignObject");if(i?.setAttribute("width",`${t}`),i?.setAttribute("height",`${e}`),this.svg&&(this.svg.setAttribute("viewBox",`0 0 ${t} ${e}`),this.svg.setAttribute("preserveAspectRatio",this.svgPreserveAspectRatio),this.svg.style.height=t<=0||e<=0?"0":""),this.container){const t=this.svgPreserveAspectRatio.toLowerCase();this.container.style.marginLeft=t.startsWith("xmid")||t.startsWith("xmax")?"auto":"0",this.container.style.marginRight=t.startsWith("xmi")?"auto":"0"}}}const r=(t,{attrs:e={},style:i})=>class extends t{constructor(...t){super(...t);for(const[t,i]of Object.entries(e))this.hasAttribute(t)||this.setAttribute(t,i);this._shadow()}static get observedAttributes(){return["data-auto-scaling"]}connectedCallback(){this._update()}attributeChangedCallback(){this._update()}_shadow(){if(!this.shadowRoot)try{this.attachShadow({mode:"open"})}catch(t){if(!(t instanceof Error&&"NotSupportedError"===t.name))throw t}return this.shadowRoot}_update(){const t=this._shadow();if(t){const e=i?``:"";let n="";const{autoScaling:s}=this.dataset;if(void 0!==s){n=`${n}`}t.innerHTML=e+n}}};let o;const a=Symbol();let l;const c="marpitSVGPolyfill:setZoomFactor,",d=Symbol(),h=Symbol();const g=()=>{const t="Apple Computer, Inc."===navigator.vendor,e=t?[u]:[],i={then:e=>(t?(async()=>{if(void 0===l){const t=document.createElement("canvas");t.width=10,t.height=10;const e=t.getContext("2d"),i=new Image(10,10),n=new Promise((t=>{i.addEventListener("load",(()=>t()))}));i.crossOrigin="anonymous",i.src="data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2210%22%20viewBox%3D%220%200%201%201%22%3E%3CforeignObject%20width%3D%221%22%20height%3D%221%22%20requiredExtensions%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%3E%3Cdiv%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%20style%3D%22width%3A%201px%3B%20height%3A%201px%3B%20background%3A%20red%3B%20position%3A%20relative%22%3E%3C%2Fdiv%3E%3C%2FforeignObject%3E%3C%2Fsvg%3E",await n,e.drawImage(i,0,0),l=e.getImageData(5,5,1,1).data[3]<128}return l})().then((t=>{null==e||e(t?[u]:[])})):null==e||e([]),i)};return Object.assign(e,i)};let p,m;function u(t){const e="object"==typeof t&&t.target||document,i="object"==typeof t?t.zoom:t;window[h]||(Object.defineProperty(window,h,{configurable:!0,value:!0}),document.body.style.zoom=1.0001,document.body.offsetHeight,document.body.style.zoom=1,window.addEventListener("message",(({data:t,origin:e})=>{if(e===window.origin)try{if(t&&"string"==typeof t&&t.startsWith(c)){const[,e]=t.split(","),i=Number.parseFloat(e);Number.isNaN(i)||(m=i)}}catch(t){console.error(t)}})));let n=!1;Array.from(e.querySelectorAll("svg[data-marpit-svg]"),(t=>{var e,s,r,o;t.style.transform||(t.style.transform="translateZ(0)");const a=i||m||t.currentScale||1;p!==a&&(p=a,n=a);const l=t.getBoundingClientRect(),{length:c}=t.children;for(let i=0;i{null==t||t.postMessage(`${c}${n}`,"null"===window.origin?"*":window.origin)}))}function v({once:t=!1,target:e=document}={}){const i=function(t=document){if(t[d])return t[d];let e=!0;const i=()=>{e=!1,delete t[d]};Object.defineProperty(t,d,{configurable:!0,value:i});let n=[],s=!1;(async()=>{try{n=await g()}finally{s=!0}})();const r=()=>{for(const e of n)e({target:t});s&&0===n.length||e&&window.requestAnimationFrame(r)};return r(),i}(e);return t?(i(),()=>{}):i}p=1,m=void 0;const w=Symbol(),b=(e=document)=>{if("undefined"==typeof window)throw new Error("Marp Core's browser script is valid only in browser context.");if(((e=document)=>{const i=window[a];i||customElements.define("marp-auto-scaling",s);for(const n of Object.keys(t)){const s=`marp-${n}`,a=t[n].proto();(o??(o=!!document.createElement("div",{is:"marp-auto-scaling"}).outerHTML.startsWith("
{t.outerHTML=t.outerHTML.replace(new RegExp(`^<${n}`,"i"),`<${s}`).replace(new RegExp(`${n}>$`,"i"),`${s}>`)})))}window[a]=!0})(e),e[w])return e[w];const i=v({target:e}),n=()=>{i(),delete e[w]},l=Object.assign(n,{cleanup:n,update:()=>b(e)});return Object.defineProperty(e,w,{configurable:!0,value:l}),l},y=document.currentScript;b(y?y.getRootNode():document)}();