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
460
忙しい人のためのHTML5入門入門
【社内向け資料】HTML5に入門するための入門
Nokogiri
November 27, 2016
Tweet
Share
More Decks by Nokogiri
See All by Nokogiri
FizzBuzzで学ぶOCP
undefined_name
0
31
エンジニアとQAでコラボするフロントエンドリアーキテクチャ開発の事例
undefined_name
4
2k
オブジェクト指向のプラクティスをフロントエンドで活用する
undefined_name
7
1.2k
モププロ@kintone開発チーム
undefined_name
1
440
勉強会で登壇者に 質問しづらい課題を解決する サービスをリリースしました🎉
undefined_name
2
1.1k
Usefull GitLens
undefined_name
3
650
kintone開発チームにジョインして6カ月の所感
undefined_name
1
260
Trying State Manegemant without Redux(updated)
undefined_name
1
1.2k
Learning-Hooks
undefined_name
0
550
Other Decks in Education
See All in Education
Pen-based Interaction - Lecture 4 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1.2k
2023年度桜井政成ゼミ資料_論文の探し方・読み方
masanari
6
2.2k
Project Sprint 学生版(入門編)
copilot
PRO
0
170
Microsoft Office 365
matleenalaakso
0
1.5k
高可用性システム構築 - Oracle Data Guard基本編
oracle4engineer
PRO
2
990
STEAM教育の枠組で行うプログラミング学習
asial_edu
0
210
「小・中・高等学校における情報教育の体系的な学習を目指したカリキュラムモデル基本方針」
codeforeveryone
0
1.3k
Data Presentation - Lecture 5 - Information Visualisation (4019538FNR)
signer
PRO
0
1.8k
【潔能講堂】永續環境、擁抱綠能 太陽能光電發展現況與產業製程解析
learnenergy2
0
110
Information Architectures - Lecture 2 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1.1k
LTをすべき100の理由
eltociear
1
260
Часто задаваемые вопросы
pnuslide
0
21k
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
Embracing the Ebb and Flow
colly
79
4.1k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
Design by the Numbers
sachag
274
18k
The Pragmatic Product Professional
lauravandoore
24
5.8k
BBQ
matthewcrist
80
8.8k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
20
1.6k
A designer walks into a library…
pauljervisheath
199
23k
The Illustrated Children's Guide to Kubernetes
chrisshort
30
46k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
Thoughts on Productivity
jonyablonski
57
3.8k
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ɺϩʔΧϧ։ൃڥߏங ͳͲͳͲʜ
˞υοτΠϯετʔϧೖϨϕϧͷઆ໌͔͠ͳ͍ͷͰɺ͜ΕΛͱ͔͔ͬΓʹ ຊΛങֶͬͯΜͩΓɺԿ͔Λ࡞ͬͯʹ͚ͭΔ͔͠ͳ͍
·ͱΊ • ࣍ظͷ։ൃͷϕʔε • शಘ͢ΔʹखΛಈ͔͔͢͠ͳ͍ • ·ͣυοτΠϯετʔϧͰಈըݟͯɺงғ ؾΛ͔ͭΜͩΒɺຊͰ͖ͬͪΓࣝΛ͚ͭΔɻ ʹ͚ͭͨΒԿ͔࡞ͬͯΞτϓοτ͢Δɻ ʴ
ʴ