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

極！HTML5アウトライン

Kazuki Shibata
June 12, 2015
Design
2
4.3k

 極！HTML5アウトライン

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

Kazuki Shibata

June 12, 2015
Tweet

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.5k
Jamstack×microCMS 実装編
shibe97
4
900
SentryでSPAのエラーログを収集する
shibe97
1
1.6k
useRefについて調べてみた
shibe97
1
140
フロントエンドエンジニアのキャリアパス
shibe97
9
3.7k

Other Decks in Design

See All in Design
AIネイティブな時代におけるUXデザインの在り方とは
kuni29
0
1.1k
デザイナーのマネジメント職、 身構えずにやっていこう
fumink7
0
690
若手デザイナーチームが手がける CADC2024クリエイティブディレクションの全貌 / opening-design
cyberagentdevelopers
PRO
1
1.3k
デザイナー視点の体験設計とデザインレビューを事業部全員で体験するワークショップをしたお話
masayofff
3
220
Dive Deep into Communication
yomtsu
0
180
(第１回) アーキテクト・テックリード育成講座
masakaya
0
130
Design Your Own App Using Figma by Medha Muppala
gdgmontreal
0
1.5k
Arborea Art Book
thebogheart
1
320
みんなに知って欲しい 視覚過敏のアクセシビリティ
0opacity_
5
1.7k
Goodpatch Tour💙 / We are hiring!
goodpatch
31
780k
Findy - デザイナー向け会社紹介 / Hiring Findy's Designers
findyinc
6
61k
LLMによるRAG評価用合成テストデータの生成
licux
5
480

Featured

See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
28
8.3k
Testing 201, or: Great Expectations
jmmastey
41
7.2k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
240
Being A Developer After 40
akosma
89
590k
The Invisible Side of Design
smashingmag
299
50k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Facilitating Awesome Meetings
lara
51
6.2k
We Have a Design System, Now What?
morganepeng
51
7.3k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.9k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.1k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
3
180
Building Applications with DynamoDB
mza
93
6.2k

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