Slidyでスライド作成

Js


最近、よくみかけるようになったブラウザでのスライドを作ってみる。


１．W3.orgより「slidy.js」と「slidy.css」をダウンロード

http://www.w3.org/Talks/Tools/Slidy/#(1)

今回はすべて揃ったslidy.zipをダウンロードしてきた。でも必要なものは上記の２つのみ。


２．表示用htmlを作成する。
slidy.zipの中にtemplete.htmlというのがあったのでそれを書き換えるだけでＯＫ。


ちなみにtemplete.htmlを書き換えてシンプルにしたのがこちら。

templete2.html

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>たいとる</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="copyright" content="Copyright &#169; 2007 (haradago)" />

<!--"slidy.js"の格納先を指定	-->
<script src="slidy.js" type="text/javascript">
</script>
</head>
<body>
<!-- this defines the slide background -->

<!--ヘッダ部の記述	-->

<div class="background">
  <div class="header">
  <!-- sized and colored via CSS -->
  </div>
  <!-- hidden style graphics to ensure they are saved with other content -->
  <div class="footer">

  <!-- modify the following text as appropriate -->
  haradago<br />
  イベント, 場所, 日時
  </div>
</div>



<div class="slide cover">
<div class="header">
<h1>ヘッダ１</h1>
</div>
<h2>イベント, 場所, 日時</h2>
</div>

<!--以下より表示したいコンテンツを記述-->
<div class="slide">
<h1>haradago1</h1>
page1
</div>

<div class="slide">
<h1>haradago2</h1>
page2
</div>

<div class="slide">
<h1>haradago3</h1>
page3
</div>


</body>
</html>

div タグの slide の属性１つにつき１ページとなる。




□調べてる途中で見つけたメモ
MT(MovableType)・・・ＤＢ搭載のブログ作成ツール？結構流行っているみたい
Slidyで検索して結構ヒットしたが、Slidyとは直接関係はない模様。