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
230
REVEAL.JSをちょっとだけ使ってみた
S-cubism
January 19, 2018
Tweet
Share
More Decks by S-cubism
See All by S-cubism
WSLでreactの開発環境作った話
scubism
0
600
未経験者がAndroidアプリをリリースするまで
scubism
0
84
scubism_LT_20180223_細田謙二_イベントソーシング
scubism
0
130
忙しい人のための仮想通貨
scubism
0
81
サーバ作業の注意コマンド
scubism
0
91
最近勉強してること、次にやりたいこと
scubism
0
82
FOOD TECH
scubism
0
45
Firebase(Realtime Database)について
scubism
0
97
複数会社複数リポジトリでのソース管理
scubism
0
80
Other Decks in Technology
See All in Technology
10分でわかるfreeeのQA
freee
0
260
オブジェクト指向CSSが叶えたかったことと、CSSのいま / The aims of Object-oriented CSS and the current state of CSS usage
shinkufencer
11
3.7k
Why do you get AWS certificates
hirosys
0
120
データマネジメントを支える武器としてのメタデータ管理
10xinc
2
1k
バッチ処理のSLOをどう設計するか
rynsuke
7
590
Castor - Symfony Live 2024 - Paris
lyrixx
1
120
依存ライブラリはどこに?
takesection
0
120
今さら聞けない!? AWSの生成AIサービス Amazon Bedrock入門!
minorun365
PRO
11
2.7k
期待しすぎずに取り組む両面 TypeScript
shozawa
4
580
中央集権体制からDataOpsへの転換 / centralized-to-dataops-transformation
pei0804
7
1.6k
KubeCon EU: Unlocking new Platform Experiences with Open Interfaces
salaboy
1
380
Azureコストは水道代/The_47th_Tokyo_Jazug
aeonpeople
3
390
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
The Cost Of JavaScript in 2023
addyosmani
13
3.7k
Being A Developer After 40
akosma
56
580k
GraphQLの誤解/rethinking-graphql
sonatard
48
9.1k
Rebuilding a faster, lazier Slack
samanthasiow
72
8.2k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
5
1.4k
Ruby is Unlike a Banana
tanoku
95
10k
Large-scale JavaScript Application Architecture
addyosmani
501
110k
A Modern Web Designer's Workflow
chriscoyier
689
190k
How To Stay Up To Date on Web Technology
chriscoyier
781
250k
Creatively Recalculating Your Daily Design Routine
revolveconf
209
11k
Infographics Made Easy
chrislema
237
18k
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