reveal.jsの使い方（VS Code 使用）

下方向にスライド作成

下方向にスライドを作る場合は
– （ハイフン2つ）で区切る

⇩ を押してください

下方向へは何枚でもスライドが作れます

下方向のスライド3枚目

Markdownの書き方

Markdownの書き方や画像の貼り方、リンクの貼り方などの詳細については、⇩ に進んで下さい。

Markdownについて知っている方は、⇨ に進んで下さい。

Markdown記法

個人的によく使う記法を抜粋して紹介します

タイトル

スライド1枚目のタイトルは # + スペース

# スライドタイトル

スライド見出し

各スライド見出しは ## + スペース

## 各スライドタイトル

画像の貼り方

画像を貼る場合はhtml+cssで記載
（サイズ調整やスタイル調整がしやすいため）

以下は画像を貼り付けるコード

サイズ調整と画像の枠を消すcssを追加

<img src="./img/reveal-js6.png" width="50%" style="border:none;box-shadow:none;">

リスト

- リスト1
  - リスト1-1
- リスト2
- リスト3

• リスト1
  • リスト1-1
• リスト2
• リスト3

番号付きリスト

1. リスト1
   1. リスト1-1
2. リスト2
3. リスト3

1. リスト1
   1. リスト1-1
2. リスト2
3. リスト3

リンクの貼り方

[vscode-reveal](https://marketplace.visualstudio.com/items?itemName=evilz.vscode-reveal)

クリックできます

↓

vscode-reveal

文字色とサイズ変更

文字色の変更

<span style="color:red">文字色</span>の変更

文字サイズの変更

<span style="font-size:2em">文字サイズ</span>の変更

他にも変更したいことがある場合は

Markdown記法やcssでググれば出てきます

テーマ設定

スライドのテーマがいくつか用意されている

⇩：テーマ設定 詳細

⇨：アニメーション設定

テーマ設定方法

テーマはコードの最上部で設定

テーマ 一覧

クリックするとテーマが変更します。

各テーマで文字サイズが違うので、別のスライドを見る場合はテーマをBlackに戻してください。

Black (default) - White - League - Sky - Beige - Simple
Serif - Blood - Night - Moon - Solarized

アニメーション設定

スライド切り替えのアニメ―ション設定が変更可能

⇩：アニメーション設定 詳細

⇨：スライドの表示方法

アニメーション設定方法

コードの最上部で設定

アニメーション一覧

• none
• fade
• slide
• convex (default)
• concave
• zoom

スライド切り替えスピード

スライドを切り替えるスピードも
コードの最上部で設定

スピード一覧

• default
• fast
• slow

スライド表示方法

スライドの表示は下記の2パターン

• VS Code上で表示
• ブラウザ上で表示

⇩：スライド表示方法 詳細

⇨：スライドの保存方法

VS Code上で表示

VS Codeで下記画面左のマークを押し、
上部のマークをクリック

コードの横にスライドが表示される

ブラウザ上で表示

VS Codeで下記画面左のマークを押し、
上部のマークをクリック

ブラウザにスライドが表示される

スライドの保存方法

スライドの保存はmdファイルのままでも良い

しかし誰かにスライドを配布したい場合に
htmlやpdfに変換すると便利

⇩：スライド保存方法 詳細

⇨：スライドの操作方法

htmlファイルで保存

VS Codeで下記画面左のマークを押し、
上部のマークをクリック

mdファイルと同じフォルダに「export」ファルダが作成され、その中にindex.htmlファイルができる

index.htmlをブラウザで開けばスライドが見れる

他の人に配布する場合は、「export」ファルダごと（zipなどに圧縮して）配布すればOK

pdfで保存

VS Codeで下記画面左のマークを押し、
上部のマークをクリック

ブラウザで印刷画面が開くので、
「pdfに保存」を選択すればOK

スライドの操作方法

スライド表示する場合、
様々な便利機能が用意されている

⇩：スライド操作方法 詳細

⇨：その他の細かい設定

スライド全体を表示

「esc」キーを押すとスライド全体が表示される

任意のスライドをクリックすると
そのスライドに移動できる

メニューを表示

「M」キーを押すとメニューが表示される

左下のメニューボタンをクリックしても開く

黒板機能

「B」キー、または左下真ん中のボタンを押すと、
黒板機能が使える

左クリックがペン、右クリックが消しゴム、
「DEL」キーで全て消去できる

書き込み機能

「C」キー、または左下右のボタンを押すと、
書き込み機能が使える

左クリックがペン、右クリックが消しゴム、
「DEL」キーで全て消去できる

ズーム機能

「Alt」 + マウスクリックでズームできる

ノート機能

「S」キー押すと別ウインドウで
ノート機能（プレゼン機能）が開く

ノート機能

「note:」と書くと、
カンペの内容を書くことができる

備忘録

以下は私がよく使う設定の備忘録です

⇩：設定の備忘録

⇨：終わりに

スライド下部のメニューを消す

ページ下部のメニューを非表示にする
コード最上部で設定

enableTitleFooter: false

黒板機能をオフにする

enableChalkboard: false

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

enableMenu: false

タイトルの設定

コード上部で設定

title: "reveal.jsの使い方"

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

デフォルト設定では見出しは全て大文字になる
reveal.jsの設定の下部に下記を追加する
参考リンク

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

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

よく使う機能のリンク

• Code
• Math
• Fragments（アニメーション）
• 内部リンク
• 動画やiframe埋め込み
• Layout