Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
REVEAL.JSをちょっとだけ使ってみた
Search
S-cubism
January 19, 2018
Technology
0
260
REVEAL.JSをちょっとだけ使ってみた
S-cubism
January 19, 2018
Tweet
Share
More Decks by S-cubism
See All by S-cubism
WSLでreactの開発環境作った話
scubism
0
670
未経験者がAndroidアプリをリリースするまで
scubism
0
120
scubism_LT_20180223_細田謙二_イベントソーシング
scubism
0
150
忙しい人のための仮想通貨
scubism
0
100
サーバ作業の注意コマンド
scubism
0
120
最近勉強してること、次にやりたいこと
scubism
0
110
FOOD TECH
scubism
0
66
Firebase(Realtime Database)について
scubism
0
130
複数会社複数リポジトリでのソース管理
scubism
0
100
Other Decks in Technology
See All in Technology
解析の定理証明実践@Lean 4
dec9ue
0
180
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
26k
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
bengo4com
1
3.1k
Welcome to the LLM Club
koic
0
190
Oracle Audit Vault and Database Firewall 20 概要
oracle4engineer
PRO
3
1.7k
PHP開発者のためのSOLID原則再入門 #phpcon / PHP Conference Japan 2025
shogogg
4
840
How Community Opened Global Doors
hiroramos4
PRO
1
120
Clineを含めたAIエージェントを 大規模組織に導入し、投資対効果を考える / Introducing AI agents into your organization
i35_267
4
1.6k
mrubyと micro-ROSが繋ぐロボットの世界
kishima
2
320
データプラットフォーム技術におけるメダリオンアーキテクチャという考え方/DataPlatformWithMedallionArchitecture
smdmts
5
640
登壇ネタの見つけ方 / How to find talk topics
pinkumohikan
5
510
生成AIでwebアプリケーションを作ってみた
tajimon
2
150
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Fireside Chat
paigeccino
37
3.5k
The Cult of Friendly URLs
andyhume
79
6.5k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
A Tale of Four Properties
chriscoyier
160
23k
Statistics for Hackers
jakevdp
799
220k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Transcript
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