デザインを見ながらフロントエンドコーディングをするときの考え方 / design-coding

σβΠϯΛݟͳ͕ΒϑϩϯτΤϯυ ίʔσΟϯάΛ͢Δͱ͖ͷߟ͑ํ WEBΤϯδχΞษڧձ #15 Koichi Nagaoka

ࣗݾ঺հ ௕Ԭ ߒҰ (@kkoudev) גࣜձࣾϛΫγΟͰΤϯδχΞ΍ͬͯ·͢ɻ ओʹiOS/AndroidΞϓϦɺϑϩϯτΤϯυɺό οΫΤϯυɺΠϯϑϥΛ࡞͍ͬͯΔਓͰ͢ɻ

͜ΜͳαʔϏεΛ࡞͍ͬͯ·͢

͜ΜͳαʔϏεΛ࡞͍ͬͯ·͢ ࠓճ͸mocriͷLPͷσβΠϯΛྫʹ σβΠϯ͔ΒίʔσΟϯάΛ͢Δࡍͷجຊతͳߟ͑ํΛ঺հ͠·͢

ࡢࠓͷWebαΠτσβΠϯ 1. WebαΠτͷσβΠϯ͸PC൛ɺSP൛ͷ͕̎ͭ͋Δɻ͜ ΕʹTablet൛΋߹Θͤͯ࡞Δ৔߹΋͋Δ 2. ϨεϙϯγϒσβΠϯͰ͋Δ

ϨεϙϯγϒσβΠϯͱ͸… σόΠεͷը໘αΠζʹ Ԡͯ͡ද͕ࣔ࠷దԽ͞Ε ΔσβΠϯͷ͜ͱ

σβΠϯ (PC൛)

σβΠϯ (SP൛)

σβΠϯ … ݻఆ෯ ϨεϙϯγϒσβΠϯ … Մม෯

Ͳ͏΍ͬͯίʔσΟϯά͢Ε͹ ͍͍ͷ͔

ࠓ೔ͷΞδΣϯμ 1. ίʔσΟϯάͰσβΠϯ͢ΔͨΊͷجૅ 2. ϨεϙϯγϒσβΠϯʹ͓͚Δલఏͱߟ͑ํ 3. ϨεϙϯγϒσβΠϯʹ͓͚Δදࣔͷ੾Γସ͑ 4. ίʔσΟϯάʹؔ͢ΔTIPS

1. ίʔσΟϯάͰσβΠϯ͢ΔͨΊͷ جૅ

σβΠϯΛݟͳ͕Βίʔσ Οϯά͢Δ৔߹ɺ·ͣྖҬ ΛݟۃΊΔ͜ͱ͕େࣄʂ

σβΠϯΛݟͯྖҬΛݟۃΊ·͢

σβΠϯΛݟͯྖҬΛݟۃΊ·͢ ݘ͕̐ඖ͍·͢

σβΠϯΛݟͯྖҬΛݟۃΊ·͢ 1ඖ͓ֆඳ͖͍ͯ͠·͢

σβΠϯΛݟͯྖҬΛݟۃΊ·͢ ࠨଆʹΞϓϦͷϩΰͱετΞ΁ͷόφʔɺӈଆʹݘ̐ඖ͍·͢

σβΠϯΛݟͯྖҬΛݟۃΊ·͢ Α͘ݟͨΒ্ʹϔομ΋͋Γ·͢

σβΠϯΛݟͯྖҬΛݟۃΊ·͢ ͓ֆ͔͖͍ͯ͠Δݘ͕ص୅ΘΓʹ࢖͍ͬͯΔΦϨϯδͷྖҬ΋͋Γ·͢

σβΠϯΛݟͯྖҬΛݟۃΊ·͢ ϩΰ΍ݘ͕ͨͪදࣔ͞Ε͍ͯΔͱ͜Ζ΋ྖҬͱͯ۠͠੾Εͦ͏Ͱ͢Ͷ

ݟۃΊͨྖҬ͸ͦͷ··λάʹͳΔ ྖҬ͸div΍sectionͱ͍ͬͨλάʹͳΓ·͢ɻ ίʔσΟϯάͷجຊ͸͜ͷྖҬΛ·ܾͣΊΔ ͜ͱʹ͋ΓɺͦͷྖҬ಺Ͱ֤ཁૉ͕ͲͷҐஔ ʹདྷΔͷ͔Λௐ੔͢Δ(ͦͷͨΊʹߋʹྖҬΛ ۠੾Δ͜ͱ΋͋Δ)ͱ͍͏ͷ͕جຊతͳߟ͑ํ ʹͳΓ·͢ɻ

2. ϨεϙϯγϒσβΠϯʹ͓͚Δલఏ ͱߟ͑ํ

ϨεϙϯγϒσβΠϯͰ͸ ଟ਺ͷσόΠε෯ʹద߹ͤ͞ ΔͨΊʹɺྖҬ͕Մม෯ʹ ͳΔલఏΛҙࣝ͢Δ

վΊͯσβΠϯΛݟͯΈ·͢

σβΠϯ͸ݻఆ෯Ͱ͢ width: 1366px;

΋͜͠ͷݻఆ෯ͷ··࡞ͬͯ͠·͏ͱ… width: 1366px;

ԣεΫϩʔϧόʔ͕ग़ͯ͠·͍·͢ 13ΠϯνσΟεϓϨΠͷαΠζͰΈͨͱ͖ ݻఆ෯ͷίϯςϯπ͕ σΟεϓϨΠαΠζΑ Γେ͖͍ͱɺԣεΫ ϩʔϧόʔ͕ग़ͯ͠· ͏ʂ width: 1366px;

෯ͷࢦఆΛൺ཰ʹͯ͠Έ·͢ 13ΠϯνσΟεϓϨΠͷαΠζͰΈͨͱ͖ width: 100%;

Ͱ΋ԣεΫϩʔϧόʔ͕ग़·͢ 13ΠϯνσΟεϓϨΠͷαΠζͰΈͨͱ͖ width: 100%; ྖҬ಺ͷίϯςϯπ͕ ·ͩݻఆ෯ͩͬͨʂ

ྖҬ಺ίϯςϯπ΋ൺ཰Λࢦఆ͠·͢ 13ΠϯνσΟεϓϨΠͷαΠζͰΈͨͱ͖ width: 100%; width: 80%; width: 40%; width: 60%;

͍͍ײ͡ʹͳΓ·ͨ͠ 13ΠϯνσΟεϓϨΠͷαΠζͰΈͨͱ͖ width: 100%; width: 80%; width: 40%; width: 60%;

ൺ཰ࢦఆʹΑΓՄม෯Λ࣮ݱ͢Δ ঺հͨ͠ํ๏͸ϦΩουɾϨΠΞ΢τͱݺ͹ ΕΔख๏ͰɺϨεϙϯγϒσβΠϯʹ͓͍ͯ ඇৗʹΑ͘࢖ΘΕΔख๏Ͱ͢ɻ ֤ྖҬͱίϯςϯπΛൺ཰ࢦఆ͢Δ͜ͱͰɺ σόΠεʹґଘ͠ͳ͍ྖҬ෯Λ࣮ݱ͢Δ͜ͱ ͕ग़དྷΔΑ͏ʹͳΓ·͢ɻ

3. ϨεϙϯγϒσβΠϯʹ͓͚Δදࣔ ͷ੾Γସ͑

ϦΩουɾϨΠΞ΢τͷ໰୊ ൺ཰ࢦఆ͓͚ͯ͠͹શ্͕ͯख͍͘͘ͷ͔ͱ ݴ͏ͱͦ͏͍͏Θ͚Ͱ͸͋Γ·ͤΜɻ

ۃ୺ͳྫ

ۃ୺ͳྫ width: 100%; ֤ཁૉʹൺ཰ࢦఆରԠͨ͠PCσβΠϯΛiPhone8ͷσΟεϓϨΠαΠζͰݟͯΈ·͢

ը૾͕খ͘͞ͳΓ͓͔͗ͯ͘͢͠ͳΓ·͢ width: 100%; ※͋͘·Ͱۃ୺ͳྫͰ͢ɻ

ը૾ͷൺ཰ࢦఆ͸σόΠε෯͕ۃ୺ʹ૝ఆ ͔ΒҳΕͯ͠·͏ͱϨΠΞ΢τ่͕յ͢Δ ը૾͸ΞεϖΫτൺΛҡ࣋͠Α͏ͱ͢Δͱɺ ෯͚ͩͰͳ͘ߴ͞΋มԽ͠·͢ɻͦͷͨΊɺ දࣔҐஔ͕ͣΕͯ͠·͍ɺϨΠΞ΢τ่͕Ε ͯ͠·͏ͷͰ͢ʂ

ը૾ʹ͸࠷খ෯΍࠷େ෯Λઃఆ͓ͯ͘͠ ͜ͷΑ͏ͳ໰୊Λ๷͙ʹ͸ɺը૾ʹ͸࠷খ෯ (min-width)΍࠷େ෯(max-width)Λઃఆͯ͠ɺ ૝ఆҎ্ʹখ͘͞orେ͖͘ͳΒͳ͍Α͏ʹ͢ Δඞཁ͕͋Γ·͢ɻ͋Δఔ౓͸͜ΕͰ๷͛· ͢ɻ

ͨͩ͠ɺͦΕͰ΋ݶ౓ͱ͍͏ ΋ͷ͕͋Γ·͢ɻ ͜͏ͳΔͱཁૉͷϨΠΞ΢ τΛม͑ͳ͍ͱ͍͚·ͤ Μɻ

΍ͬͱग़͖ͯͨSPσβΠϯ

΍ͬͱग़͖ͯͨSPσβΠϯ SPʹ࠷దԽ͞ΕͨϨΠΞ΢τ ʹͯ͠͠·͑͹ɺൺ཰ࢦఆʹ Αͬͯը૾͕ۃ୺ʹখ͘͞ͳΔ ໰୊΋๷͛Δʂʂ

΍ͬͱग़͖ͯͨSPσβΠϯ PCσβΠϯͱཁૉΛൺֱͯ͠ ΈΑ͏

PCσβΠϯͱSPσβΠϯͷൺֱ

PCσβΠϯͱSPσβΠϯͷൺֱ ڞ௨ίϯςϯπͱͦͷҐஔΛ֬ೝ͠·͢

PCσβΠϯͱSPσβΠϯͷൺֱ PCσβΠϯͷݘ͕ͨͪԼʹճΓࠐΊ͹SPσβΠϯͱಉ͡ʹͳΔ͜ͱ͕൑அͰ͖·͢

PCσβΠϯͱSPσβΠϯͷൺֱ flexboxͰflex-directionΛ੾Γସ͑Ε͹؆୯Ͱ͢Ͷ

ϨεϙϯγϒσβΠϯͰ͸ɺ PCσβΠϯͱSPσβΠϯΛڞ௨ཁૉʹண໨ ͯ͠ϨΠΞ΢τมߋ͢Δ ϦΩουɾϨΠΞ΢τͷ՝୊Λղܾ͢ΔͨΊ ʹ͸ɺPCσβΠϯͱSPσβΠϯɺ·ͨ͸ TabletσβΠϯΛ༻ҙͯ͠ద੾ͳσόΠε෯ ͰϨΠΞ΢τΛ੾Γସ͑Δඞཁ͕͋Γ·͢ɻ

ϒϨΠΫϙΠϯτͷઃఆ ϨΠΞ΢τͷ੾Γସ͑ͷج४ʹͳΔ෯Λ ϒϨΠΫϙΠϯτͱݺͼ·͢ɻ ͜ͷϒϨΠΫϙΠϯτ͸Ͳ͏΍ͬͯઃఆ͢Ε ͹ྑ͍ͷͰ͠ΐ͏͔ɻ

վΊͯPCσβΠϯͱSPσβΠϯͷൺֱ

վΊͯPCσβΠϯͱSPσβΠϯͷൺֱ width: 1366px; width: 375px;

Θ͔ͬͨʂ SP͕375pxͷσβΠϯ͔ͩΒ ϒϨΠΫϙΠϯτ͸ 375pxͩʂ

ɾɾɾͱɺ͍ͭߟ͑ͯ͠·͏͔ ΋஌Ε·ͤΜ͕ɺ ͜Ε͸͋·ΓΦεεϝ͠·ͤΜ

ᶃεϚʔτϑΥϯ͸೥ʑσΧ͘ͳΔ iPhone΋Android΋ɺεϚʔτϑΥϯ͸೥ʑͰ ͔͘ͳΓ·͢ɻͦͷͨΊɺεϚʔτϑΥϯͷ σόΠεͦͷ΋ͷͷ෯ΛϒϨΠΫϙΠϯτʹ ࠾༻ͯ͠͠·͏ͱɺ࣍ͷ೥ͷ৽ػछͰ͸ε ϚʔτϑΥϯͳͷʹPCσβΠϯͷϨΠΞ΢τ ʹͳͬͯ͠·͏Մೳੑ͕͋Γ·͢

ᶄPCσβΠϯͷϨΠΞ΢τΛSPσβΠϯ෯ ʹͳΔ·Ͱҡ࣋͢Δͷ͕೉͍͠ ۃ୺ͳྫͰݟͤͨϨΠΞ΢τͷ่յ͸ɺ 375pxΑΓ΋େ͖ͳ෯Ͱطʹى͜Γ࢝Ί· ͢ɻࠓճͷྫͰ͸PCσβΠϯ͸1366px͋Δ ͷͰɺ࣮ʹ1000px΋ͷ෯ΛϦΩουɾϨΠΞ ΢τͰ৐Γ੾Δʹ͸ݶք͕͋Γ·͢ɻ

ϒϨΠΫϙΠϯτ͸༨༟Λ΋ͨͤΔ΂͖ ཁ͸ϒϨΠΫϙΠϯτ͸͋Δఔ౓༨༟Λ࣋ͨ ͤͳ͍ͱ͍͚·ͤΜɻ ͓͢͢ΊͷϒϨΠΫϙΠϯτ͸iPadͷॎํ޲ ෯(768px)ͱԣํ޲෯(1024px)Λج४ͱͨ͠ϒ ϨΠΫϙΠϯτͰ͢ɻ

iPad(λϒϨοτ)ج४ͷϒϨΠΫϙΠϯτྫ SPɹ …ɹ320px ʙ 767px Tabɹ…ɹ768px ʙ 1023px PCɹ …ɹ1024px
ʙ

ʙ ͜ͷϒϨΠΫϙΠϯτ͸iPadͷॎը໘͸Tabදࣔɺԣը໘͸ PCදࣔʹͳΔ͜ͱΛҙ͍ࣝͯ͠·͢ɻͦͯ͠TabΑΓখ͍͞ ͱSPදࣔʹͳΓ·͢ɻ

ʙ ChromeͷDeveloper Toolʹ͓͍ͯ΋768px(Tablet)ɺ 1024px(Laptop)ͱ͍͏Α͏ʹΤϛϡϨʔτը໘ͷαΠζΛ༻ ҙ͍ͯ͠·͢ɻͦͷͨΊίʔσΟϯά֬ೝ΋͠΍͍͢Ͱ͢ʂ

ϒϨΠΫϙΠϯτΛ࢖͑͹ දࣔύλʔϯ͕͍ͭ͘΋࡞ΕΔ Μͩʂ

͋Εɺ΋͔ͯ͠͠σβΠϯ่͕ յ͢Δ෯͝ͱʹϒϨΠΫϙΠϯ τ௥Ճ͠·͘Ε͹؆୯ʹௐ੔Ͱ ͖ΔͷͰ͸ʁ

ɾɾɾͱɺ͍ͭߟ͑ͯ͠·͏͔ ΋஌Ε·ͤΜ͕ɺ ͜Ε͸ͱͯ΋Φεεϝ͠·ͤΜ

ϒϨΠΫϙΠϯτͷ਺ʹϨΠΞ΢τύλʔϯ਺ ϒϨΠΫϙΠϯτΛ࢖͍·͘Ε͹ࡉ͔͍ϨΠΞ΢τ ͕Ͱ͖Δ͔΋͠Ε·ͤΜ͕ɺϓϩάϥϜͰ͍͏ifจ Λ࢖͍·͘Δͷͱಉ͡Ͱύλʔϯ͕๲େʹ૿͑· ͢ɻಛʹେن໛αΠτͩͱͦͷύλʔϯͷଟ͞ʹ༰ қʹमਖ਼Ͱ͖ͳ͘ͳΓ·͢ɻલड़ͷSPɺTabletɺPC ͷ̏ͭΛݪଇͱ͠·͠ΐ͏ʂ

4. ίʔσΟϯάʹؔ͢ΔTIPS

σβΠϯΛݟͳ͕ΒίʔσΟϯ ά͢Δํ๏͸େମΠϝʔδ͕෇ ͍͔ͨͱࢥ͏ͷͰɺ࠷ޙʹίʔ σΟϯάʹؔ͢ΔTIPSΛ͍ͭ͘ ͔঺հ͠·͢

ᶃ ཁૉͷதԝدͤ ίʔσΟϯάΛҰ౓Ͱ΋ܦݧͨ͠ਓ͕ඞͣϋϚΔͱ ݴΘΕ͍ͯΔཁૉͷதԝدͤͰ͢ɻflexbox͕ओྲྀͱ ͳͬͨࠓɺશͯΛ೺Ѳ͢Δඞཁੑ΋গͳ͘ͳ͖ͬͯ ·͕ͨ͠ɺIE11΍Androidͷݹ͍୺຤ͷඪ४ϒϥ΢ βͳͲɺϨΨγʔରԠΛ͢Δࡍʹ͸஌͓͍ͬͯͯଛ ͸ͳ͍ͨΊ͍͔ͭ͘঺հ͠·͢ɻ(flexbox͸؆୯ͳ ͷͰ͜͜Ͱ͸আ͖·͢)

ᶃ-1 ཁૉͷԣͷதԝدͤ (ΠϯϥΠϯཁૉ) ΠϯϥΠϯཁૉ(display: inlineɺinline-blockɺinline- flexͱ͍ͬͨཁૉ)͸ text-align: center Ͱதԝدͤ ͕ग़དྷ·͢ɻ

ᶃ-1 ཁૉͷԣͷதԝدͤ (ΠϯϥΠϯཁૉ) .text-area { width: 200px; } .text {
width: 100%; text-align: center; } <div class="text-area"> <p class="text">ςετͰ͢<br>ͯ͢ͱͰ͢</p> </div> CSS HTML

ᶃ-1 ཁૉͷԣͷதԝدͤ (ΠϯϥΠϯཁૉ) .text-area { width: 200px; } .text {
width: 100%; text-align: center; } <div class="text-area"> <p class="text">ςετͰ͢<br>ͯ͢ͱͰ͢</p> </div> CSS HTML .text-area ͷྖҬ಺Ͱ .text ͕ԣʹηϯλϦϯά͞Ε·͢

ᶃ-1 ཁૉͷԣͷதԝدͤ (ϒϩοΫཁૉ) ϒϩοΫཁૉ(display: blockͷཁૉ)͸਌ཁૉͷ෯͕ ໌ࣔతʹࢦఆ͞Ε͍ͯΔ৔߹ɺmargin: 0 auto Λ ࢖ͬͯதԝدͤͰ͖·͢ɻ

ᶃ-1 ཁૉͷԣͷதԝدͤ (ϒϩοΫཁૉ) .text-area-container { display: block; width: 600px; }
.text-area { display: block; width: 200px; margin: 0 auto; } .text { width: 100%; text-align: center; } <div class="text-area-container"> <div class="text-area"> <p class="text">ςετͰ͢<br>ͯ͢ͱͰ͢</p> </div> </div> CSS HTML

ᶃ-1 ཁૉͷԣͷதԝدͤ (ϒϩοΫཁૉ) .text-area-container { display: block; width: 600px; }
.text-area { display: block; width: 200px; margin: 0 auto; } .text { width: 100%; text-align: center; } <div class="text-area-container"> <div class="text-area"> <p class="text">ςετͰ͢<br>ͯ͢ͱͰ͢</p> </div> </div> CSS HTML .text-area ͷྖҬ͕ .text-area-container ͷྖҬ಺ͰԣʹηϯλϦϯά͞Ε·͢

ᶃ-2 ཁૉͷॎͷதԝدͤ ίʔσΟϯάͰΑ͘ϋϚΔͷ͕͜ͷॎͷதԝدͤͰ ͢ɻԣͷதԝدͤͷΑ͏ʹ༥௨͕͖͔ͳ͍έʔε͕ ଟ͘ɺ·ͨϒϥ΢βґଘͷ᠘΋ଟ͘ଘࡏ͠·͢ɻ

ᶃ-2 ཁૉͷॎͷதԝدͤ (transformΛ࢖͏) flexboxΛআ͚͹࠷΋؆୯ʹॎͷதԝدͤΛ࣮ݱग़དྷ Δͷ͕͜ͷ trasnform Λ࢖͏ํ๏Ͱ͢ɻߴ͕ܾ͞ ·͍ͬͯͳ͍ཁૉ΋ॎதԝʹدͤΒΕΔͷͰ൚༻ੑ ͕ߴ͍Ͱ͢ɻ(ԣ΋ग़དྷ·͢)

ᶃ-2 ཁૉͷॎͷதԝدͤ (transformΛ࢖͏) .text-area-container { position: relative; display: block; width:
600px; height: 320px; } .text-area { position: absolute; top: 50%; display: block; width: 200px; transform: translateY(-50%); } .text { width: 100%; text-align: center; } <div class="text-area-container"> <div class="text-area"> <p class="text">ςετͰ͢<br>ͯ͢ͱͰ͢</p> </div> </div> CSS HTML

ᶃ-2 ཁૉͷॎͷதԝدͤ (transformΛ࢖͏) .text-area-container { position: relative; display: block; width:
600px; height: 320px; } .text-area { position: absolute; top: 50%; display: block; width: 200px; transform: translateY(-50%); } .text { width: 100%; text-align: center; } <div class="text-area-container"> <div class="text-area"> <p class="text">ςετͰ͢<br>ͯ͢ͱͰ͢</p> </div> </div> CSS HTML .text-area ͕ .text-area-container ͷྖҬ಺ͰॎʹηϯλϦϯά͞Ε·͢

ᶃ-2 ཁૉͷॎͷதԝدͤ (ϘλϯͷςΩετ) ϘλϯͷσβΠϯʹ͓͍ͯςΩετ͸ॎԣʹதԝد ͤ͞Ε͍ͯΔέʔε͕ຆͲͰ͢ɻϘλϯͷΑ͏ʹڱ ͍ྖҬ͔ͭ෯͕΄΅ݻఆʹͳΓ΍͍͢ྖҬ͸ɺݫີ ʹ͸தԝدͤͰ͸͋Γ·ͤΜ͕ padding Λ࢖ͬͯ ্Լʹಉ͡ύσΟϯάΛࢦఆ͢Δͱॎதԝʹدͬͯ
͍ΔΑ͏ʹݟͤΒΕ·͢ɻՃ͑ͯςΩετ͕ෳ਺ߦ ʹͳͬͯ΋໰୊͕ͳ͍ͷͱɺԿΑΓ؆୯Ͱ͢ʂ

