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
120
自動テストは何の役に立つのか そして役に立たないのか
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
550
勉強会で登壇者に 質問しづらい課題を解決する サービスをリリースしました🎉
undefined_name
2
1.2k
Usefull GitLens
undefined_name
3
770
Other Decks in Education
See All in Education
Web からのデータ収集と探究事例の紹介 / no94_jsai_seminar
upura
0
130
Zero to Hero
takesection
0
160
1216
cbtlibrary
0
280
Image compression
hachama
0
400
Diseño de estrategia de analítica del aprendizaje en tu centro educativo.
tecuribarri
0
150
Power Automate+ChatGPTを使ってエンジニア教育を改善してみた #RPALT
masakiokuda
0
150
リバースバケットリスト 〜 「死ぬまでにやることリスト」の欠点と対処法
takibi333
0
120
5 Things Every L&D Pro Should Steal from Marketing
tmiket
0
150
中野区ミライ★ライター倶楽部presents『MINT』
nakamuramikumirai
0
710
Prógram La Liberazione
olafurtr90
0
170
Казармы и гарнизоны
pnuslide
0
180
Padlet opetuksessa
matleenalaakso
4
13k
Featured
See All Featured
Practical Orchestrator
shlominoach
186
10k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.2k
Mobile First: as difficult as doing things right
swwweet
223
9.4k
It's Worth the Effort
3n
184
28k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Typedesign – Prime Four
hannesfritz
40
2.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.1k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
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ɺϩʔΧϧ։ൃڥߏங ͳͲͳͲʜ
˞υοτΠϯετʔϧೖϨϕϧͷઆ໌͔͠ͳ͍ͷͰɺ͜ΕΛͱ͔͔ͬΓʹ ຊΛങֶͬͯΜͩΓɺԿ͔Λ࡞ͬͯʹ͚ͭΔ͔͠ͳ͍
·ͱΊ • ࣍ظͷ։ൃͷϕʔε • शಘ͢ΔʹखΛಈ͔͔͢͠ͳ͍ • ·ͣυοτΠϯετʔϧͰಈըݟͯɺงғ ؾΛ͔ͭΜͩΒɺຊͰ͖ͬͪΓࣝΛ͚ͭΔɻ ʹ͚ͭͨΒԿ͔࡞ͬͯΞτϓοτ͢Δɻ ʴ
ʴ