Webプレゼンテーションスクリプト
s5はWebプレゼンテーションを作成できるJavascriptです。
その上、印刷時にもレイアウトを調整してくれます。
また、なによりHTMLの書き方がわかれば簡単に作成することができるシンプルさが魅力です。
次のページからスライドの作成方法を紹介していきます。
headにCSSを埋め込む
- <link rel="stylesheet" href="http://yourdomain/slides.css" type="text/css" media="projection" id="slideProj">
- <link rel="stylesheet" href="http://yourdomain/outline.css" type="text/css" media="screen" id="outlineStyle">
- <link rel="stylesheet" href="http://yourdomain/opera.css" type="text/css" media="projection" id="operaFix">
- <link rel="stylesheet" href="http://yourdomain/print.css" type="text/css" media="print" id="slidePrint">
headにJavascriptを埋め込む
- <script src="http://yourdomain/slides.js" type="text/javascript"></script>
ベースレイアウトの作成
<div class="layout">
<div id="controls"></div>
<div id="currentSlide"></div>
<div id="header"></div>
<div id="footer">
<h1>プレゼンタイトル名</h1>
<h2>日付など</h2>
<!-- 左下に表示されます -->
</div>
</div>
</div>
スライドの作成方法
<div class="presentation">
<div class="slide">
<h1>スライドタイトル</h1>
<h3>見出し</h3>
</div>
<-- 作成したい枚数分 -->
</div>
アニメ−ション風表示
以下の様にulタグに指定します。<ul class="incremental">
<li>中身</li>
</ul>
- クリックやスペース、右を押すとほら
- 色が変わります
- 素晴らしい
画像もできます part 1
画像をのせていく感じです（次ページでCSSを紹介）<p class="imgcon" id="anim">
<img src="画像URI" id="me01" alt="">
<img src="画像URI" id="me02" alt="" class="incremental">
</p>
画像もできます part 2
CSSで画像を上手く重ねていきます。なので画像はpngで透明にしておきましょう。
.imgcon {width: 525px; margin: 0 auto; padding: 0; text-align: center;}
#anim {width: 270px; height: 320px; position: relative; margin-top: 0.5em;}
#anim img {position: absolute; top: 42px; left: 24px;}
img#me01 {top: 0; left: 0;}
img#me02 {left: 23px;}大事なのはベースをposition:relative;で指定して、画像を上手く重ねられるかです。