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
910
SentryでSPAのエラーログを収集する
shibe97
1
1.7k
useRefについて調べてみた
shibe97
1
140
フロントエンドエンジニアのキャリアパス
shibe97
9
3.7k
Other Decks in Design
See All in Design
コンセプトで経営・事業・組織を動かす、 Ameba20周年ブランディング / ameba-20th-branding
cyberagentdevelopers
PRO
1
580
ネーミングの極意 - その名は体を現していますか? -
kakukoki
2
480
デザイナーのマネジメント職、 身構えずにやっていこう
fumink7
0
800
「ちょっといいUI」を目指す努力 / Striving for Little Big Details
usagimaru
6
4.1k
Figma Code Connect を使ってエンジニアの新しい体験をデリバリする
junkifurukawa
0
650
Social Anxiety
ksmith2024
0
110
Masked shaman-Storyboard 2025
ashley0521
0
190
Museum Heist
allykae
0
140
ENEOS社事例|アプリ事業を加速させるデザイナーの取り組み / dx-eneos-design
cyberagentdevelopers
PRO
1
900
急成長中のWINTICKETにおける ちいさくはじめるライティング改善 / winticket-writing
cyberagentdevelopers
PRO
1
290
LayerX DesignersDeck
layerx
PRO
0
2.7k
政策広報実践講座_講演資料ダイジェスト2
capitolthink
0
130
Featured
See All Featured
Writing Fast Ruby
sferik
628
61k
Mobile First: as difficult as doing things right
swwweet
223
9.4k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
A designer walks into a library…
pauljervisheath
205
24k
GraphQLとの向き合い方2022年版
quramy
44
14k
Making Projects Easy
brettharned
116
6k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Building a Scalable Design System with Sketch
lauravandoore
461
33k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
A better future with KSS
kneath
238
17k
Building Your Own Lightsaber
phodgson
104
6.2k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
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