なんかかっこいいプレゼンテーションテンプレートを探しているならreveal.js使ってみろって

  • 436
    いいね
  • 4
    コメント
この記事は最終更新日から1年以上が経過しています。

ちょうどいくつかプレゼン用の資料を作らなきゃと思っていてなんかいいテンプレートないかな〜って探していたらのでreveal.jsが超絶に良かったのでメモ

reveal.js

htmlで綺麗でカッコいいプレゼンテーションを作れるフレームワークです。

3Dでグィングィン動きます

デモ画面見ればどんな風にグィングィン動くかわかります(開いたら右スクロールボタンを押してみてください)

Escキー押すとプレゼンテーションのドキュメント一覧が見れます

それがまたカッコよく3Dでみれます。

PDFへのエキスポートが楽チンです

書いたドキュメントをプリントしてメンバーに配布とかってシーンがあるとおもいますが
reveal.jsなら綺麗にできます。

使い方

zipパッケージで落としてくる

hakimel/reveal.jsにいって
「Download ZIP」をポチッと押します。

書きたい内容をindex.htmlで編集

コレだけです。

プレゼン内容の書き方

HTMLでゴリゴリ書きたい場合

プレゼン内容は <div class="slides"> 以下に <section>区切りで一枚のページになります。(右スクロールを押すたびに次のページに移動する)

markdowon形式でゴリゴリ書きたい場合

公式にも説明がありますがこんな感じで

index.html
<section data-markdown>
    <script type="text/template">
        ## Page title

        A paragraph with some text and a [link](http://hakim.se).
    </script>
</section>

下スクロールでのページを作成したい場合

<section>をネストさせましょう

index.html
<section>
    <section>
        <h3> 題名
    </section>
</section>

コレで下スクロールのページが作れます

PDFに変換する方法

以下がやり方(MAC)

  • 1. chromeで開きます
  • 2. URLにindex.html?print-pdfを付与します
  • 3. comannd + p で印刷画面を表示させます
  • 4. 「レイアウト」を横にして「pdfにして保存」を選びます

他にも色々オプションがあるのでgithubのドキュメントを読んでみてください