Reveal.js
お手軽な HTMLプレゼンテーションの作成
作者：Hakim El Hattab
注意事項！
reveal.jsは簡単にHTMLを使って、美しいプレゼンテーションを作成するためのフレームワークです。 フル機能を見るにはCSS ３D対応のフラウザが必要です！！
縦方向スライド
主要なスライドは横方向に移動しますが、 スライドの説明を掘り下げたい時や詳細化したい時などは下方向にも移動できます。
１段下のスライドです
ナビゲーションをスペースキーで行うと下に移動します。
２段目のスライドです
Cornify
３段目のスライドです
この段が一番下です。
矢印キー（↑）で戻ることもできます。
スライド
コードを書けなくても良いか？
問題ない。
これらのフル機能をビジュアルに編集できる
オーサリングツールがあります。
お試しください。
http://slid.es.
視点
ESCキーでスライドの overview を表示します。
altキーを押しながら任意の要素をzoom in するのに zoom.jsを使っています。 Alt + click で戻ります。
（※これは 上手く機能していない）
iPadの Safari対応
モバイルで使える！ スワイプでスライドを動かせる。
それから、ピンチで overviewを表示できる。
箇条書きの例
- 箇条書き項目
- Or ・・・
- Or ・・・
- Or ・・・
段落番号の例
- 段落１
- 段落２の例
- ３番目の項目
スライド移動スタイル
以下の移動スタイルから好みのものを選択できます。
Cube -
Page -
Concave -
Zoom -
Linear -
Fade -
None -
Default
Cube：立方体の回転－Page：頁めくり －Concave：凹形 －
Zoom：ズーム － Linear：直線移動 － Fade：フェードアウト/イン －
None：切り替え － Default：省略値
テーマ
Reveal.js は以下のテーマが付属しています:
Default -
Sky -
Beige -
Simple -
Serif -
Night
Moon -
Solarized
* このデモでは デフォルトののテーマを読み込んだ後に選択したテーマをロードして置き換える
ように作られています。
あなたが作成するときは <head> タグ内の <link>先を置き換えて下さい。
Global State
Set data-state="something" on a slide and "something"
will be added as a class to the document element when the slide is open. This lets you
apply broader style changes, like switching the background.
Custom Events
Additionally custom events can be triggered on a per slide basis by binding to the data-state name.
Reveal.addEventListener( 'customevent', function() {
console.log( '"customevent" has fired' );
} );
スライド 背景色
Set data-background="#007777" ページ全体の背景色を変更する。全 CSS color フォーマット をサポートしています。
スライド 背景画像
<section data-background="image.png">スライド 背景画像（繰り返し）
<section data-background="image.png" data-background-repeat="repeat" data-background-size="100px">スライド背景の移動スタイル
の定義
reveal.js で backgroundTransition: 'slide' にすると
フェード切替からスライド切替になります。
スライド背景の移動スタイル
の上書き
スライド毎に background transitions（スライド背景の移動スタイル）を上書きするには
sectionタグに以下を記述します。
data-background-transition="slide".
引用の表記方法
引用の表現には２つの方法があります。行中に含める場合は：
“標準が良いのは選択肢がたくさんあることです。”
ブロック表記は:
“長い間、何百万個のタイプライターで何百万のサルがでたらめなタイピングをしているとシェークスピアの作品が複製されるという理論（無限の猿の定理）がありましたが、インターネットはこの理論が偽りだということを証明しました。”
プリティ コード
function linkify( selector ) {
if( supports3DTransforms ) {
var nodes = document.querySelectorAll( selector );
for( var i = 0, len = nodes.length; i < len; i++ ) {
var node = nodes[i];
if( !node.className ) {
node.className += ' roll';
}
}
}
}
highlight.jsの好意により
プレゼンテーション内部の
スライドへのリンク
プレゼンテーション内部のスライドにリンクできます。
このリンクがそうです。
部分表示
次に進んでください...
... ステップ表示 ...
いろいろなタイプ- の 表示
- 部分的に強調してみる
Fragment スタイルの種類
これらは fragment スタイルの一部です。:
grow
shrink
roll-in
fade-out
highlight-red
highlight-green
highlight-blue
current-visible
highlight-current-blue
大量のイメージについて！
PDFへの出力
プレゼンテーションを PDF に 出力できます。下記はそれを SlideShare にアップロードした例です。
ちょっと待ちたい時
キーボードの b キー か . キー を押してください。'paused'モードになります。 この間、スライドは表示されません。 スクリーンに気を取られないようにする時に、このモードは役に立ちます。