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

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

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