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

きっかけ

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

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

完成形

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

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

See the Pen スライドショー自家製フォント工房 by haruto tanabe (@h2tanabe) on CodePen.

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

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

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

HTMLで書いてみた

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

パス：
webslides-latest\static

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

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

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

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

こころ明朝 Kokoroバージョン

See the Pen スライドショーこころ明朝 Kokoro by haruto tanabe (@h2tanabe) on CodePen.

ニコモジバージョン

(漢字未対応の文字）

See the Pen スライドショーにこ文字 by haruto tanabe (@h2tanabe) on CodePen.