ZeBeVogue別館 このページをアンテナに追加 RSSフィード

2012年11月10日

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

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

f:id:zebevogue:20121110132352p:image

お題は「HTML5再入門」。

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

このreveal.jsHTMLHTML5になっています。

<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でクリックした箇所をズームさせる事もできます。

f:id:zebevogue:20121110132621p:image

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

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

投稿したコメントは管理者が承認するまで公開されません。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

リンク元
人気の記事

『d.hatena.ne.jp』 の人気エントリー - はてなブックマーク

1. CentOS 5.8にNode.jsをインストール - ZeBeVogue別館
2. meta の viewport - ZeBeVogue別館
3. jQueryで複数のイベントを割り当てる - ZeBeVogue別館
4. MacでPutty形式の秘密鍵を変換する - ZeBeVogue別館
5. DropboxのDatastore APIをさっそく使ってみた - ZeBeVogue別館
6. smarty で携帯絵文字 - ZeBeVogue別館
7. ExpressJSでのバリデーション(express-validator) - ZeBeVogue別館
8. ChromeでAccess-Control-Allow-Originを停止させつつ、別アプリとして動かす - ZeBeVogue別館
9. PhantomJSでスクリーンショットを撮る&HTML2PDF - ZeBeVogue別館
10. Twitter Bootstrapのカルーセルをキーボードとスワイプで操作 - ZeBeVogue別館
11. PHPで簡単XPath(ATOM/RSS1.0) - ZeBeVogue別館
12. Node.jsでAmazon S3にアップロードする方法 - ZeBeVogue別館
13. ApacheとNode.jsを連携させる - ZeBeVogue別館
14. neu.Nodeを触ってみました - ZeBeVogue別館
15. PDFKitを使ってNode.jsからPDFを作成する - ZeBeVogue別館
16. gruntでJavaScript/CSSを結合・minify - ZeBeVogue別館
17. node.jsからPhantomJSを使ってPDFを生成する - ZeBeVogue別館
18. Node.js/ExpressJSでのファイルのアップロード - ZeBeVogue別館
19. Node.jsでjQueryを利用する - ZeBeVogue別館
20. Node.js/PHPでの様々な文字列ハッシュの生成 - ZeBeVogue別館
21. node.jsのMVCフレームワークSails.jsを使ってみた - ZeBeVogue別館
22. Expressのルーティングの自動化(Node.js) - ZeBeVogue別館
23. nodemailerでNode.jsからメールを送る - ZeBeVogue別館
24. PhalconのWebToolsを使ってみる - ZeBeVogue別館
25. ImageMagickでGIFアニメを作る - ZeBeVogue別館
26. Titaniumでadmobを利用する(Android編) - ZeBeVogue別館
27. reveal.jsで格好いいプレゼンを作ってみた - ZeBeVogue別館
28. Node.jsでの画像処理 - ZeBeVogue別館
29. nodeコマンド以外の起動コマンド(node-dev/forever/npm start/npm test) - ZeBeVogue別館
30. ZeBeVogue別館
Connection: close