Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

ちょうどいくつかプレゼン用の資料を作らなきゃと思っていてなんかいいテンプレートないかな〜って探していたらので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のドキュメントを読んでみてください

ryurock
認定スクラムマスター 認定プロダクトオーナー http://www.scrumalliance.org/community/profile/rkimura2
https://github.com/ryurock
visasq
ビザスクは「知見と、挑戦をつなぐ」をミッションに、世界で1番のナレッジプラットフォームをつくっています。 様々なニーズにつなぐことで、実際に経験したことで得られた知識や意見を、知見として価値最大化します。組織、世代、地域を超えて、知見を集めつなぐことで、世界中のイノベーションに貢献します。
https://visasq.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away