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
1k
SvelteKitでJamstackを試す
shibe97
1
1.1k
フロントエンドのトレンド〜サーバーレスSPA、Jamstack〜
shibe97
16
4.8k
Jamstack × PWA におけるキャッシュ戦略
shibe97
3
1.1k
CSR / SSR / SSGの動向2020
shibe97
2
1.5k
Jamstack×microCMS 実装編
shibe97
4
870
SentryでSPAのエラーログを収集する
shibe97
1
1.6k
useRefについて調べてみた
shibe97
1
140
フロントエンドエンジニアのキャリアパス
shibe97
9
3.7k

Other Decks in Design

See All in Design
世界中のチームワークを どうデザインしているのか
ka3zu1ma10
0
210
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
14
6.1k
Credence
lratmansunu
0
460
SaaSのマーケティングを進めるサービスサイトを育てる取り組み / Designship 2024 Main Stage
sms_tech
1
1.2k
ふわっとはじめるSSOT – SSOT for Communication Design
sekiguchiy
0
1.1k
デザインレビューをできていなかったコムデチームが、 自分たちが続けられるレビューの仕組みをつくった話
tanasho
0
890
Осязаемый потребительский опыт. Ловим его за хвост с Картой процесса-опыта
ashapiro
2
220
デザイナー視点の体験設計とデザインレビューを事業部全員で体験するワークショップをしたお話
masayofff
3
200
なぜデフォルトが青色！？ Tint Colorの理由に迫る
akidon0000
0
460
Lightning Talk: Beautiful Slides for Beginners
inesmontani
PRO
1
150
ENEOS社事例｜アプリ事業を加速させるデザイナーの取り組み / dx-eneos-design
cyberagentdevelopers
PRO
1
270
Managing Design Systems (Antwerp 2024)
nathanacurtis
1
300

Featured

See All Featured
Testing 201, or: Great Expectations
jmmastey
38
7.1k
Being A Developer After 40
akosma
86
590k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
We Have a Design System, Now What?
morganepeng
50
7.2k
Faster Mobile Websites
deanohume
305
30k
Into the Great Unknown - MozCon
thekraken
32
1.5k
What's in a price? How to price your products and services
michaelherold
243
12k
Code Review Best Practice
trishagee
64
17k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k
Practical Orchestrator
shlominoach
186
10k
A Modern Web Designer's Workflow
chriscoyier
693
190k

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