Upgrade to Pro — share decks privately, control downloads, hide ads and more …

極！HTML5アウトライン

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Kazuki Shibata Kazuki Shibata
June 12, 2015
Design
2
4.3k

 極！HTML5アウトライン

2015/06/12 第9回HTML5MinutesのLT資料

Avatar for Kazuki Shibata

Kazuki Shibata

June 12, 2015
Tweet

More Decks by Kazuki Shibata

See All by Kazuki Shibata
microCMSでif文を作る
Avatar for Kazuki Shibata shibe97
1
1.3k
SvelteKitでJamstackを試す
Avatar for Kazuki Shibata shibe97
1
1.2k
フロントエンドのトレンド〜サーバーレスSPA、Jamstack〜
Avatar for Kazuki Shibata shibe97
16
4.9k
Jamstack × PWA におけるキャッシュ戦略
Avatar for Kazuki Shibata shibe97
3
1.3k
CSR / SSR / SSGの動向2020
Avatar for Kazuki Shibata shibe97
2
1.7k
Jamstack×microCMS 実装編
Avatar for Kazuki Shibata shibe97
4
1k
SentryでSPAのエラーログを収集する
Avatar for Kazuki Shibata shibe97
1
1.8k
useRefについて調べてみた
Avatar for Kazuki Shibata shibe97
1
190
フロントエンドエンジニアのキャリアパス
Avatar for Kazuki Shibata shibe97
9
4k

Other Decks in Design

See All in Design
TWCP#21 UXデザインと哲学のはなし
Avatar for MAMIYA Shinsuke shinn
0
310
「使いやすさ」だけでは、「勝てる」サービスにはならない。〜KPIとUXの分断を埋める、サービス戦略という「指針」〜
Avatar for 株式会社NIJIBOX nbkouhou
2
160
デザイナーとエンジニアで 同じ山に登ろう
Avatar for moco moco1013
0
170
Connpass-Xperia_Camera_App_by_HCD.pdf
Avatar for ソニー株式会社 sony
0
530
第18回サイゼミ
Avatar for LW lw
1
3.5k
コンテンツ作成者の体験を設計する
Avatar for Chiaki Okamoto chiilog
0
120
セブンデックス プロジェクト事例 / innovation Scenes
Avatar for セブンデックス sevendex
1
180
デザイナーがはばたく未来の入り口『hatch』が描く、新しいデザイナー育成のカタチ
Avatar for Goodpatch Inc. goodpatch
3
3.2k
Mandalyn_DT5001_FinalAssignment.pdf
Avatar for Mandalyn Teo lynteo
0
160
Drawing_for_Anim_Final_PDF.pdf
Avatar for Mandalyn Teo lynteo
2
110
絵や写真から学ぶ、要素がもたらす副作用
Avatar for keigo kspace
0
180
maki setoguchi
Avatar for Maki / Web Designer maki_setoguchi
0
710

Featured

See All Featured
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
Avatar for Katarina Dahlin katarinadahlin
PRO
1
3.5k
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
150
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
75
11k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
140
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
7.1k
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
1
320
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1.2k
AI: The stuff that nobody shows you
Avatar for John Nunemaker jnunemaker
PRO
3
360
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
1
1.3k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
60
42k
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
1
1.1k

