ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テンプレートモンスター
ホームページテンプレート

Free Templates Online JP
無料ホームページテンプレート
Free Templates Online JP

株式会社ネットオン
採用Webマーケティング
indeed広告代理店

海外 SEO対策 トラッキングツール
海外 SEO対策
ランキングチェックツール

Rank Tracker

テクニック

HomeHTML&CSS講座 > Reveal.jsとHTML5を使ったプレゼンテーションはPowerPointを超える

Reveal.jsとHTML5を使ったプレゼンテーションはPowerPointを超える

投稿日:2013年8月23日   ソフトウェア:DreamWeaver

このチュートリアルではReveal.jsとHTML5を使ったプレゼンテーション資料を作成する方法について紹介します。


Step1:はじめに

プレゼンテーションと言えば、PowerPointですよね?
でも、良く考えてみてください。PowerPointという名前を出しただけで、私の知り合いの多くはあくびを始めてしまいます。
お客様にあくびはしてほしくないですよね?
AndroidやiPadでPowerPointを使ったプレゼンテーションをしようとすると、PowerPointを動かすだけでも別の追加のツールが必要になります。
ウェブ開発者であれば、私のようにReveal.jsというJavaScriptの優れたフレームワークを使ってみてはいかがでしょうか?
Reveal.jsではプレゼンテーションをウェブサイトとして構築します。
つまり、ブラウザでプレゼンテーションをすればいいのです。

Reveal.js: プレゼンテーションのデモ
Reveal.js: プレゼンテーションのデモ

Reveal.jsは1つのJavaScriptファイルと2つのスタイルシートから成り立っています。
1つのスタイルシートは共通のスタイルを定義し、2つ目はあなたが利用することが可能な標準のテーマのレイアウトが含まれています。
このテーマによって、文字、画像、リンクと言ったプレゼンテーションの重要な要素のスタイルが定義されています。
スタイルシートは上手く構成されていて、分かりやすいので、Reveals.jsのテーマは簡単にカスタマイズすることができます。
スライドの移り変わりにCSS 3Dトランジションを使った裏技を使用することも可能です。



Step2:HTML5を使ったスライドのマークアップ

スライドのプレゼンテーションのマークアップは、HTML5のセクション要素を使って行われます。
セクション要素の上には2つのコンテナを配置し、HTMLドキュメントのどこからプレゼンテーションが始まるかをフレームワークに伝えます。

<div class="reveal">
<div class="slides">
<section>
<p>Folie 1</p>
</section>
<section>
<p>Folie 2</p>
</section>
</div>
</div>

各セクションには任意のコンテンツを入れることが可能です。
矢印キーを使ってナビゲートします。
セクションを入れ子にすることも可能です。
これにより、プレゼンテーションをさらに分割することができます。
左右の矢印キーを使って、第一レベル内のセクションをナビゲートします。
入れ子のセクションに到達すると、上下の矢印キーが使えるようになり、第二レベルのセクションをスクロールすることが出来ます。

<div>
<div>
<section>
<p>Folie 1</p>
</section>
<section>
<section>
<p>Folie 2 a</p>
</section>
<section>
<p>Folie 2 b</p>
</section>
</section>
</div>
</div>

ESCキーを押すと、全てのスライドのインデックスが現れ、個々のスライドへ移動することが可能です。

プレゼンテーションのデモのインデックス
プレゼンテーションのデモのインデックス






Step3:Reveal.js:ナビゲーションの拡張が可能

キーボードだけではなく、マウスによるナビゲーションも可能にするにはプレゼンテーションに小さな動作要素を実装する必要があります。
マウスによるナビゲーションをするにはスライドの定義のすぐ後のコンテナにちょっとしたコードを挿入します。
そうするとブラウザの右下部分に4つの方向を示す矢印キーの制御要素が現れます。

長いプレゼンテーションでは、順序を間違えたり、時間配分を誤ったりするのを防ぐために、進捗状況を示すバーがほしいと思うかもしれません。
これもたったひとつのコードで済みます。
進捗バーは一番下の部分に表示されます。
この位置により、現在のスライドがプレゼンテーション全体のどこに位置するかが分かります。



Step4:Reveal.js:Markdownの利用が可能

これは私にとって重要な機能です。
スライドのコンテンツのスタイルを記述するのにHTMLを使うのではなく、簡単なMarkdownの構文が使えます。
私はいつもこれを使っています。
この記事はMarkdownを使って書いています。
Reveal.jsがMarkdownをHTMLに変換してくれます。
有利な点:Markdownの内容は管理がとても簡単です。
なぜなら、開始タグと終了タグの中にあるコンテンツを探し回らなくていいからです。

<section>
##Heading H2
Paragraph with [link](http://www.noupe.com)
</section>


Step5:最後に

Reveal.jsはブラウザを使ったハイレベルのプレゼンテーションを構築するのに強力なフレームワークです。
JavaScriptのFullscreen-APIと組み合わせれば、Powerpointとは比べようがないほどの出来に仕上がります。



引用:Web Design Library   著者:smashingmagazine.com  翻訳:幕澤



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング