Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
もう一度imgタグをおさらいしよう
Search
Yoshihiro Hasegawa
January 23, 2023
Programming
0
100
もう一度imgタグをおさらいしよう
2023年1月23日(月)Markup Meetup #3 LT資料
Yoshihiro Hasegawa
January 23, 2023
Tweet
Share
More Decks by Yoshihiro Hasegawa
See All by Yoshihiro Hasegawa
LINE公式アカウント&WordPressで更新頻度が上がった話
hiro_ghap1
1
44
リッチリザルトのための構造化データハンズオン
hiro_ghap1
0
35
クリック率アップを目指す!リッチリザルトのための構造化データ
hiro_ghap1
0
440
2020年からWebサイトが意匠権の対象になります
hiro_ghap1
0
420
すぐできる構造化データマークアップ
hiro_ghap1
1
200
Other Decks in Programming
See All in Programming
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
4
1k
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
170
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
380
初心者のためのRubyKaigi入門/RubyKaigi Introduction
a_matsuda
8
1.4k
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
990
Code Reviews
bkuhlmann
4
900
スクラムガイドのスプリントレトロスペクティブを改めて読みかえしてみた / Re-reading the Sprint Retrospective Section in the Scrum Guide
mackey0225
3
480
スキーマ駆動開発による品質とスピードの両立 - 私達は何故、スキーマを書くのか
kentaroutakeda
0
180
Ruby Pattern Matching
bkuhlmann
0
930
Elm 0.19.0 Changes
bkuhlmann
0
510
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
1
1.3k
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
3
670
Featured
See All Featured
Clear Off the Table
cherdarchuk
85
310k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
358
22k
What the flash - Photography Introduction
edds
64
11k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
660
120k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
33
6k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
8
1.3k
How GitHub (no longer) Works
holman
305
140k
Building a Modern Day E-commerce SEO Strategy
aleyda
21
6.4k
Six Lessons from altMBA
skipperchong
22
3k
Writing Fast Ruby
sferik
622
60k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
Transcript
͏ҰJNHλάΛ͓͞Β͍͠Α͏ ୩ت༸ .BSLVQ.FFUVQ
㲔 ୩ ت༸ גࣜձࣾεςϥΫϦΤΠτ දऔక ૯߹WebαʔϏε λμϑϥ ද σδλϧϋϦουେࡕ ඇৗۈߨࢣ
ژܳज़σβΠϯઐֶߍ ඇৗۈߨࢣ ௗऔݝձ࿈߹ձ ొઐՈ גࣜձࣾHow to Use CTO ϑϩϯτΤϯυΤϯδχΞ / ͷιϜϦΤ® hiro_ghap1 chocolat_street
㲔 ୩ ت༸ גࣜձࣾεςϥΫϦΤΠτ දऔక σδλϧϋϦουେࡕ ඇৗۈߨࢣ ௗऔݝձ࿈߹ձ ొઐՈ גࣜձࣾHow
to Use CTO ϑϩϯτΤϯυΤϯδχΞ / ͷιϜϦΤ® hiro_ghap1 chocolat_street hiro_ghap1
㲔 ୩ ت༸ גࣜձࣾεςϥΫϦΤΠτ දऔక σδλϧϋϦουେࡕ ඇৗۈߨࢣ ௗऔݝձ࿈߹ձ ొઐՈ גࣜձࣾHow
to Use CTO ϑϩϯτΤϯυΤϯδχΞ / ͷιϜϦΤ® hiro_ghap1 chocolat_street
͏ҰJNHλάΛ͓͞Β͍͠Α͏
)5.-4UBOEBSEͰͷJNHλά
ίϯςϯπΧςΰϦʔ ίϯςϯπΧςΰϦʔ)5.-)ZQFS5FYU.BSLVQ-BOHVBHFc.%/ IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC)5.-$POUFOU@DBUFHPSJFT
)5.-4UBOEBSEͰͷJNHλά ϑϩʔίϯςϯπ ϑϨʔδϯάίϯςϯπ ΤϯϕσΟουίϯςϯπ
)5.-4UBOEBSEͰͷJNHλά ϑϩʔίϯςϯπ ϑϨʔδϯάίϯςϯπ ΤϯϕσΟουίϯςϯπ ཁૉ͕VTFNBQଐੑΛͭ߹ ΠϯλϥΫςΟϒίϯςϯπ ύϧύϒϧίϯςϯπ
ίϯςϯπΧςΰϦʔ ίϯςϯπΧςΰϦʔ)5.-)ZQFS5FYU.BSLVQ-BOHVBHFc.%/ IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC)5.-$POUFOU@DBUFHPSJFT
)5.-4UBOEBSEͰͷJNHλά ϑϩʔίϯςϯπ ϑϨʔδϯάίϯςϯπ ΤϯϕσΟουίϯςϯπ ཁૉ͕VTFNBQଐੑΛͭ߹ ΠϯλϥΫςΟϒίϯςϯπ ύϧύϒϧίϯςϯπ ϑϩʔίϯςϯπ CPEZͰ༻͞ΕΔ ΄ͱΜͲͷཁૉ
)5.-4UBOEBSEͰͷJNHλά ϑϩʔίϯςϯπ ϑϨʔδϯάίϯςϯπ ΤϯϕσΟουίϯςϯπ ཁૉ͕VTFNBQଐੑΛͭ߹ ΠϯλϥΫςΟϒίϯςϯπ ύϧύϒϧίϯςϯπ ϑϨʔδϯάίϯςϯπ ஈམͰ༻͞ΕΔཁૉɻ ฏͰݴ͏ͱ͜ΖͷΠϯϥΠϯཁૉɻ
)5.-4UBOEBSEͰͷJNHλά ϑϩʔίϯςϯπ ϑϨʔδϯάίϯςϯπ ΤϯϕσΟουίϯςϯπ ཁૉ͕VTFNBQଐੑΛͭ߹ ΠϯλϥΫςΟϒίϯςϯπ ύϧύϒϧίϯςϯπ ΤϯϕσΟουίϯςϯπ จॻʹຒΊࠐΈΛߦ͏ཁૉɻ ʢJNH
WJEFP JGSBNF DBOWBTʜʣ
)5.-4UBOEBSEͰͷJNHλά ϑϩʔίϯςϯπ ϑϨʔδϯάίϯςϯπ ΤϯϕσΟουίϯςϯπ ཁૉ͕VTFNBQଐੑΛͭ߹ ΠϯλϥΫςΟϒίϯςϯπ ύϧύϒϧίϯςϯπ
)5.-4UBOEBSEͰͷJNHλά ϑϩʔίϯςϯπ ϑϨʔδϯάίϯςϯπ ΤϯϕσΟουίϯςϯπ ཁૉ͕VTFNBQଐੑΛͭ߹ ΠϯλϥΫςΟϒίϯςϯπ ύϧύϒϧίϯςϯπ ΠϯλϥΫςΟϒίϯςϯπ ૢ࡞Մೳͳཁૉ ʢB
CVUUPO EFUBJMT JOQVUʜʣ
)5.-4UBOEBSEͰͷJNHλά ϑϩʔίϯςϯπ ϑϨʔδϯάίϯςϯπ ΤϯϕσΟουίϯςϯπ ཁૉ͕VTFNBQଐੑΛͭ߹ ΠϯλϥΫςΟϒίϯςϯπ ύϧύϒϧίϯςϯπ ύϧύϒϧίϯςϯπ ϑϩʔ͘͠ ϑϨʔδϯάίϯςϯπͰ
ࢹ֮ՄೳͳཁૉΛแ͍ͯ͠Δ
)5.-4UBOEBSEͰͷJNHλά ϑϩʔίϯςϯπ ϑϨʔδϯάίϯςϯπ ΤϯϕσΟουίϯςϯπ ཁૉ͕VTFNBQଐੑΛͭ߹ ΠϯλϥΫςΟϒίϯςϯπ ύϧύϒϧίϯςϯπ ͜ͷཁૉΛ༻Ͱ͖ΔίϯςΩετ ΤϯϕσΟουίϯςϯπ͕ ظ͞ΕΔॴɻ
Ҏ্ͷ ϥϯΩϯάγάφϧʹΑΓɺ ݕࡧॱҐΛܾఆ͍ͯ͠Δ )5.-4UBOEBSEͰͷJNHλά $BOJODMVEF IUUQTDBOJODMVEFHMJUDINF
Ҏ্ͷ ϥϯΩϯάγάφϧʹΑΓɺ ݕࡧॱҐΛܾఆ͍ͯ͠Δ )5.-4UBOEBSEͰͷJNHλά CPEZԼʹ͋ͬͯ0,
)5.-4UBOEBSEͰͷλάνΣοΫ $BOJODMVEF IUUQTDBOJODMVEFHMJUDINF
JNHλάͷศརͳଐੑ
EFDPEJOHlBTZODz
EFDPEJOHlBTZODz ը૾ͷσίʔσΟϯάΛඇಉظͰߦ͏
EFDPEJOHlBTZODz $BO*VTF4VQQPSUUBCMFTGPS)5.- $44 FUD IUUQTDBOJVTFDPN
MPBEJOHlMB[Zz
MPBEJOHlMB[Zz WJFXQPSU͕ۙͮ͘ͱ ը૾ͷಡΈࠐΈΛߦ͏ ※width ͱ height ͕ඞཁ
MPBEJOHlMB[Zz $BO*VTF4VQQPSUUBCMFTGPS)5.- $44 FUD IUUQTDBOJVTFDPN
ͲͪΒΛ͏ʁ EFDPEJOHlBTZODz MPBEJOHlMB[Zz
ͲͪΒΛ͍͍͔͑ʁ ΏΊΈc%9 4P& 696* ΞδϟΠϧ %FW0QT άϩʔεϋοΫ IUUQTXXXZVNFNJDPKQ
ͲͪΒΛ͍͍͔͑ʁ ϑΝʔετϏϡʔपล decoding=“async” ͦΕҎ߱ loading=“lazy” ΏΊΈc%9 4P& 696* ΞδϟΠϧ %FW0QT
άϩʔεϋοΫ IUUQTXXXZVNFNJDPKQ
ͲͪΒΛ͍͍͔͑ʁ ϑΝʔετϏϡʔपล decoding=“async” ͦΕҎ߱ loading=“lazy” ϨΠΞτγϑτରࡦʹ width ͱ height ݁ہඞཁ
QJDUVSFλά
QJDUVSFλά ݅ʹԠͯ͡ಡΈࠐΉ ը૾ϑΝΠϧΛΓସ͑Δɻ
QJDUVSFλά ݅ʹԠͯ͡ಡΈࠐΉ ը૾ϑΝΠϧΛΓସ͑Δɻ ༨ܭͳϑΝΠϧΛಡΈࠐ·ͳ͍
QJDUVSFλά ※width ͱ height ͕ඞཁ $BO*VTF4VQQPSUUBCMFTGPS)5.- $44 FUD IUUQTDBOJVTFDPN
QJDUVSFλά ݅ʹԠͯ͡ಡΈࠐΉ ը૾ϑΝΠϧΛΓସ͑Δɻ
TPVSDFλά
QJDUVSFλά ͳ͠Ͱʜʁ
QJDUVSFλάͳ͠Ͱʜʁ
QJDUVSFλάͳ͠Ͱʜʁ
QJDUVSFλάͳ͠Ͱʜʁ
·ͱΊ
ϒϥβαΠζͰը૾ͷॎԣൺ͕มΘΔʁ 8FC1ͳͲͷ৽͍͠ن֨ͷը૾ΛಡΈࠐΉʁ ·ͱΊ :FT /P QJDUVSFλά JNHλάͷΈ
TSDTFUΛ༻͢ΔϝϦοτ ·ͱΊ ը໘ͷϐΫηϧີදࣔ͢Δը૾αΠζʹΑͬͯ దͳϑΝΠϧͷಡΈࠐΈΛߦ͍ɺಡΈࠐΈ༰ྔΛ ͑ΒΕΔ͜ͱͰ͢ɻ
QJDUVSFλάΛ༻͢ΔϝϦοτ ·ͱΊ εϚϗͰॎɺ1$ͰԣͳͲɺ ॎԣൺͷҟͳΔը૾Λը໘αΠζʹΑͬͯ ඞཁͳը૾͚ͩΛಡΈࠐΊΔ͜ͱͰ͢ɻ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