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

忙しい人のためのHTML5入門入門

Avatar for Nokogiri Nokogiri
November 27, 2016
Education
1
480

 忙しい人のためのHTML5入門入門

【社内向け資料】HTML5に入門するための入門

Avatar for Nokogiri

Nokogiri

November 27, 2016
Tweet

More Decks by Nokogiri

See All by Nokogiri
Zustandを用いた実践的状態管理
Avatar for Nokogiri undefined_name
3
780
React Testing Libraryでの WAI-ARIAロールの活用事例
Avatar for Nokogiri undefined_name
1
200
自動テストは何の役に立つのか そして役に立たないのか
Avatar for Nokogiri undefined_name
5
1.8k
Pipe Operator (|>) の紹介
Avatar for Nokogiri undefined_name
2
380
FizzBuzzで学ぶOCP
Avatar for Nokogiri undefined_name
0
140
エンジニアとQAでコラボするフロントエンドリアーキテクチャ開発の事例
Avatar for Nokogiri undefined_name
4
3.1k
オブジェクト指向のプラクティスをフロントエンドで活用する
Avatar for Nokogiri undefined_name
7
1.7k
モププロ@kintone開発チーム
Avatar for Nokogiri undefined_name
1
630
勉強会で登壇者に 質問しづらい課題を解決する サービスをリリースしました🎉
Avatar for Nokogiri undefined_name
2
1.3k

Other Decks in Education

See All in Education
IKIGAI World Fes：program
Avatar for Fujinari tsutsumi
1
2.6k
React完全入門
Avatar for MIKIO KUBO mickey_kubo
1
120
Introduction - Lecture 1 - Advanced Topics in Big Data (4023256FNR)
Avatar for Beat Signer signer
PRO
2
2.2k
くまのココロンともぐらのロジ
Avatar for Frieve-A frievea
0
150
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.2k
1125
Avatar for cbtlibrary cbtlibrary
0
170
0121
Avatar for cbtlibrary cbtlibrary
0
130
Adobe Express
Avatar for Matleena Laakso matleenalaakso
2
8.2k
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
400
JAPAN AI CUP Prediction Tutorial
Avatar for Shotaro Ishihara upura
2
710
卒論の書き方 / Happy Writing
Avatar for kaityo256 kaityo256
PRO
54
28k
Node-REDで広がるプログラミング教育の可能性
Avatar for ueponx ueponx
1
270

Featured

See All Featured
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
Lightning talk: Run Django tests with GitHub Actions
Avatar for Sarah Abderemane sabderemane
0
120
Exploring the relationship between traditional SERPs and Gen AI search
Avatar for Ray Grieselhuber raygrieselhuber
PRO
2
3.6k
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
150
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
6.8k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
Agile Leadership in an Agile Organization
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
84
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
130
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.6k
Fireside Chat
Avatar for paigeccino paigeccino
41
3.8k
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
0
130
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
1
100

