見出し画像

【プレゼン用スライド作成は無料＆超時短で！】reveal.jsでつくる簡単HTMLスライドのススメ

Koji Doi｜AIエンジニア｜webライター｜バイオ系ライター・アナリスト

スライドを使ったプレゼンテーション。多くの方が「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はブラウザさえあれば利用でき、「サーバー」は必須ではありません。

編集操作が面倒では？

HTMLに対応した使いやすい編集ソフトは沢山あります。それらのソフトでは、タグを暗記しなくてもメニューから選べば入力可能だったり、開きタグを入力したら自動的に閉じタグを補完入力してくれたり、エラーやヘルプをその場で表示してくれたり、いろいろの工夫によってユーザーの手間を大きく減らしてくれるように作られています。テンプレをベースに最小限の加筆で済むように配慮されているものもあります。

Visual Studio Codeというソフトはそれらすべてをサポートしたフリーのエディタソフトで、非常にお勧めです。

面倒な文法なんか覚えたくない 

僅かな数のタグを覚えれば十分

HTMLのタグ全てを覚える必要はありません。

とりあえずは「見出し」・「強調」・「画像挿入」などに関わるタグを覚えれば十分で、タグの種類は10種類にもなりません。

markdownも使える

さらに、reveal.jsはHTMLの代わりにmarkdownで書かれたスライドデータを取り扱うことができます。この場合は文法の習得が更に簡単になります。

5分で把握。HTMLをスライド化するには？

ここから先は

4,611字 / 3画像
この記事のみ ¥ 500

ログイン

この記事が参加している募集

#有料記事書いてみた

32,613件

この記事が気に入ったらチップで応援してみませんか？