.button { display: inline-block; width: 200px; padding: 16px 8px; background-color:
#00b8b5; border-radius: 50px; text-align: center; color: #fff; font-weight: bold; text-decoration: none; } <a href="https://mocri.jp" class="button">mocriެࣜαΠτ</a> CSS HTML ᶃ-2 ཁૉͷॎͷதԝدͤ (ϘλϯͷςΩετ)

.button { display: inline-block; width: 200px; padding: 16px 8px; background-color:
#00b8b5; border-radius: 50px; text-align: center; color: #fff; font-weight: bold; text-decoration: none; } <a href="https://mocri.jp" class="button">mocriެࣜαΠτ</a> CSS HTML .button ྖҬ಺ͰςΩετ͕ॎʹηϯλϦϯά͞Ε͍ͯΔ͔ͷΑ͏ʹදࣔ͞Ε·͢ ᶃ-2 ཁૉͷॎͷதԝدͤ (ϘλϯͷςΩετ)

ᶄ float͸΋͏࢖Θͳͯ͘Α͍ ࡢࠓͷϒϥ΢β͕ flexbox ʹ΄΅׬શରԠͨ͠ࠓɺ float͸ར༻͠ͳͯ͘΋ϨΠΞ΢τΛ࡞੒͢Δ͜ͱ͕ ग़དྷ·͢ɻfloat͸ position: absolute ͱಉ͡Ͱߴ͞
Λ 0 ʹͯ͠͠·͏ˍύϑΥʔϚϯε΋flexboxʹൺ΂ Δͱѱ͍ͨΊɺfloat͸΋͏๨Εͯ͠·͍·͠ΐ͏ɻ

ᶅ ૷০໨తͷը૾ʹ͸ٙࣅཁૉΛ࢖͏ Α͋͘ΔΞϯΧʔϦϯΫͷԣʹදࣔ͞Ε͍ͯΔ໼ҹ ΍֎૭ͷΞΠίϯͷΑ͏ͳը૾͸ͦͷ౎౓imgλά ΍ۭͷspanλάͳͲΛଧͬͯελΠϧΛ෇͚͍ͯΔ ͱHTML΍CSS͕ෳࡶԽ͠΍͘͢େมͰ͢ɻ͜ͷΑ ͏ͳέʔε͸λάΛ௥Ճͤͣɺٙࣅཁૉ(::before ΍::after)Λੵۃతʹ࢖ͬͯը૾Λૠೖ͢ΔΑ͏ʹ͠ ·͠ΐ͏ʂ

͓·͚

៉ྷͳίʔσΟϯάΛ໨ࢦ͢ʹ͸σβΠϯ ͷجຊϧʔϧɾઃܭ΋஌Δඞཁ͕͋Δ ࣮͸Ҏલൃදͨ͜͠Εˣʹ·ͱΊͯ·͢ʂ https://speakerdeck.com/kkoudev/frontend-markup-design-basics

៉ྷͳίʔσΟϯάΛ໨ࢦͨ͋͠ͱ͸ύϑ ΥʔϚϯε΋ҙࣝ͢Δඞཁ͕͋Δ ࣮͸Ҏલൃදͨ͜͠Εˣʹ·ͱΊͯ·͢ʂ https://speakerdeck.com/kkoudev/frontend-pagespeed-insights

͜ΕΒʹै͍ͭͭରԠ͢Ε͹͜Ε͘Β͍ͷεί Ξ͕Ͱ·͢ɻੋඇ࣮ફͯ͠Έ͍ͯͩ͘͞ʂ

·ͱΊ

σβΠϯΛݟͳ͕ΒίʔσΟϯά͢Δͷ͸ ݁ہ׳Ε͕ඞཁͰ͢ ࠓճ঺հͨ͠ϙΠϯτΛཹҙͨ͠ͱ͜ΖͰɺٸʹͰ ͖ΔΑ͏ʹ͸ͳΓ·ͤΜɻ݁ہ͸͍͔ͭ͘΍ͬͯΈ Δ͜ͱͰײ֮Λ͔ͭΊΔΑ͏ʹͳΓ΍͍͢ͷͰɺࠓ ·ͰσβΠφʔ΍ϚʔΫΞοϓΤϯδχΞʹ͓ئ͍ ͍ͯͨ͠ίʔσΟϯάΛඇϚʔΫΞοϓΤϯδχΞ ͷਓ΋Ҿ͖औͬͯ௅ઓͯ͠Έ͍ͯͩ͘͞ɻ

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠

デザインを見ながらフロントエンドコーディングをするときの考え方 / design-coding

デザインを見ながらフロントエンドコーディングをするときの考え方 / design-coding

More Decks by Kou

Other Decks in Design

Featured

Transcript