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

CodePen: Making your portfolio

CodePen: Making your portfolio

Masateru YOSHIMURA

August 03, 2020
Tweet

More Decks by Masateru YOSHIMURA

Other Decks in Technology

Transcript

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

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

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

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

    ˜:PVS/BNF <div class="content-body"> ຊจɺຊจ಺Ͱ༻͍Δը૾ </div> <div class="content-footer"> Ұཡϖʔδʹ΋ͲΔϘλϯɺؔ࿈ϖʔδ </div> ϓϩδΣΫτ໊ ΋ͲΔ ݪଇͱͯ͠ɺ Ұཡϖʔδͱ͸ ҟͳΔDMBTT໊Λ༻͍Δ͜ͱɻ ϨΠΞ΢τ่ΕͷݪҼͱͳΔɻ ٯʹɺଞͷৄࡉϖʔδͱ͸ ڞ௨ͷDMBTT໊Λ༻͍Δ͜ͱɻ ྫ͑͹ɺQSPKFDUIUNMͱQSPKFDUIUNMͰ͸ ಉ͡DMBTT໊Λ༻͍Δɻ