Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

Tetsuhiro Sato

April 25, 2017
Tweet

More Decks by Tetsuhiro Sato

Other Decks in Programming

Transcript

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

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

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

    MJTUͷུͰɺॱংͷ͋ΔϦετΛදࣔ͢Δࡍʹ࢖༻͠ ·͢ɻϦετ߲໨͸ɺMJλάͰࢦఆ͠·͢ɻ MJTUJUFNͷུͰɺϦετͷ߲໨Λهड़͢Δࡍʹ࢖༻͠·͢ɻ Q TQBO ͻͱͭͷஈམʢύϥάϥϑʣͰ͋Δ͜ͱΛද͢ࡍʹ࢖༻͠· ͢ɻ ͻͱͭͷൣғͱͯ͠ఆٛ͢Δࡍʹ࢖༻͠·͢ɻͦΕࣗ਎Ͱ͸Կ ΋ҙຯΛ͍࣋ͬͯ·ͤΜ ͻͱ͔ͨ·Γͷൣғͱͯ͠ఆٛ͢Δࡍʹ࢖༻͠·͢ɻ EJWʹ ͸ಛผͳҙຯ͸͋Γ·ͤΜɻ
  4. )5.-ίʔσΟϯάʢϚʔΫΞοϓʣ ϚʔΫΞοϓΛߦ͏ ৄࡉ౓ $44ઃܭख๏ #&. 00$44 4."$44 IUUQCMPHSVFEBQDPNCMPDLFMFNFOUNPEJpFS IUUQTBQQDPEFHSJEOFUFOUSZPPDTT IUUQTBQQDPEFHSJEOFUFOUSZTNBDTT

    $44ʹ͸༏ઌ౓͕ଘࡏ͍ͯͯ͠૊Έ߹ΘͤʹΑͬͯมΘΔͷͰ ͜ΕΛҙ͍ࣝͯ͠ͳ͍ͱࢦఆ͕൓ө͞Εͳ͍ͱ͔ҙਤ͠ͳ͍ͱ͜Ζʹ൓ө ͞ΕΔͱ͔͕ى͜Γ·͢ɻ IUUQXXXBUNBSLJUDPKQBJUBSUJDMFTOFXTIUNM
  5. ελΠϧΛ͋ͯΔʢ4$44 $44ʣ TDTTΛॻ͘ TDTTͰͰ͖Δ͜ͱ ɾωετʢೖΕࢠʣʹͰ͖Δ ɾ਌ηϨΫλΛࢀর  ɾม਺͕࢖͑Δ  ɾ!FYUFOE

    ɾ!NJYJO ɾϓϨʔεϗϧμʔηϨΫλ  ɾϑΝΠϧ෼ׂՄೳ ɾΞϯμʔόʔʢ@ʣΛ෇͚ΔͱDTTϑΝΠϧʹग़ྗ͞Εͳ͍
  6. ελΠϧΛ͋ͯΔʢ4$44 $44ʣ TDTTΛॻ͘ TDTTͷ෼͚ํ *5$44ͱ͍͏ઃܭख๏ͷ෼͚ํΛ࠾༻͍ͯ͠Δɻ TFUUJOH UPPMT HFOFSJD CBTF PCKFDUT

    DPNQPOFOUT USVNQT ϓϦϓϩηοαͰར༻͢Δάϩʔόϧม਺΍શମͷઃఆ ϓϦϓϩηοαͰར༻͢ΔNJYJO΍GVODUJPOͳͲ ϦηοτDTT ཁૉܕηϨΫλ ϑΥϯτɺϘλϯɺϑΥʔϜɺΞΠίϯ౳ ίϯϙʔωϯτɺϖʔδ͝ͱͱ͸ݶΒͳ͍ ϔϧύʔ