【プレゼン用スライド作成は無料＆超時短で！】reveal.jsでつくる簡単HTMLスライドのススメ（１／２）
スライドを使ったプレゼンテーション。多くの方が「PowerPoint」を利用していることでしょう。でも、今日はそんなみなさんに、新しい選択肢をご紹介したいと思います。それが「reveal.js」です。
スライドはHTMLで作れる
この「スライド」は次のようなHTMLコードで実現されています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reveal.js サンプル</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/5.1.0/reveal.min.css" integrity="sha512-0AUO8B5ll9y1ERV/55xq3HeccBGnvAJQsVGitNac/iQCLyDTGLUBMPqlupIWp/rJg0hV3WWHusXchEIdqFAv1Q==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/5.1.0/theme/beide.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/5.1.0/reveal.js" integrity="sha512-35L3EFHQcGaTZ6QN9wAg9iK1hTPVCn8RGsscuXjm5JdmDRyOw+/IWJ4wavGkozQ8VDoddD7nV1psHgu/BYNpxQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/5.1.0/plugin/markdown/markdown.min.js" integrity="sha512-4exkEeyVuaWUFKozXl6L3UCugl6ai1cKnrVFkWUstdrNB2sDxxmPEaHBzTlYm9wX78EjPzEBG0s8k37oPeUFIw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<div class="reveal">
<div class="slides">
<!-- スライド1: はじめに -->
<section id="slide1">
<h2>はじめに</h2>
<p>これは1ページ目のサンプルです</p>
</section>
<!-- スライド2: 本題 -->
<section id="slide2">
<h2>本題</h2>
<p>これは2ページ目のサンプルです</p>
</section>
<!-- スライド3: おわりに -->
<section id="slide3">
<h2>おわりに</h2>
<p>これは3ページ目のサンプルです</p>
</section>
</div>
</div>
<script>
// Reveal.js 初期化
Reveal.initialize({
autoSlide: 5000,
loop: true // ループ再生
});
</script>
</body>
</html>キーポイントは<head>ブロックの中に描かれている何やら怪しげなlinkタグとscriptタグです。
本来は「ウェブページ」を表現するためにあるHTMLをスライドとして使い物にするため、JavaScriptで書かれた「呪文」が必要です。この呪文が書かれている経典がreveal.jsというライブラリです。
そろそろ居心地が悪くなってきた人がいるでしょうか？ 安心してください。reveal.jsの中身を読み解く必要は特にありません。
サンプルで示したように「reveal.jsを使うよ」と宣言するだけでいいのです。それを実現しているのがこのheadブロック内の記述です。
スライドをHTMLで作成する意義とは？
スライドと言えばパワーポイントしか考えられない？ いえ、そう決めつけるのは早計です。あえてHTMLを選択することには様々なメリットがあります。
テキストベースで軽量かつ高速
バージョン管理が容易(GitHubなどで管理可能)
ウェブ標準技術を使用しているため、長期的な互換性が高い
オフラインでも編集・表示が可能
HTMLスライドに不便はないのか？
オンラインでなくても大丈夫？
HTMLというと、ホスティングサービスやウェブサイトを介して情報を世界に発信というイメージがあるかもしれません。しかし、HTMLはブラウザさえあれば一台のPCやスマホなどのデバイスの中で単独でも利用でき、「サーバー」は必須ではありません。
編集操作が面倒では？
HTMLに対応した使いやすい編集ソフトは沢山あります。それらのソフトでは、タグを暗記しなくてもメニューから選べば入力可能だったり、開きタグを入力したら自動的に閉じタグを補完入力してくれたり、エラーやヘルプをその場で表示してくれたり、いろいろの工夫によってユーザーの手間を大きく減らしてくれるように作られています。テンプレをベースに最小限の加筆で済むように配慮されているものもあります。
Visual Studio Codeというソフトはそれらすべてをサポートしたフリーのエディタソフトで、非常にお勧めです。
面倒な文法なんか覚えたくない
僅かな数のタグを覚えれば十分
HTMLのタグ全てを覚える必要はありません。
とりあえずは「見出し」・「強調」・「画像挿入」などに関わるタグを覚えれば十分で、タグの種類は10種類にもなりません。
markdownも使える
さらに、reveal.jsはHTMLの代わりにmarkdownで書かれたスライドデータを取り扱うことができます。この場合は文法の習得が更に簡単になります。
それでは、具体的にどのようにすればHTMLを活用できるのか見ていきましょう。続きを読んでいただければ、今日からバシバシHTMLスライドが作れるようになりますよ。
