もう一度imgタグをおさらいしよう

2023年1月23日（月）Markup Meetup #3 LT資料

Transcript

1. ΋͏Ұ౓JNHλάΛ͓͞Β͍͠Α͏ ௕୩઒
   ت༸ .BSLVQ
   .FFUVQ
   
2. 㲔 ௕୩઒ ت༸ גࣜձࣾεςϥΫϦΤΠτ ୅දऔక໾ ૯߹WebαʔϏε λμϑϥ ୅ද σδλϧϋϦ΢ουେࡕ ඇৗۈߨࢣ ژ౎ܳज़σβΠϯઐ໳ֶߍ ඇৗۈߨࢣ ௗऔݝ঎޻ձ࿈߹ձ ొ࿥ઐ໳Ո גࣜձࣾHow to Use CTO ϑϩϯτΤϯυΤϯδχΞ / ੕ͷιϜϦΤ® hiro_ghap1 chocolat_street
3. 㲔 ௕୩઒ ت༸ גࣜձࣾεςϥΫϦΤΠτ ୅දऔక໾ σδλϧϋϦ΢ουେࡕ ඇৗۈߨࢣ ௗऔݝ঎޻ձ࿈߹ձ ొ࿥ઐ໳Ո גࣜձࣾHow to Use CTO ϑϩϯτΤϯυΤϯδχΞ / ੕ͷιϜϦΤ® hiro_ghap1 chocolat_street hiro_ghap1
4. 㲔 ௕୩઒ ت༸ גࣜձࣾεςϥΫϦΤΠτ ୅දऔక໾ σδλϧϋϦ΢ουେࡕ ඇৗۈߨࢣ ௗऔݝ঎޻ձ࿈߹ձ ొ࿥ઐ໳Ո גࣜձࣾHow to Use CTO ϑϩϯτΤϯυΤϯδχΞ / ੕ͷιϜϦΤ® hiro_ghap1 chocolat_street
5. ΋͏Ұ౓JNHλάΛ͓͞Β͍͠Α͏
6. )5.-
   4UBOEBSE
   Ͱͷ
   JNHλά
7. ίϯςϯπΧςΰϦʔ ίϯςϯπΧςΰϦʔ
   
   )5.-
   )ZQFS5FYU
   .BSLVQ
   -BOHVBHF
   c
   .%/
   IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC)5.-$POUFOU@DBUFHPSJFT
8. )5.-
   4UBOEBSE
   Ͱͷ
   JNHλά ϑϩʔίϯςϯπ
   ϑϨʔδϯάίϯςϯπ
   ΤϯϕσΟουίϯςϯπ
9. )5.-
   4UBOEBSE
   Ͱͷ
   JNHλά ϑϩʔίϯςϯπ
   ϑϨʔδϯάίϯςϯπ
   ΤϯϕσΟουίϯςϯπ ཁૉ͕VTFNBQଐੑΛ΋ͭ৔߹ ΠϯλϥΫςΟϒίϯςϯπ
   ύϧύϒϧίϯςϯπ
10. ίϯςϯπΧςΰϦʔ ίϯςϯπΧςΰϦʔ
    
    )5.-
    )ZQFS5FYU
    .BSLVQ
    -BOHVBHF
    c
    .%/
    IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC)5.-$POUFOU@DBUFHPSJFT
11. )5.-
    4UBOEBSE
    Ͱͷ
    JNHλά ϑϩʔίϯςϯπ
    ϑϨʔδϯάίϯςϯπ
    ΤϯϕσΟουίϯςϯπ ཁૉ͕VTFNBQଐੑΛ΋ͭ৔߹ ΠϯλϥΫςΟϒίϯςϯπ
    ύϧύϒϧίϯςϯπ ϑϩʔίϯςϯπ CPEZ಺Ͱ࢖༻͞ΕΔ ΄ͱΜͲͷཁૉ
