$30 off During Our Annual Pro Sale. View Details »

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

Other Decks in Education

See All in Education
自分だけの、誰も想像できないキャリアの育て方 〜偶然から始めるキャリアプラン〜 / Career planning starting by luckly v2
Avatar for VTRyo vtryo
1
330
Master of Applied Science & Engineering: Computer Science & Master of Science in Applied Informatics: Artificial Intelligence and Data Science
Avatar for Beat Signer signer
PRO
0
860
2025年度伊藤正彦ゼミ紹介
Avatar for imash imash
0
140
20251119 如果是勇者欣美爾的話, 他會怎麼做? 東海資工
Avatar for Phil Huang pichuang
0
140
XML and Related Technologies - Lecture 7 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.1k
Security, Privacy and Trust - Lecture 11 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.1k
1202
Avatar for cbtlibrary cbtlibrary
0
150
あなたの言葉に力を与える、演繹的なアプローチ
Avatar for Takuto Nagami logica0419
1
240
生成AIとの付き合い方 / Generative AI and us
Avatar for kaityo256 kaityo256
PRO
11
6.6k
くまのココロンともぐらのロジ
Avatar for Frieve-A frievea
0
120
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.1k
RGBでも蛍光を!? / RayTracingCamp11
Avatar for kugi kugimasa
1
260

Featured

See All Featured
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2.2k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
54k
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.5k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.4k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.1k
Designing for Performance
Avatar for Lara Hogan lara
610
69k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
9.4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
122
21k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k

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

    ʴ