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

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

7f95c6712be7d9a89aae7b9b152dad90?s=47 Kou
November 15, 2019

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

7f95c6712be7d9a89aae7b9b152dad90?s=128

Kou

November 15, 2019
Tweet

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. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