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
2
4.3k
極!HTML5アウトライン
2015/06/12 第9回HTML5MinutesのLT資料
Kazuki Shibata
June 12, 2015
Tweet
Share
More Decks by Kazuki Shibata
See All by Kazuki Shibata
microCMSでif文を作る
shibe97
1
1.1k
SvelteKitでJamstackを試す
shibe97
1
1.1k
フロントエンドのトレンド〜サーバーレスSPA、Jamstack〜
shibe97
16
4.8k
Jamstack × PWA におけるキャッシュ戦略
shibe97
3
1.2k
CSR / SSR / SSGの動向2020
shibe97
2
1.6k
Jamstack×microCMS 実装編
shibe97
4
920
SentryでSPAのエラーログを収集する
shibe97
1
1.7k
useRefについて調べてみた
shibe97
1
150
フロントエンドエンジニアのキャリアパス
shibe97
9
3.8k
Other Decks in Design
See All in Design
Goodpatch Tour💙 / We are hiring!
goodpatch
31
810k
誰もがAIエージェントを"操作"したがる〜AIエージェントに求められるUX〜
ikeyatsu
2
1.4k
マンガで分かるサービスデザインガイドライン
senryakuka
1
720
20250129_DAST28_実空間にデジタル資源の接点をデザインする
majimasachi
0
280
The Golden Whitney
ohtristanart
PRO
0
200
【デザイン初め新年会2025|01.08】事業貢献するデザイン組織の挑戦 - 2025年、課題解決をリードする。
payatsusan213
0
11k
20241204_UI/UXデザイナーLT会 - vol.10_DMM
motokoishida
0
330
OLTA株式会社/デザイン紹介資料
taxy
0
200
【pmconf2024】ユーザーになりきる「コスプレUX」で リサーチ解像度を上げる
kamechi7222222
1
8.9k
AIネイティブな時代におけるUXデザインの在り方とは
kuni29
0
1.3k
【Adobe MAX Japan 2025】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
7
5k
無自覚なランクとその影響を紐解くワークショップ / Unpacking Unconscious Privilege Workshop
spring_aki
3
160
Featured
See All Featured
Docker and Python
trallard
44
3.3k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Six Lessons from altMBA
skipperchong
27
3.7k
Typedesign – Prime Four
hannesfritz
41
2.6k
Making the Leap to Tech Lead
cromwellryan
133
9.2k
Documentation Writing (for coders)
carmenintech
69
4.7k
Building Adaptive Systems
keathley
41
2.5k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
BBQ
matthewcrist
88
9.5k
Into the Great Unknown - MozCon
thekraken
36
1.7k
Optimising Largest Contentful Paint
csswizardry
35
3.2k
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