■ reveal.jsとは

HTMLでプレゼンテーション用のスライドを作成するツール。

■ 導入

本家からダウンロードする。

中身のindex.htmlがスライドとなる。

■ 基本構成

<!--↓ここから開始 -->
<div class="reveal">
  <!-- Any section element inside of this container is displayed as a slide -->
  <div class="slides">

    <!--↓sectionごとに各スライドが切り替わる -->
    <section data-markdown>
        <!--↓scriptの中にスライドの内容をmarkdownで記載する -->
        <script type="text/template">
          スライド1
        </script>
    </section>

    <section data-markdown>
        <script type="text/template">
          スライド2
        </script>
    </section>  
</div>

■ スライドの属性

data-markdown : スライドの内容を記載した外部markdownファイルのパスを指定
data-separator : 同じsection内でのスライドを区切るときの区切り文字を正規表現で指定(次のスライドは横方向)
data-separator-vertical : 同じsection内でのスライドを区切るときの区切り文字を正規表現で指定(次のスライドは縦方向)　　
- data-transition : スライド内コンテンツのアニメーションの指定
- data-background-transition : スライド自体のアニメーションを指定
- data-background : 背景色または、背景画像の指定
- data-separator-notes : スピーカーノートの区切り文字を正規表現で指定

<section data-markdown="md/test.md"
        data-separator="---$"
        data-separator-vertical=">>>$"
        data-transition="zoom"
        data-background-transition="slide"
        data-background="green"
　　  data-separator-notes="^Note:">
    <script type="text/template">
  </script>
</section>

markdownファイルは、下記のように書くと区切られる。
※markdownファイルを本体の HTML から切り離して外部ファイルとして参照する場合、作ったコンテンツをWeb サーバー上で動かさなければならないので、オフラインでは使用できない。
https://gist.github.com/masakielastic/9d15ee8f46488183f8c0

スライド1

---

スライド2

>>>

スライド3

■ スピーカーノート

発表者用のカンペなどを表示する機能。

<aside class="notes">
    スピーカーノートウィンドウを's'で表示。
    ここに書いた内容はスライドには表示されないないが、
    スピーカーウィンドウ上に表示される。
</aside>

data-separator-notesを使用した場合は、

Note:
ここからスピーカーノートにできる

■ テーマの変更

下記のcssファイルを変更する。

<link rel="stylesheet" href="lib/css/zenburn.css">

■ 色の変更

<section data-markdown>
    <script type="text/template">
        # <span style="color:green">色</span>

        <span style="color:red">タグ</span>を使って<span style="color:blue">色</span>を変える
    </script>
</section>

■ スライドの操作

コマンド	内容
o または ESC	スライド一覧(オーバービュー)
f	フルスクリーンモード
s	スライドノート表示
Alt +	マウスクリックでズーム
.(ピリオド)	スライドをブラックアウト

reveal.js参考サイト