HTML Slidyの使い方

資料：ぽっと
URL： http://www.potto.client.jp/

　 JavaScript をONにし，矢印キー（←　→）やマウスのクリックでスライドを送って読んで下さい。最下部の"contents"をクリックするとページのリストが表示され，ページを選ぶことができます。

はじめに

　この資料は W3C 製のHTMLプレゼンツールである"HTML Slidy"の簡単な使い方です。私が開発した"HTML Slidy Maker"で生成したファイルの直接編集や操作するときにご利用下さい。詳しくは以下の公式サイトをご覧下さい。

公式サイト： W3C Slide show Tools

HTML Slidyのキー操作

　"HTML Slidy"のキー操作は以下の通りです。

マウスクリック，スペースキー	次のスライド
"←" or "Page Up"キー	前のスライド
"→" or "Page Down"キー	次のスライド
”Home”キー	先頭のスライド
”End”キー	先頭のスライド
"C"キーまたは”contents?”をクリック	コンテンツテーブルの表示
"F11"キー	フルスクリーン
”F”キー	フッタの表示と非表示の切り替え
”A”キー	全てのスライド表示の切り替え
”S”キー	フォントサイズを小さく
”B”キー	フォントサイズを大きく

XHTMLの雛形

　HTML SlidyのXHTMLの雛形は以下の通りです。

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
<head> 
  <title>Slide Shows in XHTML</title> 
  <meta name="copyright" 
   content="Copyright &#169; 2005 your copyright notice" /> 
  <link rel="stylesheet" type="text/css" media="screen, projection, print" 
   href="http://www.w3.org/Talks/Tools/Slidy/slidy.css" /> 
  <script src="http://www.w3.org/Talks/Tools/Slidy/slidy.js" 
   type="text/javascript"></script> 
  <style type="text/css"> 
    <!-- your custom style rules --> 
  </style> 
</head>
<body>
   ... your slides marked up in XHTML ...
</body>
</html>

基本ルール

ひとつのスライドは<div class="slide"> ... </div>の中に記述します。
<h1> ... </h1>タグで囲んだ内容がスライドのタイトルになります。
スライドのCSSと JavaScript

スライドショーのスタイルシート： http://www.w3.org/Talks/Tools/Slidy/slidy.css
スライドショーのscript： http://www.w3.org/Talks/Tools/Slidy/slidy.js

metaタグにname="copyright" を指定することで最下部に著作権表示ができます。

<meta name="copyright" 
content="Copyright &#169; 2005 your copyright notice" />

Incremental表示

　リスト要素などをマウスをクリックするごとに表示する方法は<ul class="incremental"> とclass を"incremental"とします。

First point
Second point
Third point

<ul class="incremental"> 
  <li>First point</li> 
  <li>Second  point</li> 
  <li>Third point</li> 
</ul>

アウトライン表示

class="outline" を指定すると，クリックしたときに子要素が開きます。
class="expand"を指定すると，クリックしたときに子要素が閉じます。

Topic 1
1. subtopic a
2. subtopic b
Topic 2
1. subtopic c
2. subtopic d

<ol class='outline'>
  <!-- topic 1 starts collapsed -->
  <li>Topic 1
    <ol>
        <li>subtopic a</li>
        <li>subtopic b</li>
    </ol>
  </li>
  <!-- topic 2 starts expanded -->
  <li class="expand">Topic 2
    <ol>
        <li>subtopic c</li>
        <li>subtopic d</li>
    </ol>
  </li>
</ol>