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の使い方

テンプレート