Transcript

  1. ) 5 . - Ξ΢τϥΠϯ ࣲా࿨ف / @shibe97 2015/06/12 ୈ9ճ

    HTML5Minutes ۃ

  2. ࣲా ࿨ف
 @shibe97 σβΠφʔ / ϑϩϯτΤϯυΤϯδχΞ

  3. Ξ΢τϥΠϯͬͯԿʁ

  4. <body> <h1>HTML5</h1> <h2>Minutes</h2> <h2>triton-js</h2> </body> HTML Ξ΢τϥΠϯ 1. HTML5 1.1.Minutes

    1.2.triton-js

  5. ? <body> <h1>HTML5</h1> <h2>Minutes</h2> <section> <h2>triton-js</h2> <h1>ୈ9ճ</h1> </section> <h3>ຬһޚྱ</h3> </body>

  6. <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.ຬһޚྱ

  7. ࡾͭͷᎄ

  8. ໌ͱ҉ Ξ΢τϥΠϯͷᎄͦͷ̍

  9. <h1>҉໧తͳΞ΢τϥΠϯ</h1> <h2>ͦͷ̎</h2>

  10. <h1>҉໧తͳΞ΢τϥΠϯ</h1> Ξ΢τϥΠϯʢ҉ʣ ݟग़͠ཁૉ͸҉໧తʹΞ΢τϥΠϯΛ࡞Δ <h2>ͦͷ̎</h2>

  11. <h1>҉໧తͳΞ΢τϥΠϯ</h1> Ξ΢τϥΠϯʢ҉ʣ ݟग़͠ཁૉ͸҉໧తʹΞ΢τϥΠϯΛ࡞Δ <h2>ͦͷ̎</h2> Ξ΢τϥΠϯʢ҉ʣ

  12. <section> </section> <h1>໌ࣔతͳΞ΢τϥΠϯ</h1>

  13. <section> </section> Ξ΢τϥΠϯʢ໌ʣ <h1>໌ࣔతͳΞ΢τϥΠϯ</h1> section, article, bodyͳͲ͸ ໌ࣔతͳΞ΢τϥΠϯΛ࡞Δ

  14. ऑ೑ڧ৯ Ξ΢τϥΠϯͷᎄͦͷ̎

  15. <section> </section> Ξ΢τϥΠϯLv = ʁ

  16. <section> </section> <h2>ݟग़͠ొ৔</h2> Ξ΢τϥΠϯLv = h2 h2ΛٵऩʂυϠΝʂ

  17. <section> </section> <h2>ݟग़͠ొ৔</h2> Ξ΢τϥΠϯLv = h2 <h3>͞Βʹऑ͍ݟग़͠ొ৔</h3> Ξ΢τϥΠϯLv = h3

    h3ʁ֨Լ͕οʂ

  18. <section> </section> <h2>ݟग़͠ొ৔</h2> Ξ΢τϥΠϯLv = h2 <h1>͞Βʹڧ͍ݟग़͠ొ৔</h1> Ξ΢τϥΠϯLv = h1

    h1…ͩͱ…ʁ

  19. <section> </section> <h2>ݟग़͠ొ৔</h2> Ξ΢τϥΠϯLv = h2 <h1>͞Βʹڧ͍ݟग़͠ొ৔</h1> Ξ΢τϥΠϯLv = h1

    ԡ্͛͠Δ ͍͢·ͤΜͰͨ͠ Ͳ͚Ͳ͚͌ʂ

  20. ҋ͸ޫʹউͯͳ͍ Ξ΢τϥΠϯͷᎄͦͷ̏

  21. <h1>࠷ڧͷݟग़͠</h1> Ξ΢τϥΠϯLv = h1ʢ҉ʣ զ͸࠷ڧͷh1ͳΓ

  22. Ξ΢τϥΠϯLv = h1ʢ҉ʣ <section> </section> <h1>࠷ڧͷݟग़͠</h1> <h2>໌ࣔతͳΞ΢τϥΠϯ</h2> Ξ΢τϥΠϯLv = h2ʢ໌ʣ

    h1͞Μɺͪ͌ʔ͢ʂ

  23. Ξ΢τϥΠϯLv = h1ʢ҉ʣ <section> </section> <h1>࠷ڧͷݟग़͠</h1> <h2>໌ࣔతͳΞ΢τϥΠϯ</h2> Ξ΢τϥΠϯLv = h2ʢ໌ʣ

    ԡ্͛͠Δ ·ɺ·Ϳ͍͠οʂ ͋͟ʔͬ͢ʂ

  24. ࣮ફ

  25. ? <body> <h1>HTML5</h1> <h2>Minutes</h2> <section> <h2>triton-js</h2> <h1>ୈ9ճ</h1> </section> <h3>ຬһޚྱ</h3> </body>

  26. ? Ξ΢τϥΠϯLv = ? <body> <h1>HTML5</h1> <h2>Minutes</h2> <section> <h2>triton-js</h2> <h1>ୈ9ճ</h1>

    </section> <h3>ຬһޚྱ</h3> </body>

  27. ? Ξ΢τϥΠϯLv = h1 <body> <h1>HTML5</h1> <h2>Minutes</h2> <section> <h2>triton-js</h2> <h1>ୈ9ճ</h1>

    </section> <h3>ຬһޚྱ</h3> </body>

  28. ? Ξ΢τϥΠϯLv = h1 <body> <h1>HTML5</h1> <h2>Minutes</h2> <section> <h2>triton-js</h2> <h1>ୈ9ճ</h1>

    </section> <h3>ຬһޚྱ</h3> </body> Ξ΢τϥΠϯLv = h2

  29. ? Ξ΢τϥΠϯLv = h1 <body> <h1>HTML5</h1> <h2>Minutes</h2> <section> <h2>triton-js</h2> <h1>ୈ9ճ</h1>

    </section> <h3>ຬһޚྱ</h3> </body> Ξ΢τϥΠϯLv = h2 Ξ΢τϥΠϯLv = ?

  30. ? Ξ΢τϥΠϯLv = h1 <body> <h1>HTML5</h1> <h2>Minutes</h2> <section> <h2>triton-js</h2> <h1>ୈ9ճ</h1>

    </section> <h3>ຬһޚྱ</h3> </body> Ξ΢τϥΠϯLv = h2 Ξ΢τϥΠϯLv = ?

  31. ? Ξ΢τϥΠϯ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

  32. ? Ξ΢τϥΠϯ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

  33. ? Ξ΢τϥΠϯ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

  34. ? Ξ΢τϥΠϯ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

  35. Ξ΢τϥΠϯ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.ຬһޚྱ

  36. ศརͳπʔϧ • HTML 5 OutlinerʢWeb൛ʣ • https://gsnedders.html5.org/outliner/ • HTML 5

    Outlinerʢchrome֦ு൛ʣ • https://chrome.google.com/webstore/detail/html5-outliner/ afoibpobokebhgfnknfndkgemglggomo?hl=ja

  37. ΋͏গ͠ৄ͘͠஌Γ͍ͨਓ͸… http://be-shi.tumblr.com/post/121266132377/html5-6

  38. ͋Γ͕ͱ͏͍͟͝·ͨ͠ :) @shibe97