CodePen: Making your portfolio

CodePen: Making your portfolio

91e7aee9769836f448a9f1ce91255749?s=128

Masateru YOSHIMURA

August 03, 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Ͱ໊લΛ͚ͭΔɻ ࣗݾ঺հ ϩΰ

    ˜:PVS/BNF ࡞඼ɾϓϩδΣΫτ ϊʔτ <section id=“project"> ࡞඼ɾϓϩδΣΫτ΁ͷ༠ಋ </section> <section id=“note"> ϊʔτ΁ͷ༠ಋ </section> Ұཡϖʔδ͸ ৄࡉϖʔδ΁ͷ ༠ಋ܎ɻ ҰཡϖʔδͰ͸ ৄ͘͠આ໌͠ͳ͍ɻ TFDUJPOλάΛ༻͍ͯɺͭͷηΫγϣϯʹ෼͚ΔɻEJWλάΛ࢖ͬͯ΋ྑ͍ɻ
  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.  ·ͣɺ1SPKFDUͰશମͷࠎࢠ͚ͩΛ࡞Δɻ  ϖʔδ಺ͷύʔπ΍಺༰͸1FOͰ࡞੒͢Δɻ  1FOͰ)5.-͚ͩΛॻ͘ɻ$44͸͋Δఔ౓)5.-͕Ͱ͖͔ͯΒɻ  1FOʹ࡞੒ͨ͠)5.-$44Λ1SPKFDUͷϖʔδʹίϐϖͯ͠ू໿͢Δɻ શମͷߏ੒͕Θ͔ͬͨͱ͜ΖͰ)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Λॻ͍ͯΈΑ͏ɻ