HTML+jQueryでプレゼンテーションを簡単につくれる『Slippy』をつかってみた

カタログ
  1. 1. 使い方はデモを見ればOK
  2. 2. ソースのメモ
    1. 2.1. 使うときはコードを軽く書き換えるだけでOK
    2. 2.2. 1枚のスライドは
    3. 2.3. テーマは2つだけ

jQueryで書かれたプレゼン用のスクリプト Slippy を使って基金訓練でのスライドを作ってみたのでそのメモとか。Slippyのライセンスはたぶん修正BSD

使い方はデモを見ればOK

デモページのスライドがSlippyの使い方の説明になっているので読めば使い方は分かる。

  • 戻る : 左矢印キー
  • 進む : 右矢印キー, スペースキー, ダブルクリック
  • 一覧表示 : Escキー, Delキー, Tabキー (その後クリックでスライド選択)
  • 指定したページへジャンプ : 数字を入力後 Enter

ソースのメモ

HTMLの書き方についてのメモ

使うときはコードを軽く書き換えるだけでOK

Introducing Slippy - HTML Presentations - Jordi Boggianoに github へのリンクがあるのでそっからソースをダウンロードする。で、HTMLファイルの中身を見ればどう書きかえればいいのかだいたい分かるかと。。

1枚のスライドは

slide クラスのdiv要素で作成する。

1
2
3
4
5
6
7
8
9
<div class="slide">
<h2>スライドタイトル</h2>
<p>文章</p>
<ul>
<li class="incremental">箇条書き1</li>
<li class="incremental">箇条書き2</li>
<li class="incremental">箇条書き3</li>
</ul>
</div>

slideクラスのdiv要素で囲んだ部分が一枚のスライドになる。incremental クラスを指定すると最初は非表示で、進むと表示されるようになる。

テーマは2つだけ

1
<link type="text/css" rel="stylesheet" href="slippy-pure.css"/>

サンプルコードは slippy-pure.css で明るいテーマ。

slippy-dark.css で 紺の暗い背景に白文字の暗いテーマ。

この2つしかないっぽい。

私がつくった非常にテキトーなスライドをhttp://fernweh.jp/o/cl_sfn_slide/に置いておきます。このスライドのテーマは slippy-dark.css

関連があるかもしれない記事