Transcript

  1. ๩͍͠ਓͷͨΊͷ HTML5ೖ໳ೖ໳ 2016/11/30

  2. ࣍ظͷ։ൃ͔Β)5.-͕ಋೖ͞ΕΔΒ͍͚͠Ͳ ͳʹ͔ΒखΛ͚͍͍͔ͭͯΘ͔ΒΜʜ ͍ͬͯ͏͔ͦ΋ͦ΋ࠓͱԿ͕͔ΘΔͷʁ

  3. લճͷ͓͞Β͍

  4. • ୺຤͕λϒϨοτԽ͢Δͷʹ߹Θͤͯը໘Λ ࡮৽͢Δ(λονʹ࠷దԽ͢Δ) • ϕʔεɿHTML5ɺCSS3ɺjQuery • jQueryҎ֎ͷjavascriptϥΠϒϥϦ΋ݕ౼͞Ε ͍ͯΔ

  5. HTML5ͬͯࠓ·Ͱͱ Կ͕ҧ͏ͷʁ

  6. • 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ͷ௥Ճ
 ྫ) Ґஔ৘ใɺՃ଎౓ηϯαʔͳͲ
 㱺εϚϗ͔Βͷར༻Λߟྀͯ͠

  7. ࣮͸HTML5͚ͩͰ͸ ”ݟͨ໨”͸͔ΘΒͳ͍

  8. ݟͨ໨Λม͑Δͷ͸CSS3

  9. • ؙ֯ (border-radius) • Ө(box-shadow) • άϥσʔγϣϯ(linear-gradient) • ಁա(opacity) •

    Ξχϝʔγϣϯ • ศརͳηϨΫλ
 ྫ) :nth-child , not, empty, checked

  10. jQueryͱ͸ʁ

  11. • Web։ൃͷݱ৔Ͱଟ͘ར༻͞ΕΔ
 JavascriptϥΠϒϥϦͷҰͭ • Javascriptͳ৑௕ͳදݱΛ୹͘௚ײతʹɻ • Ξχϝʔγϣϯ΍ಈతͳಈ͖ʹڧ͍ • ϒϥ΢βຖͷJavascriptͷڍಈͷࠩҟΛٵऩ

  12. ͓͞Β͍ऴΘΓ

  13. ࣍ظ։ൃͰɺ)5.-ɺ$44ɺK2VFSZΛ
 ར༻͢Δͷ͸Θ͔͚ͬͨͲɺ Ͳ͏΍ֶͬͯΜͩΒ͍͍ͷʁ

  14. Ͳ͏͢Ε͹शಘͰ͖Δ͔ʁ

  15. ࡞Δ͔͠ͳ͍ʂʂ

  16. Ͱ΋Ͳ͏΍ͬͯ…ʁ

  17. • ॻ੶(͓ି͠͠·͢)
 㱺HTML5+CSS3ͷجૅΛֶͿʴखΛ͏͔͢͝
 • ಈըֶशαΠτ
 㱺ɹɹυοτΠϯετʔϧ • ͦͷଞνϡʔτϦΞϧͳͲΛܝࡌͨ͠هࣄ https://goo.gl/eURMii http://dotinstall.com/

    ϓϩάϥϛϯάͬͯࣗ෼Ͱ࡞ͬͯΈͯ ಈ͔͞ͳ͍ͱͳ͔ͳ͔शಘͮ͠Β͍

  18. υοτΠϯετʔϧͱ͸ʁ • 3෼ಈըͰϚελʔ͢Δॳ৺ऀ޲͚ϓϩάϥϛ ϯάֶशαΠτ(287Ϩοεϯɺ4194ຊͷಈը) • ओʹWEB։ൃͰඞཁͱͳΔݴޠɺϑϨʔϜ ϫʔΫɺٕज़ཁૉɺͦͷଞπʔϧͷ࢖͍ํͳ ͲΛֶͿ͜ͱ͕Ͱ͖Δ • 1ຊ1ຊ͕୹͍ͷͰɺࡉ੾Εͷ࣌ؒͰར༻Մೳ

  19. جຊແྉ

  20. Ϩοεϯͷ಺༰ͷҰ෦ 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ɺϩʔΧϧ։ൃ؀ڥߏங
 ͳͲͳͲʜ

  21. ˞υοτΠϯετʔϧ͸ೖ໳Ϩϕϧͷઆ໌͔͠ͳ͍ͷͰɺ͜ΕΛͱ͔͔ͬΓʹ
 ຊΛങֶͬͯΜͩΓɺԿ͔Λ࡞ͬͯ਎ʹ͚ͭΔ͔͠ͳ͍

  22. ·ͱΊ • ࣍ظͷ։ൃͷϕʔε • शಘ͢Δʹ͸खΛಈ͔͔͢͠ͳ͍ • ·ͣ͸υοτΠϯετʔϧͰಈըݟͯɺงғ ؾΛ͔ͭΜͩΒɺຊͰ͖ͬͪΓ஌ࣝΛ͚ͭΔɻ ਎ʹ͚ͭͨΒԿ͔࡞ͬͯΞ΢τϓοτ͢Δɻ ʴ

    ʴ