Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

S-cubism
January 19, 2018

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

S-cubism

January 19, 2018
Tweet

More Decks by S-cubism

Other Decks in Technology

Transcript

  1. 最小構成 最小構成 <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
  2. スライドのネスト? スライドのネスト? <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
  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
  4. MARKDOWN を使う MARKDOWN を使う slide の内容をexample.md に記述 ページ区切りを--- で記述 ページのネストを>>>

    で記述 <section data-markdown="example.md" data-separator="---$" data-separator-vertical=">>>$"> </section> 7 . 2
  5. テーマ名 背景色 文字色 リンク black 黒 白 青 デフォルト white

    白 黒 青 league グレー 白 青 beige ベージュ ダーク 茶色 sky 青 薄ダーク 青 night 黒 白 橙 serif 茶 グレー 茶 simple 白 黒 青 solarized クリーム 濃緑 青 8 . 2