下記の用に書くだけでこのスライドが作れます
VS Codeの拡張機能で「vscode-reveal」を
インストールするだけ
これで準備完了
右方向にスライドを作る場合は
— (ハイフン3つ)で区切る
下方向にスライドを作る場合は
– (ハイフン2つ)で区切る
⇩ を押してください
下方向へは何枚でもスライドが作れます
下方向のスライド3枚目
基本的な書き方は以上です
これだけでスライドが作れます
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. リスト1-1
2. リスト2
3. リスト3
[vscode-reveal](https://marketplace.visualstudio.com/items?itemName=evilz.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
スライド切り替えのアニメ―ション設定が変更可能
⇩:アニメーション設定 詳細
⇨:スライドの表示方法
コードの最上部で設定
スライドを切り替えるスピードも
コードの最上部で設定
スライドの表示は下記の2パターン
⇩:スライド表示方法 詳細
⇨:スライドの保存方法
VS Codeで下記画面左のマークを押し、
上部のマークをクリック
コードの横にスライドが表示される
VS Codeで下記画面左のマークを押し、
上部のマークをクリック
ブラウザにスライドが表示される
スライドの保存はmdファイルのままでも良い
しかし誰かにスライドを配布したい場合に
htmlやpdfに変換すると便利
⇩:スライド保存方法 詳細
⇨:スライドの操作方法
VS Codeで下記画面左のマークを押し、
上部のマークをクリック
mdファイルと同じフォルダに「export」ファルダが作成され、その中にindex.htmlファイルができる
index.htmlをブラウザで開けばスライドが見れる
他の人に配布する場合は、「export」ファルダごと(zipなどに圧縮して)配布すればOK
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>
ありがとうございました!