
以前学校での講義の際、ある先生がhtmlのページを"→キー"だけでスライドさせておりました。便利だなぁと思いつつ、今回制作物を発表することになったので、興味本位で試してみることにしました。先生のスライドファイルをFirebugで覗いていると、どうやら
W3Cが公開する"
HTML Slidy"というjavascriptライブラリを使用していると判明!そうとわかればコッチのもの、得意の執拗な検索コンボの始まりです。以下、今回制作するまでの僕の手順になります。
1.CSSファイルを作成(ファイル名"slidy.css")→"
http://www.w3.org/Talks/Tools/Slidy/slidy.css"
2.jsファイルを作成(ファイル名"slidy.js")
→"http://www.w3.org/Talks/Tools/Slidy/slidy.js "
3.以下の雛形を貼り付けたXHTMLファイルを作成*必要に応じて書き換えてください
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Slide Shows in XHTML</title>
<meta name="copyright"
content="Copyright © 2005 your copyright notice" />
<link rel="stylesheet" type="text/css" media="screen, projection, print"
href="http://www.w3.org/Talks/Tools/Slidy/slidy.css" />
<script src="http://www.w3.org/Talks/Tools/Slidy/slidy.js"
charset="utf-8" type="text/javascript"></script>
<style type="text/css">
<!-- your custom style rules -->
</style>
</head>
<body>
... ここでマークアップしていきます ...
</body>
</html>
4.以下のルールに従い、マークアップ・スライドさせるページは、以下の1枚目、2枚目…の部分に記述する
<div class="slide">1枚目</div>
<div class="slide">2枚目</div>
------------------------------------------------------------------------------------------------------------
・スライドのタイトルはh1タグで囲む
<h1>スライドのタイトル</h1>
------------------------------------------------------------------------------------------------------------
・ページ内の情報を"→キー"ごとに表示させる場合はclass="incremental"を使う
<div class="incremental">
<p>1クリック目に表示</p>
<p>2クリック目に表示</p>
<p>3クリック目に表示</p>
</div>
------------------------------------------------------------------------------------------------------------
と言ったところです。
スライドページの操作としては、"→","space"、"クリック"で次ページに進み、"←"で前ページに戻ります。キー1つで、文字サイズを変更やスライドページの解除も可能です。僕も参考にさせていただいた"
HTML Slidyの使い方"さんでは、ここまで書いたものをより分かりやすく、そしてより詳しくまとめてくださってます。最初からこちらを紹介したほうが皆さんの為ですね(笑)
肝心のサンプルページですが、"
HTML Slidyの公式ページ(英語)"や、先ほど紹介させていただいた"
HTML Slidyの使い方"さんで確認できます。
プレゼンや説明などする際に役立ちそうなツール、覚えておいて損は無いと思いますよ!