基本的なスライドの指定方法

実際に表示するスライド内容部分は<div class="presentation">タグ内にまとめて記述します。その<div class="presentation">タグ内に表示したいスライドの数だけ<div class="slide">を記述します。

ただ、最初に指定された<div class="slide">の内容はスライドのタイトルとして処理される点には注意してください。<h1><h2>タグなど表示される位置が最初の<div class="slide">内だけ異なるためです。

2番目からの<div class="slide">は<h1><h2>タグと<div><p><ul><ol><li><img>タグなど一般的にWebページに表示する際に使用するものが、そのまま指定できます。<div class="slide">内にはWebページをまるごと1つ入れるような感覚で作成すればよいでしょう。サンプル01は表紙と2枚のスライドを表示するものです。

サンプル01の実行結果

Webページがスライドで

表示されていく

サンプル01

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>S5サンプル</title>
        <link rel="stylesheet" href="ui/i18n/slides.css" type="text/css" media="projection" id="slideProj" />
        <link rel="stylesheet" href="ui/default/outline.css" type="text/css" media="screen" id="outlineStyle" />
        <link rel="stylesheet" href="ui/default/print.css" type="text/css" media="print" id="slidePrint" />
        <link rel="stylesheet" href="ui/default/opera.css" type="text/css" media="projection" id="operaFix" />
        <script src="ui/default/slides.js" type="text/javascript"></script>
    </head>
    <body>
        <div class="layout">
            <div id="controls"><!-- DO NOT EDIT --></div>
            <div id="currentSlide"><!-- DO NOT EDIT --></div>
            <div id="header"></div>
            <div id="footer">
            <h1>[S5 サンプル]</h1>
            <h2>[S5とは？]</h2>
            </div>
        </div>

        <div class="presentation">

            <div class="slide">
                <h1>S5についての説明資料</h1>
            </div>

            <div class="slide">
                <h1>S5とは？</h1>
                <h2>手軽なプレゼンスクリプトです</h2>
                <p>S5は(X)HTMLとCSSを組み合わせるだけで自動的にプレゼンができます。</p>
            </div>

            <div class="slide">
                <h1>S5は何の略？</h1>
                <p>S5は「Simple Standards-based Slide Show System」の頭文字であるSが5つなのでS5です。</p>
            </div>

        </div>
    </body>
</html>

画面表示後にマウスボタンで全体をクリックするか、画面中央下にあるナビゲーションボタンをクリックすることで次のスライドを表示することができます。また、< >ボタンでなく表示されている[０]ボタンをクリックするとスライドの表示方法が切り替わります。

[0]ボタンを押すと

表示が切り替わる

スライド表示はキーボードでも操作することができ以下のキーに対応しています。

スペースキー 次のスライドに進む
→(カーソルキー) 次のスライドに進む
←(カーソルキー) 前のスライドに戻る
Tキー 表示方法を切り替える
Cキー セレクトメニューの表示／非表示の切り替え

ナビゲーションボタン下にマウスを移動させるかCキーを押すとセレクトメニューが表示され、任意のスライドに手軽に移動することができるようになる