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
極!HTML5アウトライン
Search
Kazuki Shibata
June 12, 2015
Design
4.3k
2
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
極!HTML5アウトライン
2015/06/12 第9回HTML5MinutesのLT資料
Kazuki Shibata
June 12, 2015
More Decks by Kazuki Shibata
See All by Kazuki Shibata
microCMSでif文を作る
shibe97
1
1.3k
SvelteKitでJamstackを試す
shibe97
1
1.3k
フロントエンドのトレンド〜サーバーレスSPA、Jamstack〜
shibe97
16
5k
Jamstack × PWA におけるキャッシュ戦略
shibe97
3
1.3k
CSR / SSR / SSGの動向2020
shibe97
2
1.8k
Jamstack×microCMS 実装編
shibe97
4
1.1k
SentryでSPAのエラーログを収集する
shibe97
1
1.8k
useRefについて調べてみた
shibe97
1
230
フロントエンドエンジニアのキャリアパス
shibe97
9
4k
Other Decks in Design
See All in Design
AI時代、デザイナーの価値はどこに?
tararira
2
1.7k
Техники структурирования беседы с собой, заказчиком и командо
ashapiro
0
200
AIスライド生成を進化させるMDファイル
kenichiota0711
1
1.4k
設計と制作 意図を形に表す / Design and Making: Intent Made Form
usagimaru
3
2k
CULTURE DECK/Creative Director
mhand01
0
1.3k
組織で働く大人が「知らないままにやってみる」を取り戻す方法とその意味〜企業で働く実務家による実践知の言語化を事例とした考察〜
chiemitaki
1
230
デザインコンテキストのバトンをつなぐ—AI時代のプロダクトマネジメント
kumanoayumi
6
1.2k
「ツール」から「パートナー」へ。AI伴走時代のUXデザインとは?~操作を減らし、成果を最大にするための設計~
ncdc
1
700
つくり方を変えていく | change-how-we-build
mottox2
2
1.4k
Connpass-Xperia_Camera_App_by_HCD.pdf
sony
1
700
広い関与の可能性に どう向き合うのか? 私たちは。|Timee MarketingDesign 2026-06-18
bebe
0
270
Understanding Branding
ranyfardiany
0
240
Featured
See All Featured
Navigating Team Friction
lara
192
16k
We Have a Design System, Now What?
morganepeng
55
8.2k
Site-Speed That Sticks
csswizardry
13
1.3k
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
chikuwait
0
650
16th Malabo Montpellier Forum Presentation
akademiya2063
PRO
0
250
[RailsConf 2023] Rails as a piece of cake
palkan
59
6.8k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
12
1.2k
Music & Morning Musume
bryan
47
7.3k
Java REST API Framework Comparison - PWX 2021
mraible
34
9.5k
Agile Leadership in an Agile Organization
kimpetersen
PRO
0
190
YesSQL, Process and Tooling at Scale
rocio
174
15k
Neural Spatial Audio Processing for Sound Field Analysis and Control
skoyamalab
0
370
Transcript
) 5 . - ΞτϥΠϯ ࣲాف / @shibe97 2015/06/12 ୈ9ճ
HTML5Minutes ۃ
ࣲా ف @shibe97 σβΠφʔ / ϑϩϯτΤϯυΤϯδχΞ
ΞτϥΠϯͬͯԿʁ
<body> <h1>HTML5</h1> <h2>Minutes</h2> <h2>triton-js</h2> </body> HTML ΞτϥΠϯ 1. HTML5 1.1.Minutes
1.2.triton-js
? <body> <h1>HTML5</h1> <h2>Minutes</h2> <section> <h2>triton-js</h2> <h1>ୈ9ճ</h1> </section> <h3>ຬһޚྱ</h3> </body>
<body> <h1>HTML5</h1> <h2>Minutes</h2> <section> <h2>triton-js</h2> <h1>ୈ9ճ</h1> </section> <h3>ຬһޚྱ</h3> </body> 1.
HTML5 1.1.Minutes 1.2.triton-js 1.3.ୈ9ճ 1.4.ຬһޚྱ
ࡾͭͷᎄ
໌ͱ҉ ΞτϥΠϯͷᎄͦͷ̍
<h1>҉తͳΞτϥΠϯ</h1> <h2>ͦͷ̎</h2>
<h1>҉తͳΞτϥΠϯ</h1> ΞτϥΠϯʢ҉ʣ ݟग़͠ཁૉ҉తʹΞτϥΠϯΛ࡞Δ <h2>ͦͷ̎</h2>
<h1>҉తͳΞτϥΠϯ</h1> ΞτϥΠϯʢ҉ʣ ݟग़͠ཁૉ҉తʹΞτϥΠϯΛ࡞Δ <h2>ͦͷ̎</h2> ΞτϥΠϯʢ҉ʣ
<section> </section> <h1>໌ࣔతͳΞτϥΠϯ</h1>
<section> </section> ΞτϥΠϯʢ໌ʣ <h1>໌ࣔతͳΞτϥΠϯ</h1> section, article, bodyͳͲ ໌ࣔతͳΞτϥΠϯΛ࡞Δ
ऑڧ৯ ΞτϥΠϯͷᎄͦͷ̎
<section> </section> ΞτϥΠϯLv = ʁ
<section> </section> <h2>ݟग़͠ొ</h2> ΞτϥΠϯLv = h2 h2ΛٵऩʂυϠΝʂ
<section> </section> <h2>ݟग़͠ొ</h2> ΞτϥΠϯLv = h2 <h3>͞Βʹऑ͍ݟग़͠ొ</h3> ΞτϥΠϯLv = h3
h3ʁ֨Լ͕οʂ
<section> </section> <h2>ݟग़͠ొ</h2> ΞτϥΠϯLv = h2 <h1>͞Βʹڧ͍ݟग़͠ొ</h1> ΞτϥΠϯLv = h1
h1…ͩͱ…ʁ
<section> </section> <h2>ݟग़͠ొ</h2> ΞτϥΠϯLv = h2 <h1>͞Βʹڧ͍ݟग़͠ొ</h1> ΞτϥΠϯLv = h1
ԡ্͛͠Δ ͍͢·ͤΜͰͨ͠ Ͳ͚Ͳ͚͌ʂ
ҋޫʹউͯͳ͍ ΞτϥΠϯͷᎄͦͷ̏
<h1>࠷ڧͷݟग़͠</h1> ΞτϥΠϯLv = h1ʢ҉ʣ զ࠷ڧͷh1ͳΓ
ΞτϥΠϯLv = h1ʢ҉ʣ <section> </section> <h1>࠷ڧͷݟग़͠</h1> <h2>໌ࣔతͳΞτϥΠϯ</h2> ΞτϥΠϯLv = h2ʢ໌ʣ
h1͞Μɺͪ͌ʔ͢ʂ
ΞτϥΠϯLv = h1ʢ҉ʣ <section> </section> <h1>࠷ڧͷݟग़͠</h1> <h2>໌ࣔతͳΞτϥΠϯ</h2> ΞτϥΠϯLv = h2ʢ໌ʣ
ԡ্͛͠Δ ·ɺ·Ϳ͍͠οʂ ͋͟ʔͬ͢ʂ
࣮ફ
? <body> <h1>HTML5</h1> <h2>Minutes</h2> <section> <h2>triton-js</h2> <h1>ୈ9ճ</h1> </section> <h3>ຬһޚྱ</h3> </body>
? ΞτϥΠϯLv = ? <body> <h1>HTML5</h1> <h2>Minutes</h2> <section> <h2>triton-js</h2> <h1>ୈ9ճ</h1>
</section> <h3>ຬһޚྱ</h3> </body>
? ΞτϥΠϯLv = h1 <body> <h1>HTML5</h1> <h2>Minutes</h2> <section> <h2>triton-js</h2> <h1>ୈ9ճ</h1>
</section> <h3>ຬһޚྱ</h3> </body>
? ΞτϥΠϯLv = h1 <body> <h1>HTML5</h1> <h2>Minutes</h2> <section> <h2>triton-js</h2> <h1>ୈ9ճ</h1>
</section> <h3>ຬһޚྱ</h3> </body> ΞτϥΠϯLv = h2
? ΞτϥΠϯLv = h1 <body> <h1>HTML5</h1> <h2>Minutes</h2> <section> <h2>triton-js</h2> <h1>ୈ9ճ</h1>
</section> <h3>ຬһޚྱ</h3> </body> ΞτϥΠϯLv = h2 ΞτϥΠϯLv = ?
? ΞτϥΠϯLv = h1 <body> <h1>HTML5</h1> <h2>Minutes</h2> <section> <h2>triton-js</h2> <h1>ୈ9ճ</h1>
</section> <h3>ຬһޚྱ</h3> </body> ΞτϥΠϯLv = h2 ΞτϥΠϯLv = ?
? ΞτϥΠϯLv = h1 <body> <h1>HTML5</h1> <h2>Minutes</h2> <section> <h2>triton-js</h2> <h1>ୈ9ճ</h1>
</section> <h3>ຬһޚྱ</h3> </body> ΞτϥΠϯLv = h2 ΞτϥΠϯLv = h2
? ΞτϥΠϯLv = h1 <body> <h1>HTML5</h1> <h2>Minutes</h2> <section> <h2>triton-js</h2> <h1>ୈ9ճ</h1>
</section> <h3>ຬһޚྱ</h3> </body> ΞτϥΠϯLv = h2 ΞτϥΠϯLv = h2 ΞτϥΠϯLv = h1
? ΞτϥΠϯLv = h1 <body> <h1>HTML5</h1> <h2>Minutes</h2> <section> <h2>triton-js</h2> <h1>ୈ9ճ</h1>
</section> <h3>ຬһޚྱ</h3> </body> ΞτϥΠϯLv = h2 ΞτϥΠϯLv = h2 ΞτϥΠϯLv = h1
? ΞτϥΠϯLv = h1 <body> <h1>HTML5</h1> <h2>Minutes</h2> <section> <h2>triton-js</h2> <h1>ୈ9ճ</h1>
</section> <h3>ຬһޚྱ</h3> </body> ΞτϥΠϯLv = h2 ΞτϥΠϯLv = h2 ΞτϥΠϯLv = h1 ΞτϥΠϯLv = h3
ΞτϥΠϯLv = h1 <body> <h1>HTML5</h1> <h2>Minutes</h2> <section> <h2>triton-js</h2> <h1>ୈ9ճ</h1> </section>
<h3>ຬһޚྱ</h3> </body> ΞτϥΠϯLv = h2 ΞτϥΠϯLv = h2 ΞτϥΠϯLv = h1 ΞτϥΠϯLv = h3 1. HTML5 1.1.Minutes 1.2.triton-js 1.3.ୈ9ճ 1.4.ຬһޚྱ
ศརͳπʔϧ • HTML 5 OutlinerʢWeb൛ʣ • https://gsnedders.html5.org/outliner/ • HTML 5
Outlinerʢchrome֦ு൛ʣ • https://chrome.google.com/webstore/detail/html5-outliner/ afoibpobokebhgfnknfndkgemglggomo?hl=ja
͏গ͠ৄ͘͠Γ͍ͨਓ… http://be-shi.tumblr.com/post/121266132377/html5-6
͋Γ͕ͱ͏͍͟͝·ͨ͠ :) @shibe97