リスティング広告代行の専門会社|Yahoo!プロモーション広告・Google AdWords完全対応|東京・大阪・名古屋

HTMLでかっこいいプレゼンテーション【reveal.js】


cap01

PowerPointやKeynoteでプレゼンテーションを作成するのも良いですが、最近はHTMLで作成して手軽に公開、というケースも増えていますね。

そこで今日は、HTMLでかっこいいプレゼンテーションを簡単に作成できるフレームワークのひとつ、reveal.js をご紹介します。

デモと操作方法

こちらにデモがありますので、触ってみてください。グイングイン動きます。

操作はとても簡単で、基本的にはカーソルキー上下左右でスライドを移動するのみです。また、Escキーを押すとスライドの一覧を表示できます。

作り方

プレゼンテーションを作成するには、github.com/hakimel/reveal.js で「Download ZIP」ボタンからファイルを一式ダウンロードし、index.htmlファイルを編集すればよいだけです。簡単ですね。

具体的な記述方法

<div class="slides"> の下に <section> 単位で一枚のスライドを記述します。縦スクロール方向にスライドを追加したい場合は、 <section> をネスト(入れ子)させればOKです。

[html]
<div class="reveal">
<div class="slides">
<section>Single Horizontal Slide</section>
<section>
<section>Vertical Slide 1</section>
<section>Vertical Slide 2</section>
</section>
</div>
</div>
[/html]

<section> 内は、HTMLでゴリゴリ書いても良いですし、Markdown形式で書くことも出来ます。

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

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

HTMLでプレゼンテーションを作成する機会がある人は、試してみてはいかがでしょうか。



業界初のリスティング広告運用総合支援ツール Lisket(リスケット)

無料メルマガ

登録はたったの5秒!一週間分のコラムを毎週月曜にメールでお届けします。

Facebookもチェック