Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
極!HTML5アウトライン
Search
Kazuki Shibata
June 12, 2015
Design
2
4.3k
極!HTML5アウトライン
2015/06/12 第9回HTML5MinutesのLT資料
Kazuki Shibata
June 12, 2015
Tweet
Share
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.9k
Jamstack × PWA におけるキャッシュ戦略
shibe97
3
1.2k
CSR / SSR / SSGの動向2020
shibe97
2
1.6k
Jamstack×microCMS 実装編
shibe97
4
940
SentryでSPAのエラーログを収集する
shibe97
1
1.7k
useRefについて調べてみた
shibe97
1
150
フロントエンドエンジニアのキャリアパス
shibe97
9
3.8k
Other Decks in Design
See All in Design
実践ゼロから作らないデザインシステム SaaS × デザインシステム × プロダクトデザイン / Efficient Design System for SaaS—no need to start from scratch.
kaminashi
2
1.6k
デフォルトの16:9(960*540px)のケース / Google Slide Size Test
arthur1
0
2.6k
商業デザインのアクセシビリティにおける倫理フレームワークの考察
securecat
1
580
250131_product meetup
motokoishida
0
190
AIで加速するアクセシビリティのこれから
magi1125
3
420
真・altはつけるだけじゃなくて -alt属性の考察 2025年版-
securecat
5
1.4k
共通認識のためのユーザビリティテスト by AIエージェント - Accelerating Value Delivery
gakuoya
1
650
株式会社デイトラ様│コーポレートサイト│コンセプトシート
haruka_capeo
0
1.8k
線で考える画面構成
natsuume
1
860
問いの変遷
iflection
0
120
Echoes Boomerang
artcloudyu
PRO
0
200
ビジネスアナリシスはビジネス”分析”じゃないよ!~システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス~
bpstudy
0
290
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.6k
Building Applications with DynamoDB
mza
95
6.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Making Projects Easy
brettharned
116
6.2k
Bash Introduction
62gerente
614
210k
Fireside Chat
paigeccino
37
3.5k
Music & Morning Musume
bryan
47
6.5k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
750
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.8k
Mobile First: as difficult as doing things right
swwweet
223
9.6k
Transcript
) 5 . - ΞτϥΠϯ ࣲాف / @shibe97 2015/06/12 ୈ9ճ
HTML5Minutes ۃ
ࣲా ف @shibe97 σβΠφʔ / ϑϩϯτΤϯυΤϯδχΞ
ΞτϥΠϯͬͯԿʁ
<body> <h1>HTML5</h1> <h2>Minutes</h2> <h2>triton-js</h2> </body> HTML ΞτϥΠϯ 1. HTML5 1.1.Minutes
1.2.triton-js
? <body> <h1>HTML5</h1> <h2>Minutes</h2> <section> <h2>triton-js</h2> <h1>ୈ9ճ</h1> </section> <h3>ຬһޚྱ</h3> </body>
<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.ຬһޚྱ
ࡾͭͷᎄ
໌ͱ҉ ΞτϥΠϯͷᎄͦͷ̍
<h1>҉తͳΞτϥΠϯ</h1> <h2>ͦͷ̎</h2>
<h1>҉తͳΞτϥΠϯ</h1> ΞτϥΠϯʢ҉ʣ ݟग़͠ཁૉ҉తʹΞτϥΠϯΛ࡞Δ <h2>ͦͷ̎</h2>
<h1>҉తͳΞτϥΠϯ</h1> ΞτϥΠϯʢ҉ʣ ݟग़͠ཁૉ҉తʹΞτϥΠϯΛ࡞Δ <h2>ͦͷ̎</h2> ΞτϥΠϯʢ҉ʣ
<section> </section> <h1>໌ࣔతͳΞτϥΠϯ</h1>
<section> </section> ΞτϥΠϯʢ໌ʣ <h1>໌ࣔతͳΞτϥΠϯ</h1> section, article, bodyͳͲ ໌ࣔతͳΞτϥΠϯΛ࡞Δ
ऑڧ৯ ΞτϥΠϯͷᎄͦͷ̎
<section> </section> ΞτϥΠϯLv = ʁ
<section> </section> <h2>ݟग़͠ొ</h2> ΞτϥΠϯLv = h2 h2ΛٵऩʂυϠΝʂ
<section> </section> <h2>ݟग़͠ొ</h2> ΞτϥΠϯLv = h2 <h3>͞Βʹऑ͍ݟग़͠ొ</h3> ΞτϥΠϯLv = h3
h3ʁ֨Լ͕οʂ
<section> </section> <h2>ݟग़͠ొ</h2> ΞτϥΠϯLv = h2 <h1>͞Βʹڧ͍ݟग़͠ొ</h1> ΞτϥΠϯLv = h1
h1…ͩͱ…ʁ
<section> </section> <h2>ݟग़͠ొ</h2> ΞτϥΠϯLv = h2 <h1>͞Βʹڧ͍ݟग़͠ొ</h1> ΞτϥΠϯLv = h1
ԡ্͛͠Δ ͍͢·ͤΜͰͨ͠ Ͳ͚Ͳ͚͌ʂ
ҋޫʹউͯͳ͍ ΞτϥΠϯͷᎄͦͷ̏
<h1>࠷ڧͷݟग़͠</h1> ΞτϥΠϯLv = h1ʢ҉ʣ զ࠷ڧͷh1ͳΓ
ΞτϥΠϯLv = h1ʢ҉ʣ <section> </section> <h1>࠷ڧͷݟग़͠</h1> <h2>໌ࣔతͳΞτϥΠϯ</h2> ΞτϥΠϯLv = h2ʢ໌ʣ
h1͞Μɺͪ͌ʔ͢ʂ
ΞτϥΠϯLv = h1ʢ҉ʣ <section> </section> <h1>࠷ڧͷݟग़͠</h1> <h2>໌ࣔతͳΞτϥΠϯ</h2> ΞτϥΠϯLv = h2ʢ໌ʣ
ԡ্͛͠Δ ·ɺ·Ϳ͍͠οʂ ͋͟ʔͬ͢ʂ
࣮ફ
? <body> <h1>HTML5</h1> <h2>Minutes</h2> <section> <h2>triton-js</h2> <h1>ୈ9ճ</h1> </section> <h3>ຬһޚྱ</h3> </body>
? ΞτϥΠϯLv = ? <body> <h1>HTML5</h1> <h2>Minutes</h2> <section> <h2>triton-js</h2> <h1>ୈ9ճ</h1>
</section> <h3>ຬһޚྱ</h3> </body>
? ΞτϥΠϯLv = h1 <body> <h1>HTML5</h1> <h2>Minutes</h2> <section> <h2>triton-js</h2> <h1>ୈ9ճ</h1>
</section> <h3>ຬһޚྱ</h3> </body>
? ΞτϥΠϯLv = h1 <body> <h1>HTML5</h1> <h2>Minutes</h2> <section> <h2>triton-js</h2> <h1>ୈ9ճ</h1>
</section> <h3>ຬһޚྱ</h3> </body> ΞτϥΠϯLv = h2
? ΞτϥΠϯLv = h1 <body> <h1>HTML5</h1> <h2>Minutes</h2> <section> <h2>triton-js</h2> <h1>ୈ9ճ</h1>
</section> <h3>ຬһޚྱ</h3> </body> ΞτϥΠϯLv = h2 ΞτϥΠϯLv = ?
? ΞτϥΠϯLv = h1 <body> <h1>HTML5</h1> <h2>Minutes</h2> <section> <h2>triton-js</h2> <h1>ୈ9ճ</h1>
</section> <h3>ຬһޚྱ</h3> </body> ΞτϥΠϯLv = h2 ΞτϥΠϯLv = ?
? ΞτϥΠϯ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 <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 = 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 = 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
ΞτϥΠϯ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.ຬһޚྱ
ศརͳπʔϧ • HTML 5 OutlinerʢWeb൛ʣ • https://gsnedders.html5.org/outliner/ • HTML 5
Outlinerʢchrome֦ு൛ʣ • https://chrome.google.com/webstore/detail/html5-outliner/ afoibpobokebhgfnknfndkgemglggomo?hl=ja
͏গ͠ৄ͘͠Γ͍ͨਓ… http://be-shi.tumblr.com/post/121266132377/html5-6
͋Γ͕ͱ͏͍͟͝·ͨ͠ :) @shibe97