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

Other Decks in Education

See All in Education
Présentation_2nde_2025.pdf
Avatar for Monsieur Bernhard bernhardsvt
0
260
20250910_エンジニアの成長は自覚するところから_サポーターズ勉強会
Avatar for 森田　一平 ippei0923
0
300
～キャラ付け考えていますか？～　AI時代だからこそ技術者に求められるセルフブランディングのすゝめ
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
7
500
(2025) L'origami, mieux que la règle et le compas
Avatar for Roger Mansuy mansuy
0
150
20250830_本社にみんなの公園を作ってみた
Avatar for yoneyan yoneyan
0
130
Google Gemini (Gem) の育成方法
Avatar for MIKIO KUBO mickey_kubo
2
220
ÉTICA, INCLUSIÓN, EDUCACIÓN INTEGRAL Y NEURODERECHOS EN EL CONTEXTO DEL NEUROMANAGEMENT
Avatar for José Vicente Pérez Cubias jvpcubias
0
120
​シリコンバレーでスタートアップを共同創業したファウンディングエンジニアとしての学び
Avatar for Tomoaki Imai tomoima525
1
1.3k
The knowledge panel is your new homepage
Avatar for Brad Wetherall bradwetherall
0
190
データで見る赤ちゃんの成長
Avatar for じゃらしまる syuchimu
0
320
Présentation_1ère_Spé_2025.pdf
Avatar for Monsieur Bernhard bernhardsvt
0
400
Alumnote inc. Company Deck
Avatar for Alumnote yukinumata
0
4k

Featured

See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
285
14k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
10
600
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
57k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.6k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
79
6k
It's Worth the Effort
Avatar for 3n 3n
187
28k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.8k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
431
66k
Code Review Best Practice
Avatar for Trisha Gee trishagee
72
19k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k

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

    ʴ