reveal.jsでサクッとスライド作成!VS Codeを使えば簡単

仕事でたまにプレゼンする場面がありますが、私はスライド作りが嫌いです。

そもそもデザインのセンスが無いし、細かい位置調整やフォント調整はとにかく時間がかかって面倒です。

PowerPointやGoogle Slideのテンプレートも使いましたが、やっぱり時間がかかるし、仕上がりも微妙になりました。

そこで見つけたのがreveal.jsです。

Markdownで文章を書いていけば、自動でかっこいいスライドを作成してくれます。

しかもVS Codeを使えば、拡張機能を入れるだけですぐに使えます

この記事では、以下の内容を説明します。

  • VS Codeでreveal.jsを使ってスライドを作成する方法
  • スライドの書き方(Markdown記法や画像の貼り方など)
  • スライドの表示方法(ブラウザで表示)
  • スライドの保存方法(md、html、pdfで保存できる)
  • スライドの操作方法(プレゼン機能やメモ機能など多機能)
  • オプション設定(テーマ設定やアニメーション設定など)

上記の内容はreveal.jsで作成したスライドで説明します。

他にも、文字を左寄せにする方法やスライド全体の文字サイズを一括で設定する方法などの細かい設定はこのページで解説しています。



reveal.jsの使い方

VS Codeを使用したreveal.jsの使い方は下記のスライドにまとめています。

フル画面で見る場合はこちら

スマホでもきれいに見れます

テンプレート

下記をVS Codeにコピペすれば、最低限の機能が入ったスライドが作れます。

---
theme: "Black"
title: "タイトル"
---
# スライドタイトル
サブタイトル
---
## 見出し
ここにテキストを書きます。
右にスライドがあります。
下にもスライドがあります。
--
下のスライド1枚目
--
下のスライド2枚目
---
## 画像
<img src="#" width="50%" style="border:none;box-shadow:none;">
---
## リスト
- リスト1 - リスト1-1
- リスト2
---
## 番号付きリスト
1. リスト1 1. リスト1-2
2. リスト1

よく使う設定まとめ

よく使う設定についてまとめておきます

詳しいオプション設定については、reveal.jsやvscode-revealのサイトに載っています。

Qiitaの記事もわかりやすいです。

よく使うオプション設定

コード上部で設定するオプション設定をまとめています。

タイトル設定

title: "reveal.jsの使い方"

スライド下部のタイトル(フッター)を消す

enableTitleFooter: false

黒板機能をオフにする

enableChalkboard: false

メニュー機能をオフにする

enableMenu: false

右下の矢印を消す

controls: false

プログレスバーを消す

progress: false

スライド番号を表示する

slideNumber: true

オーバービューモードを使用不可にする

overview: false

画像の枠を消す

デフォルトでは画像に白い枠がつきますが、下記のcssで消すことができます。

<img src="#" width="50%" style="border:none;box-shadow:none;">

見出しの大文字を小文字にする

デフォルトでは見出しの英語の小文字は全て大文字になります

オプション設定の下部に下記を追加すると小文字が表示されます。

---
theme: "white"
---
<style type="text/css"> .reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 { text-transform: none; }
</style>

テキストを左寄せにする

cssで左寄せにできます

---
theme: "white"
---
<style type="text/css"> p,h1 { text-align: left; }
</style>

文字サイズをまとめて変更する

文字サイズはcssでまとめて変更できます

---
theme: "white"
---
<style type="text/css"> p { font-size:0.5em; }
</style>

おすすめのサンプルコード

vscode-revealのサイトでサンプルコードが公開されています。

このコードを全てコピーして、VS codeでプレビューしながら確認すれば、使いたい設定を探してコピペで使えます

サンプルコードのスライドは以下です。

Notionを使っている場合は「Notion Slides」もおすすめ

Notionを使っている方であれば、「Notion Slides」もおすすめです。

Notionのページをそのままスライドにすることができます。

reveal.jsほどのデザインのカスタマイズもできませんが、シンプルな分、素早くスライドを作成することが出来ます。

スライドの大元となるページも通常のNotionのページなので、管理がしやすいのもメリットです。

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA


検索

アーカイブ

プロフィール

プロフィール背景画像
プロフィール画像

チャベス

1989生まれ、機械機器メーカーで研究開発をしている機械系エンジニアです。 業務効率化や日々の生活を効率化できるプログラミングネタを発信しています。PythonとNotionとSANGO(WordPress)が特に好きです。 詳細プロフィールはこちらnoteにNotionの記事も書いています。

WP-Searchにサイト事例として掲載されています。