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

極！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.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
Franks Myth
Avatar for George Frank Hayford-Taylor gfht1
1
410
越境するデザイン人材：デザイナーが社会資本となる世界へ
Avatar for Goodpatch Inc. goodpatch
1
500
Liquid GlassとApp Intents
Avatar for touyou touyou
0
800
ユーザー像を「みてね」らしく可視化する　家族アルバムみてねUXリサーチチームの取り組み
Avatar for MIXI DESIGN mixi_design
PRO
3
730
新規AIプロダクトで、事前に知るべきだった3つの壁 〜医療AIを1年間作って、従来の開発が通用しなかった話〜 / Three Walls in Building AI Products
Avatar for Takuya Shikichi shikichee
2
3.2k
組織の右腕として共創する ー デザインと経営の二つの視点から見えた、新しい支援のかたち/ Designship2025_Nishimura
Avatar for 株式会社ルート root_recruit
0
280
「稼ぐ」だけでなく 「還す」ためのデザイン / Designship2025
Avatar for インクルーシブデザインスタジオCULUMU culumu
1
570
2026年、デザイナーはなにに賭ける？
Avatar for Kazuhiro Tobita 0b1tk
0
480
チームをデザイン対象にする / Design for your team
Avatar for 株式会社カミナシ kaminashi
1
530
Vibe Coding デザインシステム
Avatar for poteboy poteboy
3
1.6k
アンエシカルデザインの枠組みの提案 -HCD-Netダークパターン研究会活動報告-
Avatar for Yu Morita securecat
0
200
組織はみんなでつくる。デザイナーが仕掛ける急拡大する組織のカルチャーづくり
Avatar for Kasumi Morita mkasumi
0
1.1k

Featured

See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
55
3.2k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
80
6.2k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
74
5k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
38
3k
Building a A Zero-Code AI SEO Workflow
Avatar for Ian Lurie portentint
PRO
0
310
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
9
1.6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.4k
Impact Scores and Hybrid Strategies: The future of link building
Avatar for Tamara Novitovic tamaranovitovic
0
200
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
0
140
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
0
66
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
2
250

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