CodePen: Making your portfolio

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