ゼロからはじめるS5 - スクリプトひとつでプレゼンサイト

レイアウトの指定

それでは実際にS5を使ってみます。ここではスタイルシートファイルと背景画像をcssフォルダに、スライド内で表示する画像をphotoフォルダに入れてあります(下図参照)。

S5は決められたスタイルシートファイルとスクリプトを読み込ませる必要があります。これは<link>タグ、<script>タグを使って以下のように指定します。ちなみに、この記述部分はuiフォルダ内にあるi18nフォルダ内の00_head.txtファイルに記載されています。

<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>

これでS5を利用する準備が完了です。S5は決められたルールに従って表示する内容を(X)HTMLタグで記述します。まず、最初にページ全体のレイアウトを指定します。全体レイアウトは<div class="layout">タグ内に以下のように記述します。

<div class="layout">
    <div id="controls"><!-- DO NOT EDIT --></div>
    <div id="currentSlide"><!-- DO NOT EDIT --></div>
    <div id="header"></div>
    <div id="footer"></div>
</div>

ここで任意に指定できるのはヘッダーである<div id="header">とフッター部分の<div id="footer"></div>です。この部分は常にブラウザ画面に表示されています。スライドを移動するためのボタンやページを選択するためのセレクトメニューなどはS5により自動生成されます。