reveal.jsで格好いいプレゼンを作ってみた

You+ プレゼンテーション

コワーキングスペースでのプレゼンをするにあたって、格好良いのが無いかなと探していたら、reveal.jsというのがあったので、今回はこれを使ってプレゼンを作ってみました。

お題は「HTML5再入門」。

まぁありきたりと言えばありきたりですし、プレゼンはあまりやった事がないので、エフェクトが格好良いのでないと、目を引かないっしょ、という理由もありますw
このreveal.jsのHTMLもHTML5になっています。

<body>
	<div class="reveal">
		<!-- Any section element inside of this container is displayed as a slide -->
		<div class="slides">

			<section>
				<h1>HTML5再入門</h1>
				<h3>HTML5をおさらいしましょう</h3>
				<img src="img/HTML5-logo.svg" style="width:300px">
			</section>

			<section>
				<h2>HTML5とは何か(1)</h2>
				<p>
						HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）、略記・略称：HTML（エイチティーエムエル）とは、ウェブ上のドキュメントを記述するためのマークアップ言語である。Web作成基本プログラミング用語である。<br>
				</p>
			</section>

sectionタグごとにページが分かれ、スペースキーや矢印キーでページを移動する事ができます。ESCキーでページ一覧を表示させたり、Alt（Macの場合はoption/alt）+Clickでクリックした箇所をズームさせる事もできます。

また、sectionをネストする事で、ページの下に別のページを追加する事もできます。

実際作ってみると、jQueryが使われていない、要素ごとのスタイルを上書きする必要があるとか、ちょっとした点が気になりましたが、一般的なHTML/JS/CSSが分かれば、概ね問題なく作れました。