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

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

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Nokogiri Nokogiri
November 27, 2016
Education
480
1

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

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

Avatar for Nokogiri

Nokogiri

November 27, 2016

More Decks by Nokogiri

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

Other Decks in Education

See All in Education
AI時代において英語学習は本当に必要？ ~未経験からのバイリンガルキャリアの始め方を教えます~
Avatar for Kenta Suzuki kekekenta
0
190
Implicit and Cross-Device Interaction - Lecture 10 - Next Generation User Interfaces (4018166FNR)
Avatar for Beat Signer signer
PRO
2
2.3k
Interaction - Lecture 10 - Information Visualisation (4019538FNR)
Avatar for Beat Signer signer
PRO
0
2.6k
吉祥寺.pmは1つじゃない
— 複数イベント並走運営の12年 —
Avatar for Magnolia.K magnolia
0
1.3k
LinkedIn
Avatar for Matleena Laakso matleenalaakso
0
4.2k
Virtual and Augmented Reality - Lecture 8 - Next Generation User Interfaces (4018166FNR)
Avatar for Beat Signer signer
PRO
0
2.3k
2026年度春学期　統計学　第3回　クロス集計と感度・特異度，データの可視化 (2026. 4. 23)
Avatar for Akira Asano akiraasano
PRO
0
130
Data Management and Analytics Specialisation
Avatar for Beat Signer signer
PRO
0
1.8k
Gitがない時代 インターネットがない時代の 開発話
Avatar for sapi_kawahara sapi_kawahara
0
260
We部コミュニティスライド2026-04-24
Avatar for junhat6 junhat6
0
170
「機械学習と因果推論」入門 ⑤ 因果効果推定の一般化
Avatar for MasaKat0 masakat0
0
110
生成AI時代の情報発信
Avatar for molmolken molmolken
0
130

Featured

See All Featured
Tell your own story through comics
Avatar for letsgokoyo letsgokoyo
1
950
Ruling the World: When Life Gets Gamed
Avatar for Sebastian Deterding codingconduct
0
250
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
550
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
140
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
130
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
1
340
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
75
12k
Google's AI Overviews - The New Search
Avatar for Barry Adams badams
0
1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
35k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
672
58k
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
1
350

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

    ʴ