注意事項！

reveal.jsは簡単にHTMLを使って、美しいプレゼンテーションを作成するためのフレームワークです。フル機能を見るにはCSS　３D対応のフラウザが必要です！！

縦方向スライド

主要なスライドは横方向に移動しますが、スライドの説明を掘り下げたい時や詳細化したい時などは下方向にも移動できます。

?

１段下のスライドです

ナビゲーションをスペースキーで行うと下に移動します。

スライド

コードを書けなくても良いか？
問題ない。
これらのフル機能をビジュアルに編集できる
オーサリングツールがあります。
お試しください。
http://slid.es.

視点

ESCキーでスライドの overview　を表示します。

altキーを押しながら任意の要素をzoom in するのに zoom.jsを使っています。 Alt + click で戻ります。

（※これは　上手く機能していない）

iPadの Safari対応

モバイルで使える！　スワイプでスライドを動かせる。
それから、ピンチで overviewを表示できる。

箇条書きの例

箇条書き項目
Or ・・・
Or ・・・
Or ・・・

段落番号の例

段落１
段落２の例
３番目の項目

Markdown サポート

For those of you who like that sort of thing. Instructions and a bit more info available here.

<section data-markdown>
  ## Markdown support

  For those of you who like that sort of thing.
  Instructions and a bit more info available [here](https://github.com/hakimel/reveal.js#markdown).
</section>

スライド移動スタイル

以下の移動スタイルから好みのものを選択できます。

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' );
} );

スライド　背景画像

<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の好意により

プレゼンテーション内部の
スライドへのリンク

プレゼンテーション内部のスライドにリンクできます。
このリンクがそうです。

大量のイメージについて！

PDFへの出力

プレゼンテーションを PDF に出力できます。下記はそれを SlideShare にアップロードした例です。

ちょっと待ちたい時

キーボードの　b キー　か　. キー　を押してください。'paused'モードになります。この間、スライドは表示されません。スクリーンに気を取られないようにする時に、このモードは役に立ちます。

Reveal.js

お手軽な HTMLプレゼンテーションの作成

注意事項！

縦方向スライド

１段下のスライドです

２段目のスライドです

３段目のスライドです

スライド

視点

iPadの Safari対応

箇条書きの例

段落番号の例

Markdown サポート

スライド移動スタイル

テーマ

Global State

Custom Events

スライド　背景色

スライド　背景画像

スライド　背景画像（繰り返し）

スライド背景の移動スタイル
の定義

スライド背景の移動スタイル
の上書き

引用の表記方法

プリティ　コード

プレゼンテーション内部の
スライドへのリンク

部分表示

Fragment スタイルの種類

大量のイメージについて！

PDFへの出力

ちょっと待ちたい時

Stellar Links

THE END

BY Hakim El Hattab / hakim.se

Reveal.js

お手軽な HTMLプレゼンテーションの作成

注意事項！

縦方向スライド

１段下のスライドです

２段目のスライドです

３段目のスライドです

スライド

視点

iPadの Safari対応

箇条書きの例

段落番号の例

Markdown サポート

スライド移動スタイル

テーマ

Global State

Custom Events

スライド 背景色

スライド 背景画像

スライド 背景画像（繰り返し）

スライド背景の移動スタイルの定義

スライド背景の移動スタイルの上書き

引用の表記方法

プリティ コード

プレゼンテーション内部のスライドへのリンク

部分表示

Fragment スタイルの種類

大量のイメージについて！

PDFへの出力

ちょっと待ちたい時

Stellar Links

THE END

BY Hakim El Hattab / hakim.se

スライド　背景色

スライド　背景画像

スライド　背景画像（繰り返し）

スライド背景の移動スタイル
の定義

スライド背景の移動スタイル
の上書き

プリティ　コード

プレゼンテーション内部の
スライドへのリンク