きっかけ

大学も4年生になって研究室配属された頃からパワーポイントでの資料作り＆発表というのが増えてくるのはみんなが経験済み（？）だと思われるが，研究室の同期が使っていたMarpというツールによって僕のMTG資料作り人生は激変した．ついでにMarkdownの知識もついたおかげでQiitaへのハードルも低くなった．

前提

パワポで発表する機会が多いが，見栄えの調整に時間を費やしたくない人向け
- Marpの実力は未知数（そもそも僕はパワポを使ってもお洒落な資料を作ったことがない）
- パワポの方が直感的に配置できる（パワポはWYSIWYG）
- 僕は困ったことがないが，写真の挿入などで思い通りにいかない可能性もある
VSCodeの拡張機能であるMarpを使用している
Qiitaでは一番有名だと思われる何度も見た参考ページ ->【VS Code + Marp】Markdownから爆速・自由自在なデザインで、プレゼンスライドを作る

Marpとは

日本生まれのVSCodeの拡張機能で，OSによらずMarkdownで書くだけで.pptxや.pdfでエクスポート可能なファイルを作成できる．もちろん無料．Gitで管理できるから差分がわかりやすいし，チーム開発をしやすいらしいがしたことはない．

メリット
スライド内の見出しや本文の配置を考えなくても文章を入力していけば自ずとスライドが完成していること．ただしスライドに文字が入りきらない場合や改行が気に入らない場合は調整をする場合もある．また研究室内での発表の場合，同じような内容を何回も発表する機会が多いためコピペで簡単に使いまわせるのが地味に便利．

デメリット
.pptxでエクスポートしたスライドは各ページに画像を貼り付けている形になるため，内容の編集はエクスポート前のファイルで行う必要がある．また，.pdfにしても日本語の場合は文字を認識できず範囲選択ができない．

これは学会発表用にスライドを綺麗に作成する際に出くわしたことなのだが，.svgで作成した画像を貼ってスライドをエクスポートすると画像内のフォントが勝手に変わるということがあり，どうしても解決できなかったので仕方なく.pngにして挿入することにした．

Marp for VSCode

VSCodeでのインストールや設定などは参考文献のページを見たり，各自で調べてもらいたい．この記事の目的は簡単なCSS例を提供することである（使っていないコードも多く含まれているが）．CSSに慣れている人ならもっと面白い装飾にできるんだろうなと思いつつ労力かけたくないなとも思ったり．

作例

CSS例

@import "gaia";

section::after,
footer {
  color: white;
  background-color: #C29DC8;
  height: 50px;
  margin-bottom: 0px;
  font-size: 75%;
  padding: 0px 20px 0px 20px;
}

section {
  /* color: black; */
  background-color: white;
  font-size: 32px;
  font-family: sans-serif, "Hiragino Kaku Gothic ProN", Meiryo; 
  
  /* 以前使っていたフォント，卒論発表に合わせて変えた
  "Helvetica Neue", Arial, 
  "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;  
  */
}

section.top {
  background-image: url(./img/logo.svg);
  background-repeat: no-repeat;
  background-size: 600px;
  background-position-x: center;
  background-position-y: 180px;
}
section.top h1 {
  color: purple; 
  font-size: 2.8rem;
  margin-top: 150px;
  margin-bottom: 20px;
  text-align: center;
}
section.top h2 {
  /* color: black; */
  font-size: 1.2rem;
  margin-top: 30px;
  text-align: center;
}

section.normal {
  padding: 40px 50px 40px 50px;
  background-image: url(./img/logo.svg);
  background-repeat: no-repeat;
  background-size: 250px;
  background-position: right 50px top 50px;
}
section.normal h1 {
  color: purple;
  font-size: 32px;
  border-bottom: 2px solid #006888;
  margin-bottom: -10px;
}
section.normal h2 {
  font-size: 1.5rem;
}
/* 脚注での補足用 */
section.normal h3 {
  font-size: 1.0rem;
}

/* 使っていない部分
section.normal h4 {
  font-size: 1.0rem;
}
section.final {
  background-image: url(./img/logo.svg);
  background-repeat: no-repeat;
  background-size: 800px;
  background-position-x: center;
  background-position-y: center;
}
*/

img[alt~="center"]{
  display: block;
  margin: 0 auto;
}

数式を入力するためのKatex

Marpでの数式の挿入はデフォルトでKatexというJavaScriptのライブラリを使ってレンダリングしているらしい．僕自身最近はスライドに数式を挿入することをほとんどしていないためあまり覚えていない（次の写真の日付を見てもらったら分かるように1年間使っていない）．なので気が向いたら記事を書こうと思う．Katexがサポートしている数式の記述法は Katex の公式 Supported Functions ページを参考にして欲しい．

Katexの作例

新たに見つけた良さそうなページ

Marp入門〜応用｜markdownでプレゼン資料を楽に素早く作って発表しよう
に細かく書いてあることを見つけたので知らなかったことを吸収しようと思う．

参考文献

この記事は以下の情報を参考にして執筆しました。