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の記事もわかりやすいです。

参考The HTML presentation framework | reveal.jsreveal.js

参考vscode-reveal – Visual Studio Marketplace

よく使うオプション設定

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

タイトル設定

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>

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

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

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

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

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

2022年9月25日 Notion SlidesとWunderpresentationの使い方！Notionで簡単にプレゼンスライド作成

検索

アーカイブ

カテゴリ

タグ

プロフィール

reveal.jsの使い方

テンプレート