はじめに
先日、以下のサイトでHTMLベースのプレゼンテーションツールにCSSS(CSS based SlideShow System)というものがあることを知りました。
このエントリでは、JavaScriptとCSSを駆使してつくられたHTMLベースのプレゼンテーションツールであるCSSS(CSS based SlideShow System)をご紹介します。
日経BP社
売り上げランキング: 977
CSSSとは
CSSSはLea Verouさん(http://leaverou.me/)という方によってつくられたHTMLベースのプレゼンテーションツールです。作者はS5というプレゼンテーションツールの存在を知らないままに、自分にあったプレゼンテーションツールがないと思い、このCSSSを開発したそうです。後にS5の存在を知り、S5の素晴らしさを認めていますが、CSSSとS5は違うということを強調しています。
CSSSは、すべてのスライドは一枚のHTMLファイルで作られており、スライドのテーマはCSSファイルとして提供されます。また、CSSではできないキーボードショートカットなどの制御をJavaScriptで行っています。
CSSSの持つ機能
- スライドのIDはJavaScriptによって、動的に割り当てられます。スライドごとに独自のIDを割り振ることもできます。
- class="delayed"と書くことで、スライドをアニメーション表示することができます。
- スライドはウインドウサイズに自動的にあわせることができます。
- スライドタイトルに従い、ドキュメントのタイトルを変更できます。 (title 属性 あるいは、スライドのヘッダで指定します。)
作者が認めるCSSSの欠点
Firefox 3.6+, 最新のChrome/Safari or Opera 10.60+しかサポートしていません。
これには以下のような理由があります。
- より軽量化するため
- コードを理解しやすくするため
- プレゼンテーションであり、環境はいかようにもコントロールすることができるため。
ダブルクリックでスライドを進めることはできません。作者自身がダブルクリックでのスライド切り替えを迷惑な機能だと考えているためです。
タイマー
画面上部のプログレスバーはタイマーの役割を担っています。
プレゼンの時間は、bodyタグのdata-duration属性で定義することができます。タイマーと終了時のスタイルは、#timerと#timer.endセレクタで定義することができます。
ナビゲーション
CSSSでは以下の操作ができます。
- → or ↓ で次のスライドに進む、または、次の項目を表示します。
- ← or ↑ で次のスライドに戻る、または、表示した項目を元に戻します。
- Ctrl* + → or Ctrl* + ↓ 次のスライドにジャンプします。
- Ctrl* + ← or Ctrl* + ↑ 前のスライドにジャンプします。
- Home で最初のスライドにジャンプします。, End で最後のスライドにジャンプします。
- Ctrl* + G で任意のスライドにジャンプします。 (このとき、スライド番号を指定します）
- Ctrl* + H スライドのサムネイルを表示し、選択したスライドにジャンプすることができます。
CSSスニペット機能
CSSスニペットという機能があり、ダイナミックにCSSを編集し、結果を即座に反映させることができます。
