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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Nokogiri
November 27, 2016
Education
480
1
Share
忙しい人のためのHTML5入門入門
【社内向け資料】HTML5に入門するための入門
Nokogiri
November 27, 2016
More Decks by Nokogiri
See All by Nokogiri
Zustandを用いた実践的状態管理
undefined_name
3
830
React Testing Libraryでの WAI-ARIAロールの活用事例
undefined_name
1
210
自動テストは何の役に立つのか そして役に立たないのか
undefined_name
5
1.8k
Pipe Operator (|>) の紹介
undefined_name
2
390
FizzBuzzで学ぶOCP
undefined_name
0
150
エンジニアとQAでコラボするフロントエンドリアーキテクチャ開発の事例
undefined_name
4
3.1k
オブジェクト指向のプラクティスをフロントエンドで活用する
undefined_name
7
1.7k
モププロ@kintone開発チーム
undefined_name
1
650
勉強会で登壇者に 質問しづらい課題を解決する サービスをリリースしました🎉
undefined_name
2
1.3k
Other Decks in Education
See All in Education
Data Representation - Lecture 3 - Information Visualisation (4019538FNR)
signer
PRO
1
2.9k
Padlet opetuksessa
matleenalaakso
12
15k
Google AI Studio 開発者向け完全ガイド プロトタイピ まで ングからReactアプリ 構築・マルチモーダル活用
mickey_kubo
1
110
GOBUSATA紹介
chankawa919
0
140
[2026前期火5] 論理学(京都大学文学部 前期 第1回)「ハルシネーションを外部世界との対応を考えずに見分ける方法」
yatabe
0
350
演習:GitHubの基本操作 / 06-github-basic
kaityo256
PRO
0
260
Human Perception and Colour Theory - Lecture 2 - Information Visualisation (4019538FNR)
signer
PRO
0
3.1k
タイムマシンのつくりかた
nomizone
3
1.2k
計算物理におけるGitの使い方 / 01-c-compphys
kaityo256
PRO
2
540
P3NFEST 2026 Spring ハンズオン「ハッキング・ラブ!はじめてのハッキングをやってみよう」資料
nomizone
0
400
小さなまちで始める デジタル創作の居場所〜すべての子どもが創造的に未来を描ける社会へ〜
codeforeveryone
0
380
反応する前に「受容する」力を鍛える。 自分の安全地帯🌱 を育てよう / Cultivating and sharing ventral vagal safety.
spring_aki
0
130
Featured
See All Featured
Kristin Tynski - Automating Marketing Tasks With AI
techseoconnect
PRO
0
210
Groundhog Day: Seeking Process in Gaming for Health
codingconduct
0
140
Paper Plane
katiecoart
PRO
1
49k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
We Have a Design System, Now What?
morganepeng
55
8.1k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
38
2.8k
Code Review Best Practice
trishagee
74
20k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
49
9.9k
GraphQLとの向き合い方2022年版
quramy
50
14k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Building Adaptive Systems
keathley
44
3k
How GitHub (no longer) Works
holman
316
150k
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ɺϩʔΧϧ։ൃڥߏங ͳͲͳͲʜ
˞υοτΠϯετʔϧೖϨϕϧͷઆ໌͔͠ͳ͍ͷͰɺ͜ΕΛͱ͔͔ͬΓʹ ຊΛങֶͬͯΜͩΓɺԿ͔Λ࡞ͬͯʹ͚ͭΔ͔͠ͳ͍
·ͱΊ • ࣍ظͷ։ൃͷϕʔε • शಘ͢ΔʹखΛಈ͔͔͢͠ͳ͍ • ·ͣυοτΠϯετʔϧͰಈըݟͯɺงғ ؾΛ͔ͭΜͩΒɺຊͰ͖ͬͪΓࣝΛ͚ͭΔɻ ʹ͚ͭͨΒԿ͔࡞ͬͯΞτϓοτ͢Δɻ ʴ
ʴ