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

Other Decks in Education

See All in Education
AIの時代こそ、考える知的学習術
Avatar for YUM3 yum3
2
160
Common STIs in London: Symptoms, Risks & Prevention
Avatar for Medical Dental medicaldental
0
130
技術文章を書くための執筆技術と実践法（パラグラフライティング）
Avatar for Hisashi Ishihara hisashiishihara
18
6.5k
日本の教育の未来 を考える テクノロジーは教育をどのように変えるのか
Avatar for Kazuki Maeda kzkmaeda
1
210
JPCERTから始まる草の根活動～セキュリティ文化醸成のためのアクション～
Avatar for モブエンジニア masakiokuda
0
180
郷土教育モデル事業（香川県小豆島町）.pdf
Avatar for B&G bandg
0
190
OpenSourceSummitJapanを運営してみた話
Avatar for Kujiraitakahiro kujiraitakahiro
0
700
2025.05.10 技術書とVoicyとわたし #RPALT
Avatar for Kaito UDAGAWA kaitou
1
210
Course Review - Lecture 12 - Next Generation User Interfaces (4018166FNR)
Avatar for Beat Signer signer
PRO
0
1.7k
ANS-C01_２回不合格から合格までの道程
Avatar for amarelo_n24 amarelo_n24
1
240
プレゼンテーション実践
Avatar for リスナビ takenawa
0
4.8k
系統性を意識したプログラミング教育～ガチャを実装しよう～
Avatar for アシアル情報教育研究所 asial_edu
0
400

Featured

See All Featured
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
124
52k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
39
1.9k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
357
30k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
54
13k
Navigating Team Friction
Avatar for Lara Hogan lara
187
15k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
48
2.8k
Designing for humans not robots
Avatar for Tammie Lister tammielis
253
25k
KATA
Avatar for Megan Lloyd mclloyd
29
14k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
2.9k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
53
2.8k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
26k

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

    ʴ