HTMLページをスライド表示する「Reveal.js」を使う

Reveal.js

ページ全体をプレゼン用スライド化するのに便利なライブラリです。

準備

Githubリポジトリからパッケージをダウンロードしましょう。

落としてきたファイルを展開し、css、js、lib、pluginフォルダを実際に利用する場所へ適宜移動させましょう。

index.htmlを開けばすでにReveal.jsが動作する状態なので、これをベースに調整しても良いと思います。

HTML

まずはヘッダー内でCSSの読み込み。
用意されているテーマCSSを切り替えるだけで色合いを変更できます。

<head>
~
    <link rel="stylesheet" href="css/reveal.min.css">
    <link rel="stylesheet" href="css/theme/default.css" id="theme">
</head>

スライドの基本構造は下記になり、sectionがスライド1ページ分の領域になります。

<div class="reveal">
    <div class="slides">
        <section>ページ1</section>
        <section>ページ2</section>
        <section>ページ3</section>
    </div>
</div>

そしてbodyを閉じる直前にJSの読み込み。
サンプルで入っているindex.htmlをそのままコピペすると楽です。

<script src="assets/lib/js/head.min.js"></script>
<script src="assets/js/reveal.min.js"></script>
<script>~</script>

オプション値は長いので割愛していますが、ここで動作オプションの設定ができます。