CodePen: Making your portfolio

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Λॻ͍ͯΈΑ͏ɻ