クリックで順次内容が表示されるようにする

1ページ内で全て完結するスライドであれば問題ありませんが、実際には同一スライド内でグラフの伸びや項目を順次表示させたい場合があります。S5ではクリックまたはカーソルキーの→キーにより、項目を順次表示させることができます。クリックで順次項目を表示するようにするには<ul>タグ、<div>タグなどにclass="incremental"を指定します。<ul>で指定したものがサンプル03、<div>タグで指定したものがサンプル04になります。

サンプル03の実行結果

クリックすると項目が順次表示される

サンプル03

<!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>
                <ul class="incremental">
                    <li>ブラウザだけでプレゼンが可能な時代です</li>
                    <li>パワーポイントと違って(X)HTMLページを作るだけ</li>
                    <li>ブラウザなので、さまざまなデバイスで見ることができます</li>
                </ul>
            </div>

            <div class="slide">
                <h1>おしまい</h1>
                <p>あっさりと終わりです...</p>
            </div>

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

サンプル04の実行結果

ulではなくdivで項目を表示している

サンプル04

<!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 class="incremental">
                    <p>ブラウザだけでプレゼンが可能な時代です</p>
                </div>
                <div class="incremental">
                    <p>パワーポイントと違って(X)HTMLページを作るだけ</p>
                </div>
                <div class="incremental">
                    <p>ブラウザなので、さまざまなデバイスで見ることができます</p>
                </div>
            </div>

            <div class="slide">
                <h1>おしまい</h1>
                <p>あっさりと終わりです...</p>
            </div>

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