Reveal.js でのスライド作りはグリッドレイアウトで完成する。

===========

Reveal.jsをダウンロードして、Twitter Bootstrapを利用できるようにする。

参考にした

利点

• span6 などのレイアウトでスライドが作れる。２カラム、３カラムも自在。
• popover() や tooltip() が使える。(jQueryプラグインも使うとどんどん進化する。)

追加

head内に追加してください。

index.html

<link id="theme" rel="stylesheet" href="http://slidifylibraries2.googlecode.com/git/inst/libraries/highlighters/highlight.js/css/tomorrow.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://slidifylibraries2.googlecode.com/git/inst/libraries/widgets/bootstrap/css/bootstrap.css"/>

削除

headから削除してください。

index.html

<link rel="stylesheet" href="lib/css/zenburn.css">

フッターに追加

index.html

<!-- LOAD HIGHLIGHTER JS FILES-->
<script src="http://slidifylibraries2.googlecode.com/git/inst/libraries/highlighters/highlight.js/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<!-- DONE LOADING HIGHLIGHTER JS FILES-->

実際例

index.jade

.reveal
	.slide
		section
			h1 これでグリッドレイアウトを使って、スライドが作れるようになったよ！
			.span6
				p left side
				hr
				p hello
			.span3
				p Ohayo
			.span3
				p right side

神がかって便利なので、おすすめです。僕はjadeで書けるようにテンプレート作ってます。jadeだと、マークダウンも書けるし、divタグをがんがん書けたり、javascript部分とスライド文章の部分の分離ができるのでおすすめです。もちろんnodeとかgruntとか使うわけですが、暇があったら公開します。

時間できたらレイアウトされたスライドとかpopover() とか tooltip() とかjQueryプラグインで画像拡大するのを含めた画像上げます。