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

CodePen: Making your portfolio 2021

91e7aee9769836f448a9f1ce91255749?s=47 Masateru YOSHIMURA
December 13, 2020
89

CodePen: Making your portfolio 2021

91e7aee9769836f448a9f1ce91255749?s=128

Masateru YOSHIMURA

December 13, 2020
Tweet

Transcript

  1. ෳ਺ϖʔδͷ΢ΣϒαΠ τ ʢ࣮ફฤʣ ʮϙʔτϑΥϦΦαΠτΛͭ͘Δʯ

  2. ࣗݾ঺հ ϩΰ ˜:PVS/BNF ࡞඼ɾϓϩδΣΫτ ϊʔτ τοϓϖʔδʢҰཡϖʔδʣ JOEFYIUNM ΢ΣϒαΠτͷશମߏ੒ɿ߹ܭϖʔδ͸ʙϖʔδʹͳΔΑ͏ʹ͍ͯͩ͘͠͞ ʙϖʔδ ϦϯΫ

    ϦϯΫ ࣗݾ঺հ ϩΰ ˜:PVS/BNF ϓϩδΣΫτ໊ ϩΰ ˜:PVS/BNF ࣗݾ঺հʢৄࡉϖʔδʣ QSPpMFIUNM ࡞඼ɾϓϩδΣΫτʢৄࡉϖʔδʣ QSPKFDUIUNMʙQSPKFDUIUNM ʙϖʔδ هࣄλΠτϧ ϩΰ ˜:PVS/BNF ϊʔτʢৄࡉϖʔδʣ OPUFIUNMʙOPUFIUNM ϦϯΫ ϖʔδ ˞ϖʔδ਺͸ଟ͍ํ͕ߴධՁʹͳΓ·͢
  3. ϝΠϯ ϔομʔ ϖʔδ಺ͷ)5.-ߏ੒ɿશϖʔδڞ௨ ϑολʔ )5.- ਤ <header> ϩΰ΍φϏήʔγϣϯ͕ೖΔ </header> <main>

    ֤ϖʔδͷ಺༰͕ೖΔ </main> <footer> ஶ࡞ݖදه΍φϏήʔγϣϯ͕ೖΔ </footer>
  4. ϖʔδ಺ͷ)5.-ߏ੒ɿҰཡϖʔδ )5.- ਤ <section id="profile"> ࣗݾ঺հϖʔδ΁ͷ༠ಋ </section> ֤ηΫγϣϯΛࣝผ͢ΔͨΊʹJEͰ໊લΛ͚ͭΔɻ <section id="project">

    ࡞඼ɾϓϩδΣΫτ΁ͷ༠ಋ </section> <section id="note"> ϊʔτ΁ͷ༠ಋ </section> Ұཡϖʔδ͸ ৄࡉϖʔδ΁ͷ ༠ಋ܎ɻ ҰཡϖʔδͰ͸ ৄ͘͠આ໌͠ͳ͍ɻ TFDUJPOλάΛ༻͍ͯɺͭͷηΫγϣϯʹ෼͚ΔɻEJWλάΛ࢖ͬͯ΋ྑ͍ɻ ࣗݾ঺հ ϩΰ ˜:PVS/BNF ࡞඼ɾϓϩδΣΫτ ϊʔτ
  5. ϖʔδ಺ͷ)5.-ߏ੒ɿৄࡉϖʔδ )5.- ਤ <div class="content-header"> λΠτϧ΍αϒλΠτϧɺϝΠϯը૾ </div> ελΠϦϯάΛ͠΍͍͢Α͏ʹɺ ίϯςϯπΛʮ಄ɾମɾ଍ʯͷͭͷ෦෼ʹ෼͚Δɻ ϩΰ

    ˜:PVS/BNF <div class="content-body"> ຊจɺຊจ಺Ͱ༻͍Δը૾ </div> <div class="content-footer"> Ұཡϖʔδʹ΋ͲΔϘλϯɺؔ࿈ϖʔδ </div> ϓϩδΣΫτ໊ ΋ͲΔ ݪଇͱͯ͠ɺ Ұཡϖʔδͱ͸ ҟͳΔDMBTT໊Λ༻͍Δ͜ͱɻ ϨΠΞ΢τ่ΕͷݪҼͱͳΔɻ ٯʹɺଞͷৄࡉϖʔδͱ͸ ڞ௨ͷDMBTT໊Λ༻͍Δ͜ͱɻ ྫ͑͹ɺQSPKFDUIUNMͱQSPKFDUIUNMͰ͸ ಉ͡DMBTT໊Λ༻͍Δɻ
  6. w·ͣɺ1SPKFDUͰશମͷࠎࢠ͚ͩΛ࡞Δɻ wϖʔδ಺ͷύʔπ΍಺༰͸1FOͰ࡞੒͢Δɻ w1FOͰ)5.-͚ͩΛॻ͘ɻ$44͸͋Δఔ౓)5.-͕Ͱ͖͔ͯΒɻ w1FOʹ࡞੒ͨ͠)5.-$44Λ1SPKFDUͷϖʔδʹίϐϖͯ͠ू໿͢Δɻ w1SPKFDUͰඍௐ੔Λͯ͠׬੒ʂ શମͷߏ੒͕Θ͔ͬͨͱ͜ΖͰ)5.-Λॻ͍͍ͯ͜͏ ͨͩ͠ɺ $PEF1FOͷ1SPKFDU͸ฤूը໘͕ڱ͍ͨΊ࡞ۀ͕΍Γʹ͍͘ɻ ࣍ͷΑ͏ʹਐΊΑ͏ɻ

  7. खॱɿ1SPKFDUʹɺશମͷࠎࢠ͚ͩΛ࡞Δ ςΩετ͕ දࣔ͞ΕΔ͜ͱΛ ֬ೝɻ CPEZλάͷؒʹ IFBEFS NBJO GPPUFSͷͭͷλάΛ࡞੒͢Δɻ Ҏલʹ࿅शͰ࡞੒ͨ͠ ίʔυ͸࡟আͯ͠ྑ͍ɻ

    ͜ͷ࡞ۀ͸৻ॏʹ͢Δɻ ಛʹɺCPEZ΍IUNMΛޡͬͯফ͞ͳ͍Α͏ʹ஫ҙ͢Δɻ
  8. खॱɿ1FOΛ༻͍ͯɺશϖʔδڞ௨ͷύʔπΛ࡞੒͢Δ ͜ͷ࣌఺ͰϦϯΫ͸ػೳ͠ͳ͍ɻϦϯΫͷ֬ೝ͸1SPKFDUͷ΄͏Ͱߦ͏ɻ ϔομʔ ը૾ͷ৔߹ ͱΓ͋͑ͣ ςΩετͰೖΕ͓͍ͯͯ ͋ͱ͔Β ը૾ʹࠩ͠ସ͑ͯ΋0, ϔομʔ ςΩετͷ৔߹

    ϑολʔ
  9. खॱɿ1FOΛ༻͍ͯɺτοϓϖʔδͷ಺༰Λ࡞੒͢Δ ςΩετ΍ը૾͕ දࣔ͞ΕΔ͜ͱΛ ֬ೝɻ ͜ͷ࣌఺ͰϦϯΫ͸ػೳ͠ͳ͍ɻϦϯΫͷ֬ೝ͸1SPKFDUͷ΄͏Ͱߦ͏ɻ NBJOλάͷ தʹೖΔ )5.-Λॻ͘ɻ $44͸·ͩ ॻ͔ͳͯ͘Α͍

    ਽ܗͱͳΔ)5.-͸ αϯϓϧΛίϐϖͯ͠ ར༻͢Ε͹Α͍ɻ ·ͩ४උ͕ Ͱ͖͍ͯͳ͍ͱ͜Ζ͸ μϛʔσʔλͰ΋0,
  10. खॱɿ1FOΛ༻͍ͯɺৄࡉϖʔδͷ಺༰Λͭ࡞੒͢Δ NBJOλάͷ தʹೖΔ )5.-Λॻ͘ɻ ςΩετ΍ը૾͕ දࣔ͞ΕΔ͜ͱΛ ֬ೝɻ ͜ͷ࣌఺ͰϦϯΫ͸ػೳ͠ͳ͍ɻϦϯΫͷ֬ೝ͸1SPKFDUͷ΄͏Ͱߦ͏ɻ $44͸·ͩ ॻ͔ͳͯ͘Α͍ɻ

    ਽ܗͱͳΔ)5.-͸ αϯϓϧΛίϐϖͯ͠ ར༻͢Ε͹Α͍ɻ
  11. खॱɿ׬੒ͨ͠ৄࡉϖʔδͷ1FOΛ'PSLͯ͠ผͷϖʔδʹೖΔ಺༰Λ࡞Δ )5.-λά͸ ͦͷ··ʹͯ͠ )5.-ͷத਎Λ ࠩ͠ସ͍͑ͯ͘ɻ ςΩετ΍ը૾͕ දࣔ͞ΕΔ͜ͱΛ ֬ೝɻ ৄࡉϖʔδͷ ίϯςϯπ͕

    ͭ΄Ͳ ४උͰ͖ͨΒ $44Λॻ͍ͯΈΑ͏ɻ