12. )5.-
    4UBOEBSE
    Ͱͷ
    JNHλά ϑϩʔίϯςϯπ
    ϑϨʔδϯάίϯςϯπ
    ΤϯϕσΟουίϯςϯπ ཁૉ͕VTFNBQଐੑΛ΋ͭ৔߹ ΠϯλϥΫςΟϒίϯςϯπ
    ύϧύϒϧίϯςϯπ ϑϨʔδϯάίϯςϯπ ஈམ಺Ͱ࢖༻͞ΕΔཁૉɻ
    ฏ੒Ͱݴ͏ͱ͜ΖͷΠϯϥΠϯཁૉɻ
13. )5.-
    4UBOEBSE
    Ͱͷ
    JNHλά ϑϩʔίϯςϯπ
    ϑϨʔδϯάίϯςϯπ
    ΤϯϕσΟουίϯςϯπ ཁૉ͕VTFNBQଐੑΛ΋ͭ৔߹ ΠϯλϥΫςΟϒίϯςϯπ
    ύϧύϒϧίϯςϯπ ΤϯϕσΟουίϯςϯπ จॻ಺ʹຒΊࠐΈΛߦ͏ཁૉɻ
    ʢJNH WJEFP JGSBNF DBOWBTʜʣ
14. )5.-
    4UBOEBSE
    Ͱͷ
    JNHλά ϑϩʔίϯςϯπ
    ϑϨʔδϯάίϯςϯπ
    ΤϯϕσΟουίϯςϯπ ཁૉ͕VTFNBQଐੑΛ΋ͭ৔߹ ΠϯλϥΫςΟϒίϯςϯπ
    ύϧύϒϧίϯςϯπ
15. )5.-
    4UBOEBSE
    Ͱͷ
    JNHλά ϑϩʔίϯςϯπ
    ϑϨʔδϯάίϯςϯπ
    ΤϯϕσΟουίϯςϯπ ཁૉ͕VTFNBQଐੑΛ΋ͭ৔߹ ΠϯλϥΫςΟϒίϯςϯπ
    ύϧύϒϧίϯςϯπ ΠϯλϥΫςΟϒίϯςϯπ ૢ࡞Մೳͳཁૉ ʢB CVUUPO EFUBJMT JOQVUʜʣ
16. )5.-
    4UBOEBSE
    Ͱͷ
    JNHλά ϑϩʔίϯςϯπ
    ϑϨʔδϯάίϯςϯπ
    ΤϯϕσΟουίϯςϯπ ཁૉ͕VTFNBQଐੑΛ΋ͭ৔߹ ΠϯλϥΫςΟϒίϯςϯπ
    ύϧύϒϧίϯςϯπ ύϧύϒϧίϯςϯπ ϑϩʔ΋͘͠͸
    ϑϨʔδϯάίϯςϯπͰ
    ࢹ֮ՄೳͳཁૉΛ಺แ͍ͯ͠Δ
17. )5.-
    4UBOEBSE
    Ͱͷ
    JNHλά ϑϩʔίϯςϯπ
    ϑϨʔδϯάίϯςϯπ
    ΤϯϕσΟουίϯςϯπ ཁૉ͕VTFNBQଐੑΛ΋ͭ৔߹ ΠϯλϥΫςΟϒίϯςϯπ
    ύϧύϒϧίϯςϯπ ͜ͷཁૉΛ࢖༻Ͱ͖ΔίϯςΩετ ΤϯϕσΟουίϯςϯπ͕ ظ଴͞ΕΔ৔ॴɻ
18. Ҏ্ͷ
    ϥϯΩϯάγάφϧʹΑΓɺ
    ݕࡧॱҐΛܾఆ͍ͯ͠Δ )5.-
    4UBOEBSE
    Ͱͷ
    JNHλά $BOJODMVEF
    IUUQTDBOJODMVEFHMJUDINF
19. Ҏ্ͷ
    ϥϯΩϯάγάφϧʹΑΓɺ
    ݕࡧॱҐΛܾఆ͍ͯ͠Δ )5.-
    4UBOEBSE
    Ͱͷ
    JNHλά CPEZ௚Լʹ͋ͬͯ΋0,
20. )5.-
    4UBOEBSE
    ͰͷλάνΣοΫ $BOJODMVEF
    IUUQTDBOJODMVEFHMJUDINF
