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
Nokogiri
November 27, 2016
Education
1
470
忙しい人のためのHTML5入門入門
【社内向け資料】HTML5に入門するための入門
Nokogiri
November 27, 2016
Tweet
Share
More Decks by Nokogiri
See All by Nokogiri
React Testing Libraryでの WAI-ARIAロールの活用事例
undefined_name
1
130
自動テストは何の役に立つのか そして役に立たないのか
undefined_name
5
1.7k
Pipe Operator (|>) の紹介
undefined_name
2
270
FizzBuzzで学ぶOCP
undefined_name
0
88
エンジニアとQAでコラボするフロントエンドリアーキテクチャ開発の事例
undefined_name
4
2.7k
オブジェクト指向のプラクティスをフロントエンドで活用する
undefined_name
7
1.5k
モププロ@kintone開発チーム
undefined_name
1
560
勉強会で登壇者に 質問しづらい課題を解決する サービスをリリースしました🎉
undefined_name
2
1.2k
Usefull GitLens
undefined_name
3
770
Other Decks in Education
See All in Education
Data Representation - Lecture 3 - Information Visualisation (4019538FNR)
signer
PRO
1
2.2k
Carving the Way to Ruby Engineering
koic
3
800
ビジネススキル研修紹介(株式会社27th)
27th
PRO
1
670
Web 2.0 Patterns and Technologies - Lecture 8 - Web Technologies (1019888BNR)
signer
PRO
0
2.6k
新人研修の課題と未来を考える
natsukokanda1225
0
1.4k
生成AIと歩むこれからの大学
gmoriki
0
1.1k
地図を活用した関西シビックテック事例紹介
barsaka2
0
180
統計学に必要な数学(線形代数含む)
kosugitti
0
280
付箋を使ったカラオケでワイワイしましょう / Scrum Fest Okinawa 2024
bonbon0605
0
140
OCIでインスタンス構築してみた所感
masakiokuda
0
150
Ilman kirjautumista toimivia sovelluksia
matleenalaakso
1
20k
1113
cbtlibrary
0
300
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
A Philosophy of Restraint
colly
203
16k
How STYLIGHT went responsive
nonsquared
98
5.4k
Being A Developer After 40
akosma
89
590k
A designer walks into a library…
pauljervisheath
205
24k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Typedesign – Prime Four
hannesfritz
40
2.5k
Designing for humans not robots
tammielis
250
25k
It's Worth the Effort
3n
184
28k
4 Signs Your Business is Dying
shpigford
182
22k
Transcript
͍͠ਓͷͨΊͷ HTML5ೖೖ 2016/11/30
࣍ظͷ։ൃ͔Β)5.-͕ಋೖ͞ΕΔΒ͍͚͠Ͳ ͳʹ͔ΒखΛ͚͍͍͔ͭͯΘ͔ΒΜʜ ͍ͬͯ͏͔ͦͦࠓͱԿ͕͔ΘΔͷʁ
લճͷ͓͞Β͍
• ͕λϒϨοτԽ͢Δͷʹ߹Θͤͯը໘Λ ৽͢Δ(λονʹ࠷దԽ͢Δ) • ϕʔεɿHTML5ɺCSS3ɺjQuery • jQueryҎ֎ͷjavascriptϥΠϒϥϦݕ౼͞Ε ͍ͯΔ
HTML5ͬͯࠓ·Ͱͱ Կ͕ҧ͏ͷʁ
• HTMLϔομʔ෦ͷهࡌ͕γϯϓϧʹ <!DOCTYPE html> 4.01 㱺<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> • ৽͍͠λά͕Ճ ྫ) header, footer, article, sectionͳͲ 㱺HTMLλάʹҙຯΛ࣋ͨͤΔʂ • ৽͍͠Javascript APIͷՃ ྫ) ҐஔใɺՃηϯαʔͳͲ 㱺εϚϗ͔Βͷར༻Λߟྀͯ͠
࣮HTML5͚ͩͰ ”ݟͨ”͔ΘΒͳ͍
ݟͨΛม͑ΔͷCSS3
• ؙ֯ (border-radius) • Ө(box-shadow) • άϥσʔγϣϯ(linear-gradient) • ಁա(opacity) •
Ξχϝʔγϣϯ • ศརͳηϨΫλ ྫ) :nth-child , not, empty, checked
jQueryͱʁ
• Web։ൃͷݱͰଟ͘ར༻͞ΕΔ JavascriptϥΠϒϥϦͷҰͭ • JavascriptͳͳදݱΛ͘ײతʹɻ • Ξχϝʔγϣϯಈతͳಈ͖ʹڧ͍ • ϒϥβຖͷJavascriptͷڍಈͷࠩҟΛٵऩ
͓͞Β͍ऴΘΓ
࣍ظ։ൃͰɺ)5.-ɺ$44ɺK2VFSZΛ ར༻͢ΔͷΘ͔͚ͬͨͲɺ Ͳ͏ֶͬͯΜͩΒ͍͍ͷʁ
Ͳ͏͢ΕशಘͰ͖Δ͔ʁ
࡞Δ͔͠ͳ͍ʂʂ
ͰͲ͏ͬͯ…ʁ
• ॻ੶(͓ି͠͠·͢) 㱺HTML5+CSS3ͷجૅΛֶͿʴखΛ͏͔͢͝ • ಈըֶशαΠτ 㱺ɹɹυοτΠϯετʔϧ • ͦͷଞνϡʔτϦΞϧͳͲΛܝࡌͨ͠هࣄ https://goo.gl/eURMii http://dotinstall.com/
ϓϩάϥϛϯάͬͯࣗͰ࡞ͬͯΈͯ ಈ͔͞ͳ͍ͱͳ͔ͳ͔शಘͮ͠Β͍
υοτΠϯετʔϧͱʁ • 3ಈըͰϚελʔ͢Δॳ৺ऀ͚ϓϩάϥϛ ϯάֶशαΠτ(287Ϩοεϯɺ4194ຊͷಈը) • ओʹWEB։ൃͰඞཁͱͳΔݴޠɺϑϨʔϜ ϫʔΫɺٕज़ཁૉɺͦͷଞπʔϧͷ͍ํͳ ͲΛֶͿ͜ͱ͕Ͱ͖Δ • 1ຊ1ຊ͕͍ͷͰɺࡉΕͷ࣌ؒͰར༻Մೳ
جຊແྉ
Ϩοεϯͷ༰ͷҰ෦ w )5.- w $44 w #PPUTUSBQ w ϨεϙϯγϒΣϒαΠτ w
4BTT4$44 w 'MFYCPY )5.-$44ؔ࿈ +BWB4DSJQؔ࿈ w +BWB4DSJQU w +BWB4DSJQUͰετοϓΥονΛ࡞Ζ͏ w K2VFSZ w K2VFSZͰ࡞ΔεϥΠυγϣʔ w /PEFKT w 5ZQF4DSJQU ͦͷଞ w ਖ਼نදݱɺ4XJGUɺ+BWBɺ1ZUIPOɺ3VCZɺϩʔΧϧ։ൃڥߏங ͳͲͳͲʜ
˞υοτΠϯετʔϧೖϨϕϧͷઆ໌͔͠ͳ͍ͷͰɺ͜ΕΛͱ͔͔ͬΓʹ ຊΛങֶͬͯΜͩΓɺԿ͔Λ࡞ͬͯʹ͚ͭΔ͔͠ͳ͍
·ͱΊ • ࣍ظͷ։ൃͷϕʔε • शಘ͢ΔʹखΛಈ͔͔͢͠ͳ͍ • ·ͣυοτΠϯετʔϧͰಈըݟͯɺงғ ؾΛ͔ͭΜͩΒɺຊͰ͖ͬͪΓࣝΛ͚ͭΔɻ ʹ͚ͭͨΒԿ͔࡞ͬͯΞτϓοτ͢Δɻ ʴ
ʴ