Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

極！HTML5アウトライン

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.2k
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
990
SentryでSPAのエラーログを収集する
Avatar for Kazuki Shibata shibe97
1
1.8k
useRefについて調べてみた
Avatar for Kazuki Shibata shibe97
1
180
フロントエンドエンジニアのキャリアパス
Avatar for Kazuki Shibata shibe97
9
3.9k

Other Decks in Design

See All in Design
企業にデザインが融けたとき、デザイナーにできること。事業会社12年間の探究と葛藤 / Designship2025
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
0
1.2k
Vibe Coding デザインシステム
Avatar for poteboy poteboy
3
1.5k
「稼ぐ」だけでなく 「還す」ためのデザイン / Designship2025
Avatar for インクルーシブデザインスタジオCULUMU culumu
1
520
デザイナーがAIを使い倒して爆速プロダクト開発！社内ハッカソンでの取り組み紹介
Avatar for 都村　美帆 abokadotyann
9
2.8k
逆向きUIの世界〜AndroidアプリのRTL言語対応〜
Avatar for akatsuki174 akatsuki174
1
690
1年目デザイナーが実践する、チーム貢献のための2つのアプローチ
Avatar for kinomi kinomidesign
0
140
地理院地図をもっと楽しく！れきちず新機能のご紹介
Avatar for Hajime Kato hjmkth
1
250
DESIGNEAST 2025 A-3
Avatar for Shigeru Kobayashi _kotobuki_
0
120
モビリティプラットフォームの未来を築くクラウド基盤
Avatar for Hajime KOSHIRO kossykinto
0
150
プロダクトリニューアルと同時に進める初めてのデザインシステム
Avatar for PERSOL CAREER Dev | techtekt techtekt
PRO
0
320
Franks Myth
Avatar for George Frank Hayford-Taylor gfht1
0
370
Correspondence：共に生成していく過程
Avatar for Akira Motomura akiramotomura
0
160

Featured

See All Featured
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
231
22k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
4.9k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
698
190k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
9
1.3k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
527
40k
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.5k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
9.8k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
73
5k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.4k

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