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

Transcript

1. σβΠϯΛݟͳ͕ΒϑϩϯτΤϯυ ίʔσΟϯάΛ͢Δͱ͖ͷߟ͑ํ WEBΤϯδχΞษڧձ #15 Koichi Nagaoka
2. ࣗݾ঺հ ௕Ԭ ߒҰ (@kkoudev) גࣜձࣾϛΫγΟͰΤϯδχΞ΍ͬͯ·͢ɻ ओʹiOS/AndroidΞϓϦɺϑϩϯτΤϯυɺό οΫΤϯυɺΠϯϑϥΛ࡞͍ͬͯΔਓͰ͢ɻ
3. ͜ΜͳαʔϏεΛ࡞͍ͬͯ·͢
4. ͜ΜͳαʔϏεΛ࡞͍ͬͯ·͢ ࠓճ͸mocriͷLPͷσβΠϯΛྫʹ σβΠϯ͔ΒίʔσΟϯάΛ͢Δࡍͷجຊతͳߟ͑ํΛ঺հ͠·͢
5. ࡢࠓͷWebαΠτσβΠϯ 1. WebαΠτͷσβΠϯ͸PC൛ɺSP൛ͷ͕̎ͭ͋Δɻ͜ ΕʹTablet൛΋߹Θͤͯ࡞Δ৔߹΋͋Δ 2. ϨεϙϯγϒσβΠϯͰ͋Δ
6. ϨεϙϯγϒσβΠϯͱ͸… σόΠεͷը໘αΠζʹ Ԡͯ͡ද͕ࣔ࠷దԽ͞Ε ΔσβΠϯͷ͜ͱ
7. σβΠϯ (PC൛)
8. σβΠϯ (SP൛)
9. σβΠϯ … ݻఆ෯ ϨεϙϯγϒσβΠϯ … Մม෯
10. Ͳ͏΍ͬͯίʔσΟϯά͢Ε͹ ͍͍ͷ͔
11. ࠓ೔ͷΞδΣϯμ 1. ίʔσΟϯάͰσβΠϯ͢ΔͨΊͷجૅ 2. ϨεϙϯγϒσβΠϯʹ͓͚Δલఏͱߟ͑ํ 3. ϨεϙϯγϒσβΠϯʹ͓͚Δදࣔͷ੾Γସ͑ 4. ίʔσΟϯάʹؔ͢ΔTIPS
12. 1. ίʔσΟϯάͰσβΠϯ͢ΔͨΊͷ جૅ
13. σβΠϯΛݟͳ͕Βίʔσ Οϯά͢Δ৔߹ɺ·ͣྖҬ ΛݟۃΊΔ͜ͱ͕େࣄʂ
14. σβΠϯΛݟͯྖҬΛݟۃΊ·͢
15. σβΠϯΛݟͯྖҬΛݟۃΊ·͢ ݘ͕̐ඖ͍·͢
16. σβΠϯΛݟͯྖҬΛݟۃΊ·͢ 1ඖ͓ֆඳ͖͍ͯ͠·͢
17. σβΠϯΛݟͯྖҬΛݟۃΊ·͢ ࠨଆʹΞϓϦͷϩΰͱετΞ΁ͷόφʔɺӈଆʹݘ̐ඖ͍·͢
18. σβΠϯΛݟͯྖҬΛݟۃΊ·͢ Α͘ݟͨΒ্ʹϔομ΋͋Γ·͢
19. σβΠϯΛݟͯྖҬΛݟۃΊ·͢ ͓ֆ͔͖͍ͯ͠Δݘ͕ص୅ΘΓʹ࢖͍ͬͯΔΦϨϯδͷྖҬ΋͋Γ·͢
20. σβΠϯΛݟͯྖҬΛݟۃΊ·͢ ϩΰ΍ݘ͕ͨͪදࣔ͞Ε͍ͯΔͱ͜Ζ΋ྖҬͱͯ۠͠੾Εͦ͏Ͱ͢Ͷ
21. ݟۃΊͨྖҬ͸ͦͷ··λάʹͳΔ ྖҬ͸div΍sectionͱ͍ͬͨλάʹͳΓ·͢ɻ ίʔσΟϯάͷجຊ͸͜ͷྖҬΛ·ܾͣΊΔ ͜ͱʹ͋ΓɺͦͷྖҬ಺Ͱ֤ཁૉ͕ͲͷҐஔ ʹདྷΔͷ͔Λௐ੔͢Δ(ͦͷͨΊʹߋʹྖҬΛ ۠੾Δ͜ͱ΋͋Δ)ͱ͍͏ͷ͕جຊతͳߟ͑ํ ʹͳΓ·͢ɻ
22. 2. ϨεϙϯγϒσβΠϯʹ͓͚Δલఏ ͱߟ͑ํ
23. ϨεϙϯγϒσβΠϯͰ͸ ଟ਺ͷσόΠε෯ʹద߹ͤ͞ ΔͨΊʹɺྖҬ͕Մม෯ʹ ͳΔલఏΛҙࣝ͢Δ
24. վΊͯσβΠϯΛݟͯΈ·͢
25. σβΠϯ͸ݻఆ෯Ͱ͢ width: 1366px;
26. ΋͜͠ͷݻఆ෯ͷ··࡞ͬͯ͠·͏ͱ… width: 1366px;
27. ԣεΫϩʔϧόʔ͕ग़ͯ͠·͍·͢ 13ΠϯνσΟεϓϨΠͷαΠζͰΈͨͱ͖ ݻఆ෯ͷίϯςϯπ͕ σΟεϓϨΠαΠζΑ Γେ͖͍ͱɺԣεΫ ϩʔϧόʔ͕ग़ͯ͠· ͏ʂ width: 1366px;
28. ෯ͷࢦఆΛൺ཰ʹͯ͠Έ·͢ 13ΠϯνσΟεϓϨΠͷαΠζͰΈͨͱ͖ width: 100%;
29. ෯ͷࢦఆΛൺ཰ʹͯ͠Έ·͢ 13ΠϯνσΟεϓϨΠͷαΠζͰΈͨͱ͖ width: 100%;
30. Ͱ΋ԣεΫϩʔϧόʔ͕ग़·͢ 13ΠϯνσΟεϓϨΠͷαΠζͰΈͨͱ͖ width: 100%; ྖҬ಺ͷίϯςϯπ͕ ·ͩݻఆ෯ͩͬͨʂ
31. ྖҬ಺ίϯςϯπ΋ൺ཰Λࢦఆ͠·͢ 13ΠϯνσΟεϓϨΠͷαΠζͰΈͨͱ͖ width: 100%; width: 80%; width: 40%; width: 60%;
32. ͍͍ײ͡ʹͳΓ·ͨ͠ 13ΠϯνσΟεϓϨΠͷαΠζͰΈͨͱ͖ width: 100%; width: 80%; width: 40%; width: 60%;
33. ൺ཰ࢦఆʹΑΓՄม෯Λ࣮ݱ͢Δ ঺հͨ͠ํ๏͸ϦΩουɾϨΠΞ΢τͱݺ͹ ΕΔख๏ͰɺϨεϙϯγϒσβΠϯʹ͓͍ͯ ඇৗʹΑ͘࢖ΘΕΔख๏Ͱ͢ɻ ֤ྖҬͱίϯςϯπΛൺ཰ࢦఆ͢Δ͜ͱͰɺ σόΠεʹґଘ͠ͳ͍ྖҬ෯Λ࣮ݱ͢Δ͜ͱ ͕ग़དྷΔΑ͏ʹͳΓ·͢ɻ
34. 3. ϨεϙϯγϒσβΠϯʹ͓͚Δදࣔ ͷ੾Γସ͑
35. ϦΩουɾϨΠΞ΢τͷ໰୊ ൺ཰ࢦఆ͓͚ͯ͠͹શ্͕ͯख͍͘͘ͷ͔ͱ ݴ͏ͱͦ͏͍͏Θ͚Ͱ͸͋Γ·ͤΜɻ
36. ۃ୺ͳྫ
37. ۃ୺ͳྫ width: 100%; ֤ཁૉʹൺ཰ࢦఆରԠͨ͠PCσβΠϯΛiPhone8ͷσΟεϓϨΠαΠζͰݟͯΈ·͢
38. ը૾͕খ͘͞ͳΓ͓͔͗ͯ͘͢͠ͳΓ·͢ width: 100%; ※͋͘·Ͱۃ୺ͳྫͰ͢ɻ
39. ը૾ͷൺ཰ࢦఆ͸σόΠε෯͕ۃ୺ʹ૝ఆ ͔ΒҳΕͯ͠·͏ͱϨΠΞ΢τ่͕յ͢Δ ը૾͸ΞεϖΫτൺΛҡ࣋͠Α͏ͱ͢Δͱɺ ෯͚ͩͰͳ͘ߴ͞΋มԽ͠·͢ɻͦͷͨΊɺ දࣔҐஔ͕ͣΕͯ͠·͍ɺϨΠΞ΢τ่͕Ε ͯ͠·͏ͷͰ͢ʂ
40. ը૾ʹ͸࠷খ෯΍࠷େ෯Λઃఆ͓ͯ͘͠ ͜ͷΑ͏ͳ໰୊Λ๷͙ʹ͸ɺը૾ʹ͸࠷খ෯ (min-width)΍࠷େ෯(max-width)Λઃఆͯ͠ɺ ૝ఆҎ্ʹখ͘͞orେ͖͘ͳΒͳ͍Α͏ʹ͢ Δඞཁ͕͋Γ·͢ɻ͋Δఔ౓͸͜ΕͰ๷͛· ͢ɻ
41. ͨͩ͠ɺͦΕͰ΋ݶ౓ͱ͍͏ ΋ͷ͕͋Γ·͢ɻ ͜͏ͳΔͱཁૉͷϨΠΞ΢ τΛม͑ͳ͍ͱ͍͚·ͤ Μɻ
42. ΍ͬͱग़͖ͯͨSPσβΠϯ
43. ΍ͬͱग़͖ͯͨSPσβΠϯ SPʹ࠷దԽ͞ΕͨϨΠΞ΢τ ʹͯ͠͠·͑͹ɺൺ཰ࢦఆʹ Αͬͯը૾͕ۃ୺ʹখ͘͞ͳΔ ໰୊΋๷͛Δʂʂ
44. ΍ͬͱग़͖ͯͨSPσβΠϯ PCσβΠϯͱཁૉΛൺֱͯ͠ ΈΑ͏
45. PCσβΠϯͱSPσβΠϯͷൺֱ
46. PCσβΠϯͱSPσβΠϯͷൺֱ ڞ௨ίϯςϯπͱͦͷҐஔΛ֬ೝ͠·͢
47. PCσβΠϯͱSPσβΠϯͷൺֱ PCσβΠϯͷݘ͕ͨͪԼʹճΓࠐΊ͹SPσβΠϯͱಉ͡ʹͳΔ͜ͱ͕൑அͰ͖·͢
48. PCσβΠϯͱSPσβΠϯͷൺֱ flexboxͰflex-directionΛ੾Γସ͑Ε͹؆୯Ͱ͢Ͷ
49. ϨεϙϯγϒσβΠϯͰ͸ɺ PCσβΠϯͱSPσβΠϯΛڞ௨ཁૉʹண໨ ͯ͠ϨΠΞ΢τมߋ͢Δ ϦΩουɾϨΠΞ΢τͷ՝୊Λղܾ͢ΔͨΊ ʹ͸ɺPCσβΠϯͱSPσβΠϯɺ·ͨ͸ TabletσβΠϯΛ༻ҙͯ͠ద੾ͳσόΠε෯ ͰϨΠΞ΢τΛ੾Γସ͑Δඞཁ͕͋Γ·͢ɻ
50. ϒϨΠΫϙΠϯτͷઃఆ ϨΠΞ΢τͷ੾Γସ͑ͷج४ʹͳΔ෯Λ ϒϨΠΫϙΠϯτͱݺͼ·͢ɻ ͜ͷϒϨΠΫϙΠϯτ͸Ͳ͏΍ͬͯઃఆ͢Ε ͹ྑ͍ͷͰ͠ΐ͏͔ɻ
51. վΊͯPCσβΠϯͱSPσβΠϯͷൺֱ
52. վΊͯPCσβΠϯͱSPσβΠϯͷൺֱ width: 1366px; width: 375px;
53. Θ͔ͬͨʂ SP͕375pxͷσβΠϯ͔ͩΒ ϒϨΠΫϙΠϯτ͸ 375pxͩʂ
54. ɾɾɾͱɺ͍ͭߟ͑ͯ͠·͏͔ ΋஌Ε·ͤΜ͕ɺ ͜Ε͸͋·ΓΦεεϝ͠·ͤΜ
55. ᶃεϚʔτϑΥϯ͸೥ʑσΧ͘ͳΔ iPhone΋Android΋ɺεϚʔτϑΥϯ͸೥ʑͰ ͔͘ͳΓ·͢ɻͦͷͨΊɺεϚʔτϑΥϯͷ σόΠεͦͷ΋ͷͷ෯ΛϒϨΠΫϙΠϯτʹ ࠾༻ͯ͠͠·͏ͱɺ࣍ͷ೥ͷ৽ػछͰ͸ε ϚʔτϑΥϯͳͷʹPCσβΠϯͷϨΠΞ΢τ ʹͳͬͯ͠·͏Մೳੑ͕͋Γ·͢
56. ᶄPCσβΠϯͷϨΠΞ΢τΛSPσβΠϯ෯ ʹͳΔ·Ͱҡ࣋͢Δͷ͕೉͍͠ ۃ୺ͳྫͰݟͤͨϨΠΞ΢τͷ่յ͸ɺ 375pxΑΓ΋େ͖ͳ෯Ͱطʹى͜Γ࢝Ί· ͢ɻࠓճͷྫͰ͸PCσβΠϯ͸1366px͋Δ ͷͰɺ࣮ʹ1000px΋ͷ෯ΛϦΩουɾϨΠΞ ΢τͰ৐Γ੾Δʹ͸ݶք͕͋Γ·͢ɻ
57. ϒϨΠΫϙΠϯτ͸༨༟Λ΋ͨͤΔ΂͖ ཁ͸ϒϨΠΫϙΠϯτ͸͋Δఔ౓༨༟Λ࣋ͨ ͤͳ͍ͱ͍͚·ͤΜɻ ͓͢͢ΊͷϒϨΠΫϙΠϯτ͸iPadͷॎํ޲ ෯(768px)ͱԣํ޲෯(1024px)Λج४ͱͨ͠ϒ ϨΠΫϙΠϯτͰ͢ɻ
58. iPad(λϒϨοτ)ج४ͷϒϨΠΫϙΠϯτྫ SPɹ …ɹ320px ʙ 767px Tabɹ…ɹ768px ʙ 1023px PCɹ …ɹ1024px ʙ
59. iPad(λϒϨοτ)ج४ͷϒϨΠΫϙΠϯτྫ SPɹ …ɹ320px ʙ 767px Tabɹ…ɹ768px ʙ 1023px PCɹ …ɹ1024px ʙ ͜ͷϒϨΠΫϙΠϯτ͸iPadͷॎը໘͸Tabදࣔɺԣը໘͸ PCදࣔʹͳΔ͜ͱΛҙ͍ࣝͯ͠·͢ɻͦͯ͠TabΑΓখ͍͞ ͱSPදࣔʹͳΓ·͢ɻ
60. iPad(λϒϨοτ)ج४ͷϒϨΠΫϙΠϯτྫ SPɹ …ɹ320px ʙ 767px Tabɹ…ɹ768px ʙ 1023px PCɹ …ɹ1024px ʙ ChromeͷDeveloper Toolʹ͓͍ͯ΋768px(Tablet)ɺ 1024px(Laptop)ͱ͍͏Α͏ʹΤϛϡϨʔτը໘ͷαΠζΛ༻ ҙ͍ͯ͠·͢ɻͦͷͨΊίʔσΟϯά֬ೝ΋͠΍͍͢Ͱ͢ʂ
61. ϒϨΠΫϙΠϯτΛ࢖͑͹ දࣔύλʔϯ͕͍ͭ͘΋࡞ΕΔ Μͩʂ
62. ͋Εɺ΋͔ͯ͠͠σβΠϯ่͕ յ͢Δ෯͝ͱʹϒϨΠΫϙΠϯ τ௥Ճ͠·͘Ε͹؆୯ʹௐ੔Ͱ ͖ΔͷͰ͸ʁ
63. ɾɾɾͱɺ͍ͭߟ͑ͯ͠·͏͔ ΋஌Ε·ͤΜ͕ɺ ͜Ε͸ͱͯ΋Φεεϝ͠·ͤΜ
64. ϒϨΠΫϙΠϯτͷ਺ʹϨΠΞ΢τύλʔϯ਺ ϒϨΠΫϙΠϯτΛ࢖͍·͘Ε͹ࡉ͔͍ϨΠΞ΢τ ͕Ͱ͖Δ͔΋͠Ε·ͤΜ͕ɺϓϩάϥϜͰ͍͏ifจ Λ࢖͍·͘Δͷͱಉ͡Ͱύλʔϯ͕๲େʹ૿͑· ͢ɻಛʹେن໛αΠτͩͱͦͷύλʔϯͷଟ͞ʹ༰ қʹमਖ਼Ͱ͖ͳ͘ͳΓ·͢ɻલड़ͷSPɺTabletɺPC ͷ̏ͭΛݪଇͱ͠·͠ΐ͏ʂ
65. 4. ίʔσΟϯάʹؔ͢ΔTIPS
66. σβΠϯΛݟͳ͕ΒίʔσΟϯ ά͢Δํ๏͸େମΠϝʔδ͕෇ ͍͔ͨͱࢥ͏ͷͰɺ࠷ޙʹίʔ σΟϯάʹؔ͢ΔTIPSΛ͍ͭ͘ ͔঺հ͠·͢
67. ᶃ ཁૉͷதԝدͤ ίʔσΟϯάΛҰ౓Ͱ΋ܦݧͨ͠ਓ͕ඞͣϋϚΔͱ ݴΘΕ͍ͯΔཁૉͷதԝدͤͰ͢ɻflexbox͕ओྲྀͱ ͳͬͨࠓɺશͯΛ೺Ѳ͢Δඞཁੑ΋গͳ͘ͳ͖ͬͯ ·͕ͨ͠ɺIE11΍Androidͷݹ͍୺຤ͷඪ४ϒϥ΢ βͳͲɺϨΨγʔରԠΛ͢Δࡍʹ͸஌͓͍ͬͯͯଛ ͸ͳ͍ͨΊ͍͔ͭ͘঺հ͠·͢ɻ(flexbox͸؆୯ͳ ͷͰ͜͜Ͱ͸আ͖·͢)
68. ᶃ-1 ཁૉͷԣͷதԝدͤ (ΠϯϥΠϯཁૉ) ΠϯϥΠϯཁૉ(display: inlineɺinline-blockɺinline- flexͱ͍ͬͨཁૉ)͸ text-align: center Ͱதԝدͤ ͕ग़དྷ·͢ɻ
69. ᶃ-1 ཁૉͷԣͷதԝدͤ (ΠϯϥΠϯཁૉ) .text-area { width: 200px; } .text { width: 100%; text-align: center; } <div class="text-area"> <p class="text">ςετͰ͢<br>ͯ͢ͱͰ͢</p> </div> CSS HTML
70. ᶃ-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 ͕ԣʹηϯλϦϯά͞Ε·͢
71. ᶃ-1 ཁૉͷԣͷதԝدͤ (ϒϩοΫཁૉ) ϒϩοΫཁૉ(display: blockͷཁૉ)͸਌ཁૉͷ෯͕ ໌ࣔతʹࢦఆ͞Ε͍ͯΔ৔߹ɺmargin: 0 auto Λ ࢖ͬͯதԝدͤͰ͖·͢ɻ
72. ᶃ-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
73. ᶃ-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 ͷྖҬ಺ͰԣʹηϯλϦϯά͞Ε·͢
74. ᶃ-2 ཁૉͷॎͷதԝدͤ ίʔσΟϯάͰΑ͘ϋϚΔͷ͕͜ͷॎͷதԝدͤͰ ͢ɻԣͷதԝدͤͷΑ͏ʹ༥௨͕͖͔ͳ͍έʔε͕ ଟ͘ɺ·ͨϒϥ΢βґଘͷ᠘΋ଟ͘ଘࡏ͠·͢ɻ
75. ᶃ-2 ཁૉͷॎͷதԝدͤ (transformΛ࢖͏) flexboxΛআ͚͹࠷΋؆୯ʹॎͷதԝدͤΛ࣮ݱग़དྷ Δͷ͕͜ͷ trasnform Λ࢖͏ํ๏Ͱ͢ɻߴ͕ܾ͞ ·͍ͬͯͳ͍ཁૉ΋ॎதԝʹدͤΒΕΔͷͰ൚༻ੑ ͕ߴ͍Ͱ͢ɻ(ԣ΋ग़དྷ·͢)
76. ᶃ-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
77. ᶃ-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 ͷྖҬ಺ͰॎʹηϯλϦϯά͞Ε·͢
78. ᶃ-2 ཁૉͷॎͷதԝدͤ (ϘλϯͷςΩετ) ϘλϯͷσβΠϯʹ͓͍ͯςΩετ͸ॎԣʹதԝد ͤ͞Ε͍ͯΔέʔε͕ຆͲͰ͢ɻϘλϯͷΑ͏ʹڱ ͍ྖҬ͔ͭ෯͕΄΅ݻఆʹͳΓ΍͍͢ྖҬ͸ɺݫີ ʹ͸தԝدͤͰ͸͋Γ·ͤΜ͕ padding Λ࢖ͬͯ ্Լʹಉ͡ύσΟϯάΛࢦఆ͢Δͱॎதԝʹدͬͯ ͍ΔΑ͏ʹݟͤΒΕ·͢ɻՃ͑ͯςΩετ͕ෳ਺ߦ ʹͳͬͯ΋໰୊͕ͳ͍ͷͱɺԿΑΓ؆୯Ͱ͢ʂ
79. .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 ཁૉͷॎͷதԝدͤ (ϘλϯͷςΩετ)
80. .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 ཁૉͷॎͷதԝدͤ (ϘλϯͷςΩετ)
81. ᶄ float͸΋͏࢖Θͳͯ͘Α͍ ࡢࠓͷϒϥ΢β͕ flexbox ʹ΄΅׬શରԠͨ͠ࠓɺ float͸ར༻͠ͳͯ͘΋ϨΠΞ΢τΛ࡞੒͢Δ͜ͱ͕ ग़དྷ·͢ɻfloat͸ position: absolute ͱಉ͡Ͱߴ͞ Λ 0 ʹͯ͠͠·͏ˍύϑΥʔϚϯε΋flexboxʹൺ΂ Δͱѱ͍ͨΊɺfloat͸΋͏๨Εͯ͠·͍·͠ΐ͏ɻ
82. ᶅ ૷০໨తͷը૾ʹ͸ٙࣅཁૉΛ࢖͏ Α͋͘ΔΞϯΧʔϦϯΫͷԣʹදࣔ͞Ε͍ͯΔ໼ҹ ΍֎૭ͷΞΠίϯͷΑ͏ͳը૾͸ͦͷ౎౓imgλά ΍ۭͷspanλάͳͲΛଧͬͯελΠϧΛ෇͚͍ͯΔ ͱHTML΍CSS͕ෳࡶԽ͠΍͘͢େมͰ͢ɻ͜ͷΑ ͏ͳέʔε͸λάΛ௥Ճͤͣɺٙࣅཁૉ(::before ΍::after)Λੵۃతʹ࢖ͬͯը૾Λૠೖ͢ΔΑ͏ʹ͠ ·͠ΐ͏ʂ
83. ͓·͚
84. ៉ྷͳίʔσΟϯάΛ໨ࢦ͢ʹ͸σβΠϯ ͷجຊϧʔϧɾઃܭ΋஌Δඞཁ͕͋Δ ࣮͸Ҏલൃදͨ͜͠Εˣʹ·ͱΊͯ·͢ʂ https://speakerdeck.com/kkoudev/frontend-markup-design-basics
85. ៉ྷͳίʔσΟϯάΛ໨ࢦͨ͋͠ͱ͸ύϑ ΥʔϚϯε΋ҙࣝ͢Δඞཁ͕͋Δ ࣮͸Ҏલൃදͨ͜͠Εˣʹ·ͱΊͯ·͢ʂ https://speakerdeck.com/kkoudev/frontend-pagespeed-insights
86. ͜ΕΒʹै͍ͭͭରԠ͢Ε͹͜Ε͘Β͍ͷεί Ξ͕Ͱ·͢ɻੋඇ࣮ફͯ͠Έ͍ͯͩ͘͞ʂ
87. ·ͱΊ
88. σβΠϯΛݟͳ͕ΒίʔσΟϯά͢Δͷ͸ ݁ہ׳Ε͕ඞཁͰ͢ ࠓճ঺հͨ͠ϙΠϯτΛཹҙͨ͠ͱ͜ΖͰɺٸʹͰ ͖ΔΑ͏ʹ͸ͳΓ·ͤΜɻ݁ہ͸͍͔ͭ͘΍ͬͯΈ Δ͜ͱͰײ֮Λ͔ͭΊΔΑ͏ʹͳΓ΍͍͢ͷͰɺࠓ ·ͰσβΠφʔ΍ϚʔΫΞοϓΤϯδχΞʹ͓ئ͍ ͍ͯͨ͠ίʔσΟϯάΛඇϚʔΫΞοϓΤϯδχΞ ͷਓ΋Ҿ͖औͬͯ௅ઓͯ͠Έ͍ͯͩ͘͞ɻ
89. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