通常、S5のようなWebブラウザ上で動作するものは画面上(スクリーン上/プロジェクタ上)で再生されるのが主ですが、プレゼン資料として印刷される場合もあります。この印刷時に別途説明などを追記したい場合には<div class="slide">内に<div class="handout">タグを使って別途印刷時の文字などを指定することができます(サンプル02)。

サンプル02の実行結果

画面上では表示されない文字も印刷時には別途表示されている

サンプル02

<!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="handout">パワーポイントなしでブラウザだけでOK!　＊ここは印刷時にしか出てきません</div>
            </div>

            <div class="slide">
                <h1>S5は何の略？</h1>
                <p>S5は「Simple Standards-based Slide Show System」の頭文字であるSが5つなのでS5です。</p>
                <div class="handout">なるほど、そういう意味でしたか。　＊ここは印刷時にしか出てきません</div>
            </div>

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