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

by Kou

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

σβΠϯ (PC൛)

Slide 8

Slide 8 text

σβΠϯ (SP൛)

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

ۃ୺ͳྫ

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

iPad(λϒϨοτ)ج४ͷϒϨΠΫϙΠϯτྫ SPɹ …ɹ320px ʙ 767px Tabɹ…ɹ768px ʙ 1023px PCɹ …ɹ1024px ʙ ͜ͷϒϨΠΫϙΠϯτ͸iPadͷॎը໘͸Tabදࣔɺԣը໘͸ PCදࣔʹͳΔ͜ͱΛҙ͍ࣝͯ͠·͢ɻͦͯ͠TabΑΓখ͍͞ ͱSPදࣔʹͳΓ·͢ɻ

Slide 60

Slide 60 text

iPad(λϒϨοτ)ج४ͷϒϨΠΫϙΠϯτྫ SPɹ …ɹ320px ʙ 767px Tabɹ…ɹ768px ʙ 1023px PCɹ …ɹ1024px ʙ ChromeͷDeveloper Toolʹ͓͍ͯ΋768px(Tablet)ɺ 1024px(Laptop)ͱ͍͏Α͏ʹΤϛϡϨʔτը໘ͷαΠζΛ༻ ҙ͍ͯ͠·͢ɻͦͷͨΊίʔσΟϯά֬ೝ΋͠΍͍͢Ͱ͢ʂ

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

ᶃ-1 ཁૉͷԣͷதԝدͤ (ΠϯϥΠϯཁૉ) .text-area { width: 200px; } .text { width: 100%; text-align: center; }

ςετͰ͢
ͯ͢ͱͰ͢

CSS HTML

Slide 70

Slide 70 text

ᶃ-1 ཁૉͷԣͷதԝدͤ (ΠϯϥΠϯཁૉ) .text-area { width: 200px; } .text { width: 100%; text-align: center; }

ςετͰ͢
ͯ͢ͱͰ͢

CSS HTML .text-area ͷྖҬ಺Ͱ .text ͕ԣʹηϯλϦϯά͞Ε·͢

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

ᶃ-1 ཁૉͷԣͷதԝدͤ (ϒϩοΫཁૉ) .text-area-container { display: block; width: 600px; } .text-area { display: block; width: 200px; margin: 0 auto; } .text { width: 100%; text-align: center; }

ςετͰ͢
ͯ͢ͱͰ͢

CSS HTML

Slide 73

Slide 73 text

ςετͰ͢
ͯ͢ͱͰ͢

CSS HTML .text-area ͷྖҬ͕ .text-area-container ͷྖҬ಺ͰԣʹηϯλϦϯά͞Ε·͢

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

ᶃ-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; }

ςετͰ͢
ͯ͢ͱͰ͢

CSS HTML

Slide 77

Slide 77 text

ςετͰ͢
ͯ͢ͱͰ͢

CSS HTML .text-area ͕ .text-area-container ͷྖҬ಺ͰॎʹηϯλϦϯά͞Ε·͢

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

.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; } mocriެࣜαΠτ CSS HTML ᶃ-2 ཁૉͷॎͷதԝدͤ (ϘλϯͷςΩετ)

Slide 80

Slide 80 text

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

͓·͚

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

·ͱΊ

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

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