初心者向けざっくり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Ωϟϯϖʔϯ༻ʹύονΛ౰ͯͯΔ