REVEAL.JSをちょっとだけ使ってみた

REVEAL.JS をちょっとだけ使ってみた REVEAL.JS をちょっとだけ使ってみた開発一部　坂元佑太 1

REVEAL.JS とは REVEAL.JS とは HTML でプレゼン資料を作れるフレームワークスライドのネストが可能 markdown でも記述可 PDF
出力も可スライドのテーマ多数 2

最小構成最小構成 <html> <head> <link rel="stylesheet" href="css/reveal.css"> <link rel="stylesheet" href="css/theme/white.css">
</head> <body> <div class="reveal"> <div class="slides"> <section>Slide 1</section> <section>Slide 2</section> </div> </div> <script src="js/reveal.js"></script> <script> Reveal.initialize(); </script> 3

最小構成最小構成スライドの内容はここを編集するだけ <div class="reveal"> <div class="slides"> <section>Slide 1</section> <section>Slide
2</section> </div> </div> 4

スライドのネスト？スライドのネスト？ <div class="reveal"> <div class="slides"> <section>Single Horizontal Slide</section> <section>
<section>Vertical Slide 1</section> <section>Vertical Slide 2</section> </section> </div> </div> 5

Single Horizontal Slide 6 . 1

Vertical Slide 1 6 . 2

Vertical Slide 2 6 . 3

MARKDOWN を使う MARKDOWN を使う <section data-markdown> <textarea data-template> ## Page
title A paragraph with some text and a [link](http://hakim.se). </textarea> </section> 7 . 1

MARKDOWN を使う MARKDOWN を使う slide の内容をexample.md に記述ページ区切りを--- で記述ページのネストを>>>
で記述 <section data-markdown="example.md" data-separator="---$" data-separator-vertical=">>>$"> </section> 7 . 2

テーマテーマ 8 . 1

テーマ名背景色文字色リンク black 黒白青デフォルト white
白黒青 league グレー白青 beige ベージュダーク茶色 sky 青薄ダーク青 night 黒白橙 serif 茶グレー茶 simple 白黒青 solarized クリーム濃緑青 8 . 2

参考文献参考文献 https://github.com/hakimel/reveal.js/ https://qiita.com/ryurock/items/9c6de36b9d6a716e7992 9

REVEAL.JSをちょっとだけ使ってみた

REVEAL.JSをちょっとだけ使ってみた

S-cubism

More Decks by S-cubism

Other Decks in Technology

Featured

Transcript