パワポがなければHTMLで書けばいいじゃない

## きっかけ
最近MS製品から卒業したいなと思いパワポと同じようなスライドショーのできる
HTMLテンプレートを発見したのでそのときの使い方メモ。

**2018/3/16 修正**：完成のイメージをCodePenに変更。

## 完成形
上下キー（スマホなら右にスライド）でスクロールできるHTMLのスライドショー。

* 1ページ目 : 表紙
* 2ページ目 : アジェンダ
* 3ページ目 : スライド

<p data-height="500" data-theme-id="0" data-slug-hash="jzrjVG" data-default-tab="html,result" data-user="h2tanabe" data-embed-version="2" data-pen-title="スライドショー 自家製フォント工房" class="codepen">See the Pen <a href="https://codepen.io/h2tanabe/pen/jzrjVG/">スライドショー 自家製フォント工房</a> by haruto tanabe (<a href="https://codepen.io/h2tanabe">@h2tanabe</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## HTMLテンプレートをダウンロード

WebSlides
https://github.com/webslides/WebSlides

上のリンクからダウンロード（MITライセンスなので自由に使えます）

![R1.png](https://qiita-image-store.s3.amazonaws.com/0/230829/26cc67a1-7fc4-11a2-8dfa-355f11a556f2.png)

## HTMLで書いてみた

CSSとJSのパスを通せば動くので、解凍した以下のフォルダにHTMLファイル作成。
**sectionタグ**ごとにページができる。
あとはHTMLをブラウザで開くだけ。上下キーでスクロールできます。

パス：
`webslides-latest\static`

```html:index.html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <!--Googleフォント-->
    <link href="https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css" rel="stylesheet" />
    <link rel="stylesheet" type='text/css' media='all' href="./css/webslides.css"/>
    <link rel="stylesheet" type='text/css' media='all' href="./css/svg-icons.css"/>
  </head>
  <body class="wf-roundedmplus1c">
    <article id="webslides">
      <!-- スライド１ start -->
        <section>
          <div class="aligncenter fadeInUp">
            <h1>表紙</h1>
            <p>パワポがないならHTMLで書けばいいじゃない</p>
          </div>
          <footer>
            <div class="wrap">
              <p>
                <span class="alignright">
                    著者名
                </span>
              </p>
            </div>
          </footer>
        </section>
      <!-- スライド１ end -->
      <!-- スライド２ start -->
        <section>
          <div class="wrap size-50">
          <h3>アジェンダ</h3>
          <hr>
            <div class="toc">
              <ol>
                <li>
                  <a href="#" title="Go to Learning to see">
                  <span class="chapter">概要</span>
                  <span class="toc-page">1</span>
                  </a>
                </li>
                <li>
                  <a href="#" title="Go to What is Beauty?"><span class="chapter">詳細</span>
                  <span class="toc-page">2</span></a>
                  <ol>
                    <li><span class="chapter">2011年-2013年の詳細</span><span class="toc-page">3</span></li>
                    <li><span class="chapter">2014年-2016年の詳細</span><span class="toc-page">4</span></li>
                  </ol>
                </li>
              </ol>
            </div>
          </div>
        </section>
      <!-- スライド２ end -->
      <!-- スライド３ start -->
        <section>
          <div class="wrap size-50">
            <h3>
              <svg class="fa-heart-o">
                <use xlink:href="#fa-heart-o"></use>
              </svg>
              ここがパワポよりGood
            </h3>
            <hr>
            <ul class="description">
              <li><span class="text-label">No１</span>オフィス買わなくて良い。どこでも動くHTML。メモ帳でかける</li>
              <li><span class="text-label">No２</span>テンプレートが豊富（120個位）</li>
              <li><span class="text-label">No３</span>HTMLさえかければよいから学習コスト低い</li>
              <li><span class="text-label">No４</span>位置の微調整いらない</li>
            </ul>
          </div>
        </section>
    <!-- スライド３ end -->
    <!-- Required -->
    <script src="./js/webslides.js"></script>
    <script>
      window.ws = new WebSlides();
    </script>
    <!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
    <script defer src="./js/svg-icons.js"></script>
  </body>
</html>
```

## 困ったらのテンプレート

解凍した中にあるcomponents.html（120ページ）が参考になる！

パス：
`webslides-latest\demos`

![R2.png](https://qiita-image-store.s3.amazonaws.com/0/230829/19fbf848-d945-2acd-ecac-3e2d28f467aa.png)

## ひと工夫：スライドのフォントを変えてみる。

Googleフォントを使用。リンクタグに好きなGoogleフォントを指定することで、簡単にフォントを変えることが出来る。一部のフォントは漢字にも対応しており、種類もまあまあ豊富。linkタグにCSSを追加する。

↓　Googleフォント
https://googlefonts.github.io/japanese/

### こころ明朝 Kokoroバージョン
<p data-height="500" data-theme-id="0" data-slug-hash="EEyBRJ" data-default-tab="css,result" data-user="h2tanabe" data-embed-version="2" data-pen-title="スライドショー こころ明朝 Kokoro" class="codepen">See the Pen <a href="https://codepen.io/h2tanabe/pen/EEyBRJ/">スライドショー こころ明朝 Kokoro</a> by haruto tanabe (<a href="https://codepen.io/h2tanabe">@h2tanabe</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


### ニコモジバージョン
(漢字未対応の文字）
<p data-height="500" data-theme-id="0" data-slug-hash="YaWojw" data-default-tab="css,result" data-user="h2tanabe" data-embed-version="2" data-pen-title="スライドショー にこ文字" class="codepen">See the Pen <a href="https://codepen.io/h2tanabe/pen/YaWojw/">スライドショー にこ文字</a> by haruto tanabe (<a href="https://codepen.io/h2tanabe">@h2tanabe</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>