初心者向けざっくりHTML/CSSコーディングハンズオン資料

 初心者向けざっくりHTML/CSSコーディングハンズオン資料

HTML/CSSのコーディングをざっくりと教えるというハンズオンを開催しました。

91505854a53b959ae0038887e1e7a657?s=128

Tetsuhiro Sato

April 25, 2017
Tweet

Transcript

  1. ໨࣍ σβΠϯͷཁૉ෼ղ )5.-ίʔσΟϯάʢϚʔΫΞοϓʣ ϋϯζΦϯ ελΠϧΛ͋ͯΔʢ4$44 $44ʣ ಈ͖Λ͚ͭΔ KT ϋϯζΦϯ લ൒

    ޙ൒
  2. σβΠϯΛݟͯύʔτʹ෼͚Δ σβΠϯͷཁૉ෼ղ

  3. σβΠϯͷཁૉ෼ղ

  4. σβΠϯͷཁૉ෼ղ ݟग़͠ ݟग़͠ ݟग़͠ ݟग़͠ ஈམ ஈམ ஈམ

  5. σβΠϯͷཁૉ෼ղ ίϯςϯπ ༨ന

  6. σβΠϯͷཁૉ෼ղ σβΠϯΛݟͯύʔτʹ෼͚Δ

  7. ޙ൒ ໨࣍ σβΠϯͷཁૉ෼ղ )5.-ίʔσΟϯάʢϚʔΫΞοϓʣ ϋϯζΦϯ ελΠϧΛ͋ͯΔʢ4$44 $44ʣ ಈ͖Λ͚ͭΔ KT ϋϯζΦϯ

    લ൒
  8. )5.-ίʔσΟϯάʢϚʔΫΞοϓʣ ϚʔΫΞοϓΛߦ͏

  9. )5.-ίʔσΟϯάʢϚʔΫΞοϓʣ ϚʔΫΞοϓΛߦ͏ ϚʔΫΞοϓ ͨͩͷը૾͔Β ϒϥ΢β͕ೝࣝͰ͖Δݴ༿ʹ͢Δ จࣈྻʹҙຯΛ࣋ͨͤͯ จॻߏ଄Λ࡞Γ্͛Δ

  10. )5.-ίʔσΟϯάʢϚʔΫΞοϓʣ ϚʔΫΞοϓΛߦ͏

  11. )5.-ίʔσΟϯάʢϚʔΫΞοϓʣ λάͷઆ໌ BSUJDMF IFBEFS OBW TFDUJPO จॻ಺ͷಠཱͨ͠هࣄηΫγϣϯΛද͠·͢ɻ ྫ͑͹ϑΥʔϥϜͰͷ౤ߘɺࡶࢽ΍৽ฉͷهࣄɺϒϩάͷΤϯ τϦɺίϝϯτͳͲͰ͢ɻ ΠϯτϩμΫγϣϯ΍φϏήʔγϣϯάϧʔϓͰ͋Δ͜ͱΛࣔ

    ͢ࡍʹ࢖༻͠·͢ɻ φϏήʔγϣϯͰ͋Δ͜ͱΛࣔ͢ࡍʹ࢖༻͠·͢ɻφϏήʔγ ϣϯͱ͸ɺ΢ΣϒαΠτ಺ͷଞͷϖʔδ΁ͷϦϯΫ΍ɺϖʔδ ಺ϦϯΫͳͲͷ͜ͱͰ͢ɻ จॻ΍ΞϓϦέʔγϣϯͷҰ෦෼ͱͳΔɺҙຯ΍ػೳͷͻͱ· ͱ·Γͷ͜ͱͰ͢ɻ ΢Σϒϖʔδ಺ͷηΫγϣϯͱͯ͠͸ɺྫ ͑͹ɺಋೖ෦෼ɺ৽ண৘ใɺ࿈བྷઌͳͲ͕ߟ͑ΒΕ·͢ɻ ʢݟग़͠ΛؚΊΔࣄΛਪ঑͞Ε͍ͯΔ͕ແͯ͘΋ྑ͍ʣ
  12. )5.-ίʔσΟϯάʢϚʔΫΞοϓʣ λάͷઆ໌ pHVSF BTJEF GPPUFS ਤදͰ͋Δ͜ͱΛࣔ͢ࡍʹ࢖༻͠·͢ɻ ͜͜Ͱݴ͏ਤදͱ͸ɺ จॻͷຊจʢϝΠϯϑϩʔʣ͔Βࢀর͞ΕΔΑ͏ͳΠϥετɾ ਤɾࣸਅɾιʔείʔυͳͲͷ͜ͱͰ͢ɻ pHDBQUJPO

    ਤදͷΩϟϓγϣϯΛࣔ͢ࡍʹ࢖༻͠·͢ɻpHVSFʙ pHVSFͷதʹ഑ஔ͢ΔͱɺਤදʹΩϟϓγϣϯΛ෇͚Δ͜ͱ͕ Ͱ͖·͢ɻ ͦͷ෦෼͕΢Σϒϖʔδ಺ʹ͓͚Δ༨ஊɾิ଍৘ใͷηΫγϣ ϯͰ͋Δ͜ͱΛࣔ͢ࡍʹ࢖༻͠·͢ɻ ௚ۙͷηΫγϣϯͷϑολͰ͋Δ͜ͱΛࣔ͢ࡍʹ࢖༻͠·͢ɻ ϑολʔͱ͸ɺͦͷηΫγϣϯʹؔ͢Δ৘ใͷ͜ͱͰɺҰൠత ʹ͸ɺ୭͕ॻ͍ͨͷ͔ɺؔ࿈จॻ΁ͷϦϯΫɺஶ࡞ݖͳͲͷ৘ ใؚ͕·Ε·͢ɻ
  13. )5.-ίʔσΟϯάʢϚʔΫΞοϓʣ λάͷઆ໌ VM PM MJ EJW VOPSEFSFE MJTUͷུͰɺॱংͷͳ͍ϦετΛදࣔ͢Δࡍʹ࢖༻ ͠·͢ɻϦετ߲໨͸ɺMJλάͰࢦఆ͠·͢ɻ PSEFSFE

    MJTUͷུͰɺॱংͷ͋ΔϦετΛදࣔ͢Δࡍʹ࢖༻͠ ·͢ɻϦετ߲໨͸ɺMJλάͰࢦఆ͠·͢ɻ MJTUJUFNͷུͰɺϦετͷ߲໨Λهड़͢Δࡍʹ࢖༻͠·͢ɻ Q TQBO ͻͱͭͷஈམʢύϥάϥϑʣͰ͋Δ͜ͱΛද͢ࡍʹ࢖༻͠· ͢ɻ ͻͱͭͷൣғͱͯ͠ఆٛ͢Δࡍʹ࢖༻͠·͢ɻͦΕࣗ਎Ͱ͸Կ ΋ҙຯΛ͍࣋ͬͯ·ͤΜ ͻͱ͔ͨ·Γͷൣғͱͯ͠ఆٛ͢Δࡍʹ࢖༻͠·͢ɻ EJWʹ ͸ಛผͳҙຯ͸͋Γ·ͤΜɻ
  14. )5.-ίʔσΟϯάʢϚʔΫΞοϓʣ λάͷઆ໌ TNBMM CS ໔੹ɾܯࠂɾ๏తن੍ɾஶ࡞ݖɾϥΠηϯεཁ݅ͳͲͷ஫ऍ΍ ࡉ໨Λද͢ࡍʹ࢖༻͠·͢ɻ FN TUSPOH ڧ੎͢ΔʢΞΫηϯτΛ෇͚ΔʣՕॴΛද͢ࡍʹ࢖༻͠·͢ɻ ڧ͍ॏཁੑΛද͢ࡍʹ࢖༻͠·͢ɻ

    վߦ
  15. )5.-ίʔσΟϯάʢϚʔΫΞοϓʣ ϚʔΫΞοϓΛߦ͏ ίϯςϯπϞσϧ ͲͷཁૉʢλάʣʹͲΜͳίϯςϯπΛೖΕͯྑ͍͔Λ ఆٛͨ͠΋ͷ ϘοΫεͰ֤DTTͷྖҬΛΘ͚ͯͦͷ੒ΓཱͪΛ ఆٛͨ͠΋ͷ ϘοΫεϞσϧ IUUQDSFBUPSBBJODDPKQBSDIJWFT IUUQDSFBUPSBBJODDPKQBSDIJWFT

  16. )5.-ίʔσΟϯάʢϚʔΫΞοϓʣ ϚʔΫΞοϓΛߦ͏ ໋໊نଇ ɾཁૉ໊ʴݻ༗໊ ɾMPXFSΩϟϝϧγϯλοΫε ɾ࿈൪ͷ࢖༻͸جຊෆՄ ɹྫʣɹCVUUPO$POUBDU ɾJEࢦఆ͠ͳ͍ʢKT ؀ڥΛ੾Γ཭͍ͨ࣌͠͸࢖ͬͯΑ͍ʣ ɾ਺ࣈ͔Β࢝Ίͳ͍ʢDTTͱͯ͠ೝࣝ͞Εͳ͘ͳΓ·͢ɻʣ

    ଞ͸ҎԼΛࢀর IUUQTBBXJLJBUMBTTJBOOFUXJLJQBHFTWJFXQBHFBDUJPO QBHF*E
  17. )5.-ίʔσΟϯάʢϚʔΫΞοϓʣ ϚʔΫΞοϓΛߦ͏ ৄࡉ౓ $44ઃܭख๏ #&. 00$44 4."$44 IUUQCMPHSVFEBQDPNCMPDLFMFNFOUNPEJpFS IUUQTBQQDPEFHSJEOFUFOUSZPPDTT IUUQTBQQDPEFHSJEOFUFOUSZTNBDTT

    $44ʹ͸༏ઌ౓͕ଘࡏ͍ͯͯ͠૊Έ߹ΘͤʹΑͬͯมΘΔͷͰ ͜ΕΛҙ͍ࣝͯ͠ͳ͍ͱࢦఆ͕൓ө͞Εͳ͍ͱ͔ҙਤ͠ͳ͍ͱ͜Ζʹ൓ө ͞ΕΔͱ͔͕ى͜Γ·͢ɻ IUUQXXXBUNBSLJUDPKQBJUBSUJDMFTOFXTIUNM
  18. ໨࣍ σβΠϯͷཁૉ෼ղ )5.-ίʔσΟϯάʢϚʔΫΞοϓʣ ϋϯζΦϯ ελΠϧΛ͋ͯΔʢ4$44 $44ʣ ಈ͖Λ͚ͭΔ KT ϋϯζΦϯ લ൒

    ޙ൒
  19. ϋϯζΦϯ ࣗ෼ͰϚʔΫΞοϓΛͯ͠ΈΔ

  20. σβΠϯͷཁૉ෼ղ σβΠϯΛݟͯύʔτʹ෼͚Δ Ωϟϯϖʔϯ ը૾

  21. ϋϯζΦϯ ࣗ෼ͰϚʔΫΞοϓΛͯ͠ΈΔ

  22. ໨࣍ σβΠϯͷཁૉ෼ղ )5.-ίʔσΟϯάʢϚʔΫΞοϓʣ ϋϯζΦϯ ελΠϧΛ͋ͯΔʢ4$44 $44ʣ ಈ͖Λ͚ͭΔ KT ϋϯζΦϯ લ൒

    ޙ൒
  23. ελΠϧΛ͋ͯΔʢ4$44 $44ʣ DTTΛॻ͘

  24. ελΠϧΛ͋ͯΔʢ4$44 $44ʣ DTTΛॻ͘

  25. ελΠϧΛ͋ͯΔʢ4$44 $44ʣ DTTΛॻ͘ ϘοΫεϞσϧࢉग़ํ๏Λมߋ͢Δ ࢦఆͨ͠ଐੑͷଐੑ஋͕લํҰகͨ͠৔߹ɺࢦఆͨ͠ཁૉʹ ελΠϧΛద༻͠·͢ɻ ϓϩύςΟ CPYTJ[JOH Q<GPPlCBSz> ୯Ґͷҧ͏࢛ଇԋࢉ͕ߦ͑Δɻ

    DBMD QY  DBMD
  26. ελΠϧΛ͋ͯΔʢ4$44 $44ʣ DTTΛॻ͘ ະ๚໰ϦϯΫͷελΠϧΛࢦఆɻ Χʔιϧ͸৐͍ͬͯΔ͕ΫϦοΫ͸͞Ε͍ͯͳ͍ঢ়ଶΛࢦఆɻ ΫϦοΫ͞Ε͔ͯΒ཭͞ΕΔ·Ͱͷঢ়ଶΛࢦఆΛࢦఆɻ ๚໰ࡁΈϦϯΫͷελΠϧΛࢦఆɻ ཁૉͷ௚લʹ಺༰Λૠೖ͢Δࡍʹ࢖༻͠·͢ɻ ཁૉͷ௚ޙʹ಺༰Λૠೖ͢Δࡍʹ࢖༻͠·͢ɻ ཁૉ಺Ͱ࠷ॳʹݱΕΔࢠཁૉΛର৅ʹελΠϧΛద༻͠·͢ɻ

    ཁૉ಺ͰO൪໨ͷࢠཁૉΛର৅ʹελΠϧΛద༻͠·͢ɻ ࢦఆͨ͠ཁૉҎ֎ʹελΠϧΛద༻͠·͢ɻ ٖࣅΫϥε ٖࣅཁૉ MJOL IPWFS BDUJWF WJTJUFE CFGPSF BGUFS pSTUDIJME OUIDIJME O OPU
  27. ελΠϧΛ͋ͯΔʢ4$44 $44ʣ DTTΛॻ͘ 'JSFGPY (PPHMF$ISPNFɺ4BGBSJ *OUFSOFU&YQMPSFS 0QFSB ϒϥ΢βϕϯμʔ͕ಠࣗͷ֦ுػೳΛ࣮૷ͨ͠Γɺ૲Ҋஈ֊ͷ࢓༷Λઌߦ࣮૷͢Δ ৔߹ʹɺͦΕ͕֦ுػೳͰ͋Δ͜ͱΛ໌ࣔ͢ΔͨΊʹ෇͚Δࣝผࢠͷ͜ͱͰ͢ɻ ϕϯμʔϓϨϑΟοΫε

    NP[ XFCLJU NT P
  28. ໨࣍ σβΠϯͷཁૉ෼ղ )5.-ίʔσΟϯάʢϚʔΫΞοϓʣ ϋϯζΦϯ ελΠϧΛ͋ͯΔʢ4$44 $44ʣ ಈ͖Λ͚ͭΔ KT ϋϯζΦϯ લ൒

    ޙ൒
  29. ελΠϧΛ͋ͯΔʢ4$44 $44ʣ TDTTΛॻ͘

  30. ελΠϧΛ͋ͯΔʢ4$44 $44ʣ TDTTΛॻ͘ TDTTͰͰ͖Δ͜ͱ ɾωετʢೖΕࢠʣʹͰ͖Δ ɾ਌ηϨΫλΛࢀর  ɾม਺͕࢖͑Δ  ɾ!FYUFOE

    ɾ!NJYJO ɾϓϨʔεϗϧμʔηϨΫλ  ɾϑΝΠϧ෼ׂՄೳ ɾΞϯμʔόʔʢ@ʣΛ෇͚ΔͱDTTϑΝΠϧʹग़ྗ͞Εͳ͍
  31. ελΠϧΛ͋ͯΔʢ4$44 $44ʣ TDTTΛॻ͘

  32. ελΠϧΛ͋ͯΔʢ4$44 $44ʣ TDTTΛॻ͘ TDTTͷ෼͚ํ *5$44ͱ͍͏ઃܭख๏ͷ෼͚ํΛ࠾༻͍ͯ͠Δɻ TFUUJOH UPPMT HFOFSJD CBTF PCKFDUT

    DPNQPOFOUT USVNQT ϓϦϓϩηοαͰར༻͢Δάϩʔόϧม਺΍શମͷઃఆ ϓϦϓϩηοαͰར༻͢ΔNJYJO΍GVODUJPOͳͲ ϦηοτDTT ཁૉܕηϨΫλ ϑΥϯτɺϘλϯɺϑΥʔϜɺΞΠίϯ౳ ίϯϙʔωϯτɺϖʔδ͝ͱͱ͸ݶΒͳ͍ ϔϧύʔ
  33. ελΠϧΛ͋ͯΔʢ4$44 $44ʣ TDTTΛॻ͘ TDTTͷ෼͚ํ ಛघͳ΋ͷ NPOJQMB$PNNFOU PXOFE@NPEVMF ίϝϯτͷ͢΂ͯͷDTT FNFEFΩϟϯϖʔϯ༻ʹύονΛ౰ͯͯΔ