HTMLでプレゼンテーションを作る
LTで登壇することになったけどネタがない。。。(本番前日)
HTMLでプレゼン作れると聞いたのですぐさまテンプレ探しへ。
検索かけて出てきたのテンプレートが
・reveal.js
→GitHub,デモ画面
・jmpress.js
→GitHub,デモ画面
一番簡単そうに見えたreveal.jsを使って編集してみることに決めました。
作っててデモ画面が面白くて作ってるだけで楽しめました笑。
内容
簡単にHTML,CSSを紹介した後、google chromeでDeveloper Toolを用いてCSSを編集する方法を紹介するという構成に決定(本番20時間前)。
ASCⅡ.jpさんの記事を参考に開発ツールのページから直接編集する方法を写真も交えて解説
やっぱりcssはちゃんとエディタで修正する方がいいなと思いつつも紹介することにしました笑。
プレゼンの作り方
HTMLで<section>タグで囲まれた内容が1ページ分のスライドになるらしく、<section>タグの中で<section>タグを書くとスライドのスライドが上下にアニメーションするようになります。(説明難しいです汗)
こんな感じで沢山機能があるのですが、デモ画面を見ながら各タグ、クラスの意味を理解していけば簡単に作れると思います。
デモ画面のスクリプトはそれぞれの画面で使われてる機能の説明してるので(全部英語ですがいい勉強になりますね笑)
gifとかも入れられるのかと感動しつつ17枚のスライドを3時間~4時間ほどで作り終えることができました~(本番前日午後23時半)
完成したプレゼンテーションのGitHubはこちら
参考URL
だいぶ雑な説明になりましたが、他にもいろいろテンプレートがあるようなので興味あったら見てみると楽しいと思います!
HTMLプレゼンテーション 参考URL
・なんかかっこいいプレゼンテーションテンプレートを探しているならreveal.js使ってみろって
・JavaScript/HTML5でプレゼン用スライドをつくる方法まとめ