433
429

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2013-07-23

ちょうどいくつかプレゼン用の資料を作らなきゃと思っていてなんかいいテンプレートないかな〜って探していたらので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で開きます
    1. URLにindex.html?print-pdfを付与します
    1. comannd + p で印刷画面を表示させます
    1. 「レイアウト」を横にして「pdfにして保存」を選びます

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

433
429
4

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
433
429

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?