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

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

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λάͰࢦఆ͠·͢ɻ MJTU
    JUFNͷུͰɺϦετͷ߲໨Λهड़͢Δࡍʹ࢖༻͠·͢ɻ 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Ωϟϯϖʔϯ༻ʹύονΛ౰ͯͯΔ