プレゼンテーション資料を作成するとなったとき、真っ先に思い浮かぶのが、MicrosoftのPowerPointです。
しかしながら、PowerPointはMicrosoft Officeのビジネス向けエディションにしか含まれていないため、家庭用のPCにはインストールされていないことが多いです。また、商用のソフトウェアなので、PowerPointのみを買うとしてもお金がかかります。
無料で使えてWebブラウザで動くプレゼンツール
PowerPointがインストールされていないPCで、ちょっとしたプレゼン資料を作るときにオススメなのが、Webブラウザで動くフリーのプレゼンツールCSSslideです。
CSSslideは、HTMLとCSSとJavaScriptを組み合わせて作られています。CSSやJavaScriptの知識がないと使えないのかと思われるかもしれませんが、なくても使えます。
CSSslide は、Web ブラウザで動くプレゼンツールです。
HTML Slidy や S6 にインスパイアされて作りました。CSS と JavaScript を組み合わせて作れます。実装が単純な反面、CSS を変更するだけで簡単にレイアウトを変更できます。
CSSslide - CSS と JavaScript で動くウェブプレゼンツール
CSSslideの優れているところ
CSSslideは、PowerPointと比較して、以下の点で優れています。
- 無料で使える
- 使用時に原作者のクレジット表記は必要です。
- ブラウザで動く
- ブラウザさえあれば、どのOSでも動きます。Macで作成して、Windowsでプレゼンすることもできます。
- プレゼンするPCに特別なソフトがいらない。
- PowerPointは、プレゼンをするPCにPowerPointがインストールされていなければ使えません。CSSslideなら特別なソフトをインストールすることなく使えます。*1
- 検索エンジンとの相性が良い
- プレゼン資料をWebに公開する場合には、pptファイルよりもクローラに対する相性が良いです。
- ファイルサイズが軽量
- PowerPointと比べるとファイルサイズが小さくてすみます。
CSSslideの使い方
- CSSslide - CSS と JavaScript で動くウェブプレゼンツール
から以下のファイルをダウンロードします。
- CSSslide.html
- CSSslide.css
- CSSslide.js
- ダウンロードしたファイルを1つのフォルダにまとめます。
- プレゼンテーション資料は、CSSslide.htmlを編集して作成します。
見出しと本文
divタグで囲まれた部分が1ページになります。見出しは、H2タグ内に書きます。本文は、pタグ内に書きます。
<div> <h2>見出し</h2> <p>本文はこちら</p> </div>
箇条書き
箇条書きはulタグとliタグを使います。
<div> <h2>見出し</h2> <ul> <li>箇条書き1</li> <li>箇条書き2</li> </ul> </div>
スタイルを変更する
デフォルトでは背景色は白ですが、背景色が黒のクールなデザインを使いたい場合は、以下からスタイルシートダウンロードします。
そして、CSSslide.html内でstylesheetのファイル指定を以下のように変更します。
<link rel="stylesheet" href="./style-black.css" type="text/css" />
プレゼンの操作方法
プレゼンの操作方法は、以下のようになっています。マウスでの操作はもちろん、キーによる操作もサポートしています。
- クリック / Enter : 進む
- ← / → : 戻る / 進む
- < / > : 文字を大きく / 小さく
- 5 : 文字を元の大きさにする
- 0 : 表紙に戻る
- F11 : フルスクリーンモードにする
まとめ
上記の手順で、初心者でも簡単にプレゼン資料を作成することができます。また、CSSやJavaScriptの知識がある人であれば、ダイナミックなアニメーション効果をつけるなど、自由に改良することもできます。
無料でプレゼン資料を作りたい人、作った資料をWebに公開するということをお考えの人は、ぜひこのCSSslideでつくることをオススメします。
*1:ブラウザのJavaScriptはONしておく必要はあります。
