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
140
もう一度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
htmxって知っていますか?次世代のHTML
hiro_ghap1
0
560
LINE公式アカウント&WordPressで更新頻度が上がった話
hiro_ghap1
1
160
リッチリザルトのための構造化データハンズオン
hiro_ghap1
0
56
クリック率アップを目指す!リッチリザルトのための構造化データ
hiro_ghap1
0
560
2020年からWebサイトが意匠権の対象になります
hiro_ghap1
0
430
すぐできる構造化データマークアップ
hiro_ghap1
1
230
Other Decks in Programming
See All in Programming
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
9
5.1k
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
770
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
170
Porting a visionOS App to Android XR
akkeylab
0
460
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
210
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
190
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
130
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
120
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
200
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
1
13k
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1k
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
The World Runs on Bad Software
bkeepers
PRO
69
11k
GitHub's CSS Performance
jonrohan
1031
460k
Gamification - CAS2011
davidbonilla
81
5.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Embracing the Ebb and Flow
colly
86
4.7k
The Pragmatic Product Professional
lauravandoore
35
6.7k
How STYLIGHT went responsive
nonsquared
100
5.6k
Raft: Consensus for Rubyists
vanstee
140
7k
We Have a Design System, Now What?
morganepeng
53
7.7k
Scaling GitHub
holman
460
140k
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$ͰԣͳͲɺ ॎԣൺͷҟͳΔը૾Λը໘αΠζʹΑͬͯ ඞཁͳը૾͚ͩΛಡΈࠐΊΔ͜ͱͰ͢ɻ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