21. JNHλάͷศརͳଐੑ
22. EFDPEJOHlBTZODz
23. EFDPEJOHlBTZODz ը૾ͷσίʔσΟϯάΛඇಉظͰߦ͏
24. EFDPEJOHlBTZODz $BO
    *
    VTF
    4VQQPSU
    UBCMFT
    GPS
    )5.-
    $44
    FUD
    IUUQTDBOJVTFDPN
25. MPBEJOHlMB[Zz
26. MPBEJOHlMB[Zz WJFXQPSU
    ͕ۙͮ͘ͱ
    ը૾ͷಡΈࠐΈΛߦ͏ ※width ͱ height ͕ඞཁ
27. MPBEJOHlMB[Zz $BO
    *
    VTF
    4VQQPSU
    UBCMFT
    GPS
    )5.-
    $44
    FUD
    IUUQTDBOJVTFDPN
28. ͲͪΒΛ࢖͏ʁ EFDPEJOHlBTZODz MPBEJOHlMB[Zz
29. ͲͪΒΛ࢖͑͹͍͍͔ʁ ΏΊΈ
    c
    %9 4P& 696* ΞδϟΠϧ %FW0QT άϩʔεϋοΫ
    IUUQTXXXZVNFNJDPKQ
30. ͲͪΒΛ࢖͑͹͍͍͔ʁ ϑΝʔετϏϡʔपล decoding=“async” ͦΕҎ߱ loading=“lazy” ΏΊΈ
    c
    %9 4P& 696* ΞδϟΠϧ %FW0QT άϩʔεϋοΫ
    IUUQTXXXZVNFNJDPKQ
31. ͲͪΒΛ࢖͑͹͍͍͔ʁ ϑΝʔετϏϡʔपล decoding=“async” ͦΕҎ߱ loading=“lazy” ϨΠΞ΢τγϑτରࡦʹ width ͱ height ͸݁ہඞཁ
32. QJDUVSFλά
33. QJDUVSFλά ৚݅ʹԠͯ͡ಡΈࠐΉ
    ը૾ϑΝΠϧΛ੾Γସ͑Δɻ
34. QJDUVSFλά ৚݅ʹԠͯ͡ಡΈࠐΉ
    ը૾ϑΝΠϧΛ੾Γସ͑Δɻ ༨ܭͳϑΝΠϧΛಡΈࠐ·ͳ͍
35. QJDUVSFλά ※width ͱ height ͕ඞཁ $BO
    *
    VTF
    4VQQPSU
    UBCMFT
    GPS
    )5.-
    $44
    FUD
    IUUQTDBOJVTFDPN
36. QJDUVSFλά ৚݅ʹԠͯ͡ಡΈࠐΉ
    ը૾ϑΝΠϧΛ੾Γସ͑Δɻ
37. TPVSDFλά
38. QJDUVSFλά
    ͳ͠Ͱ΋ʜʁ
39. QJDUVSFλάͳ͠Ͱ΋ʜʁ
40. QJDUVSFλάͳ͠Ͱ΋ʜʁ
41. QJDUVSFλάͳ͠Ͱ΋ʜʁ
42. ·ͱΊ
43. ϒϥ΢βαΠζͰը૾ͷॎԣൺ͕มΘΔʁ
    8FC1ͳͲͷ৽͍͠ن֨ͷը૾ΛಡΈࠐΉʁ ·ͱΊ :FT /P QJDUVSFλά JNHλάͷΈ
44. TSDTFUΛ࢖༻͢ΔϝϦοτ ·ͱΊ ը໘ͷϐΫηϧີ౓΍දࣔ͢Δը૾αΠζʹΑͬͯ
    ద੾ͳϑΝΠϧͷಡΈࠐΈΛߦ͍ɺಡΈࠐΈ༰ྔΛ
    ཈͑ΒΕΔ͜ͱͰ͢ɻ
45. QJDUVSFλάΛ࢖༻͢ΔϝϦοτ ·ͱΊ εϚϗͰ͸ॎ௕ɺ1$Ͱ͸ԣ௕ͳͲɺ
    ॎԣൺͷҟͳΔը૾Λը໘αΠζʹΑͬͯ
    ඞཁͳը૾͚ͩΛಡΈࠐΊΔ͜ͱͰ͢ɻ
46. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