Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
極!HTML5アウトライン
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
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.4k
CSR / SSR / SSGの動向2020
shibe97
2
1.8k
Jamstack×microCMS 実装編
shibe97
4
1.1k
SentryでSPAのエラーログを収集する
shibe97
1
1.8k
useRefについて調べてみた
shibe97
1
240
フロントエンドエンジニアのキャリアパス
shibe97
9
4.1k
Other Decks in Design
See All in Design
Design_Harness_and_Loop.pdf
nagatsu
0
100
noteらしさを織り込むハーネスエンジニアリング
uto
0
1.6k
AVI 2026 Keynote "Vision-Driven Design"
ishii_mit
0
160
富山デザイン勉強会_デザイン思考.pdf
keita_yoshikawa
3
190
広い関与の可能性に どう向き合うのか? 私たちは。|Timee MarketingDesign 2026-06-18
bebe
0
1k
LP制作のための熱量ハーネス -人の熱量を、AIとの制作につなぐ-
niccy
0
1.3k
個人理念(自分の言葉)の言語化ワークショップ
kakukoki
1
300
東京都市大学 都市生活学部×一般社団法人オープン企画イベント 「誰もがデザイナーである」とはどういうことか? 【エツィオ・マンズィーニ氏 特別来日・基調講演】
a2k
1
120
設計の進め方と 品質特性品質特性
harakeishi
0
1.3k
20260422_Midosuji_Tech
takuyay0ne
2
120
再設計される業務 - AIにより再設計される "デザインワークフロー" / AI Ops Lab #2 Redesigned orkflows
kgsi
0
930
デザインワークフローの最前線。 ログラスでのAI活用の現在地
ukaoli
1
3.1k
Featured
See All Featured
Designing Powerful Visuals for Engaging Learning
tmiket
1
570
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
50
10k
Groundhog Day: Seeking Process in Gaming for Health
codingconduct
0
360
Why Our Code Smells
bkeepers
PRO
340
58k
Discover your Explorer Soul
emna__ayadi
2
1.3k
Documentation Writing (for coders)
carmenintech
77
5.5k
Leveraging Curiosity to Care for An Aging Population
cassininazir
1
500
Side Projects
sachag
456
43k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
uxyall
1
3k
Music & Morning Musume
bryan
48
7.4k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Mozcon NYC 2025: Stop Losing SEO Traffic
samtorres
1
550
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