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
マークアップの最適解を見つけ出す方法 in Frontrend Vol.9
Search
Kasumi Morita
April 28, 2017
Programming
10
9.9k
マークアップの最適解を見つけ出す方法 in Frontrend Vol.9
Frontrend Vol.9 でお話しした内容です。
動画配信もされています →
https://freshlive.tv/tech-conference/109133
Kasumi Morita
April 28, 2017
Tweet
Share
More Decks by Kasumi Morita
See All by Kasumi Morita
スムーズに入力するためのForm Design
mkasumi
7
1.1k
UTSUWAテーマVer.2.0の紹介
mkasumi
1
100
ビルトインモジュールの使い方 / how-to-use-builtin-module
mkasumi
0
190
a-blog cms でよくあるサポート小ネタまとめてみた
mkasumi
1
170
a-blog cms 2020年版 公式テーマの紹介
mkasumi
0
150
デザインを考える習慣づくり
mkasumi
1
930
Other Decks in Programming
See All in Programming
JavaOne 2025: Advancing Java Profiling
jbachorik
1
320
小さく段階的リリースすることで深夜メンテを回避する
mkmk884
2
130
爆速スッキリ! Rspack 移行の成果と道のり - Muddy Web #11
dora1998
1
150
Django for Data Science (Boston Python Meetup, March 2025)
wsvincent
0
240
エンジニア未経験が最短で戦力になるためのTips
gokana
0
220
Coding Experience Cpp vs Csharp - meetup app osaka@9
harukasao
0
120
Fluent UI Blazor 5 (alpha)の紹介
tomokusaba
0
150
複雑なフォームと複雑な状態管理にどう向き合うか / #newt_techtalk vol. 15
izumin5210
4
3.3k
体得しよう!RSA暗号の原理と解読
laysakura
3
540
Go1.24 go vetとtestsアナライザ
kuro_kurorrr
2
480
RailsでCQRS/ESをやってみたきづき
suzukimar
2
1.5k
コンテナでLambdaをデプロイするときに知っておきたかったこと
_takahash
0
150
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
29
2k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.7k
Site-Speed That Sticks
csswizardry
4
450
Designing Experiences People Love
moore
141
23k
Unsuck your backbone
ammeep
670
57k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Designing for Performance
lara
606
69k
A Philosophy of Restraint
colly
203
16k
Bash Introduction
62gerente
611
210k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Transcript
ϚʔΫΞοϓͷ࠷దղΛݟ͚ͭग़͢ํ๏ ༗ݶձࣾΞοϓϧοϓϧɹా͔͢Έ 'SPOUSFOE7PM - How to Find Best Practice of
Markup -
Question ͳΜͷͨΊʹϚʔΫΞοϓ͢Δͷ͔ ͝ଘͰ͔͢ʁ
“ ͜͜MJཁૉͰϚʔΫΞοϓ͠·͢ ͱ͋Δॳ৺ऀ͚ॻ੶ʹͯ
“ ͜͜MJཁૉͰϚʔΫΞοϓ͠·͢ ͱ͋Δॳ৺ऀ͚ॻ੶ʹͯ זד
Ͳ͏ͬͯϚʔΫΞοϓ͍ͯ͠·͔͢ʁ ͓Βͤ ͓Βͤ Q Q EJW EJW
͓Βͤ BSUJDMF BSUJDMF I I MJ MJ Q Q
༗ݶձࣾΞοϓϧοϓϧ ϚʔΫΞοϓΤϯδχΞ ా͔͢Έ !,BTVNJ.PSJUB ! ❖ डୗҊ݅ ❖ $.4ͷ։ൃ
‣ 8FC੍࡞ऀ͕)5.-ཁૉΛબఆ͢Δཧ༝ ‣ ࠷దղΛݟ͚ͭग़͢ํ๏ ‣ ͳͥMJཁૉͰϚʔΫΞοϓ͢Δͷ͔ʁ ‣ ·ͱΊ Agenda
8FCⵖ⡲罏ָ )5.-銲稆鼅㹀ׅ椚歋
EJWهࣄͷλΠτϧEJW EJWࠓ໊ݹ͔Β͖ͬͯ·ͨ͠ɻ໊ݹ#ڃ άϧϝ͕͍ͬͺ͍Ͱ৭͍͠ΐͬͺ͍৯Ͱ͍ͬͺ͍ Ͱ͕͢ɺͱͯॅΈ͍֗͢Ͱ͢ʂCSCSCS ؍ޫ໊ݹɺݘࢁɺৗ͞ΜΆಓ͕͓͢͢Ί Ͱ͢ɻCSBCMPHDNT5SBJOJOH$BNQ4QSJOHͰ ໊ݹͷதͰษڧձΛ։࠵͠·͢կؾʹͳͬͨํ ݄ɺ໊ݹʂʂEJW EJWͬͱΈΔEJW
EJWهࣄͷλΠτϧEJW EJWࠓ໊ݹ͔Β͖ͬͯ·ͨ͠ɻ໊ݹ#ڃ άϧϝ͕͍ͬͺ͍Ͱ৭͍͠ΐͬͺ͍৯Ͱ͍ͬͺ͍ Ͱ͕͢ɺͱͯॅΈ͍֗͢Ͱ͢ʂCSCSCS ؍ޫ໊ݹɺݘࢁɺৗ͞ΜΆಓ͕͓͢͢Ί Ͱ͢ɻCSBCMPHDNT5SBJOJOH$BNQ4QSJOHͰ ໊ݹͷதͰษڧձΛ։࠵͠·͢կؾʹͳͬͨํ ݄ɺ໊ݹʂʂEJW EJWͬͱΈΔEJW עׯֽֿה鎉ֲה
8FCⵖ⡲罏ׄׯזֻגֿךְֻ剅ֽ
Question ͳΜͰ)5.-ཁૉΛબఆ͢Δͷ͔ʁ MJ TQBO Q EJW TFDUJPO BSUJDMF ˘FUD
8FCαΠτ͕࣋ͭػೳΛ࠷େݶʹ׆͔ͨ͢Ί Answer
ཁૉΛબఆ͢Δͱ͖ʹؾΛ͚ͭΔ͜ͱ ‣ %0.ߏਖ਼͘͠ ‣ )5.-୯ಠදࣔ͢Δ߹ͳ͍Α͏ʹ ‣ εΫϦʔϯϦʔμʔͰཧղ͍͢͠Α͏ʹ ‣ ΩʔϘʔυૢ࡞Ͱ͖ΔΑ͏ʹ ‣
ϢʔβϏϦςΟʢૢ࡞ੑʣ
‣ %0.ߏਖ਼͘͠ ‣ )5.-୯ಠදࣔ͢Δ߹ͳ͍Α͏ʹ ‣ εΫϦʔϯϦʔμʔͰཧղ͍͢͠Α͏ʹ ‣ ΩʔϘʔυૢ࡞Ͱ͖ΔΑ͏ʹ ‣ ϢʔβϏϦςΟʢૢ࡞ੑʣ
ཁૉΛબఆ͢Δͱ͖ʹؾΛ͚ͭΔ͜ͱ
લʹߦ࣮ͬͨݧ
Question ҧ͏αʔϏεͳͷʹ͋Δఔಉ͡֎ݟɻ ͳΜͰʁ
ҧ͏αʔϏεͰ͍ͬͯΔϚʔΫΞοϓ͍ͬ͠ΐ͔ͩΒɻ Answer TUSPOHॏཁ TUSPOHॏཁ TUSPOHॏཁ TUSPOHॏཁ
)5.-ͷΈͰใ͕݁Ͱ͖Εʜ ‣ Ҿ༻͢Δ͜ͱ͕Ͱ͖Δ ‣ ίϐϖ͕Ͱ͖Δ ‣ ϖʔδݕࡧ͕Ͱ͖Δ ͋Εʁͱͬͯී௨ͷػೳ͡Όͳ͍ʁ
OFYU\ DPOUFOUˑ࣍˒ ^ $44 TQBOBSJBMBCFMˑ࣍˒TQBO )5.-
OFYU\ DPOUFOUˑ࣍˒ ^ $44 TQBOBSJBMBCFMˑ࣍˒TQBO )5.- 걾ֺׅךծتً ͘͘͝͝ී௨ͩͱࢥ͍ͬͯΔػೳ ͪΌΜͱ)5.-Ͱॻ͔Ε͍ͯΔ͔Βػೳ͍ͯ͠Δ
ϚʔΫΞοϓݴޠ͍ͬͯ͏ͷਓͱػցͷڞ௨ݴޠͷ͜ͱ ͭ·ΓϚʔΫΞοϓ͢ΔࢲͨͪਓͱػցΛͭͳ͙༁ऀͷׂΛ͍ͯ͠Δ ϚγϯϦʔμϒϧ ώϡʔϚϯϦʔμϒϧ ϚʔΫΞοϓԿΛఏڙͰ͖Δͷ͔ʁ
剑黝鍑鋅אֽ⳿ׅ倯岀
ϚʔΫΞοϓͷͩ͜ΘΓ͕ग़ͯ͘Δͱ ൈ͚ग़ͤͳ͍পʜ
“ ϚʔΫΞοϓʹਖ਼ղͳ͍ ۀքͷ͑Β͍ਓͨͪ
͕͑ͨ͘͞Μ͋Δ͚ͩ ҆৺͍ͯͩ͘͠͞ʂ
<ul> <li><a href="#">Home</a></li> <li><a href="/blog/">ϒϩά</a></li> <li><a href=“/blog/xxx.html">ϒϩάهࣄ</a></li> </ul> <nav> <ol>
<li><a href="#">Home</a></li> <li><a href="/blog/">ϒϩά</a></li> <li><a href="/blog/xxx.html">ϒϩάهࣄ</a></li> </ol> </nav>
<ul> <li><a href="#">Home</a></li> <li><a href="/blog/">ϒϩά</a></li> <li><a href=“/blog/xxx.html">ϒϩάهࣄ</a></li> </ul> <nav> <ol>
<li><a href="#">Home</a></li> <li><a href="/blog/">ϒϩά</a></li> <li><a href="/blog/xxx.html">ϒϩάهࣄ</a></li> </ol> </nav> ו麩גכְזְ
ͷσόΠεͷදࣔʹ ৼΓճ͞Εͳ͍Α͏ʹج४͕ཉ͍͠ ϚʔΫΞοϓͷج४ͬͯͳΜͩΖ͏ʁ Ұൠతͳج४Λ୳͢ ࠷దղΛݟ͚ͭΔͨΊʹߦͬͨ͜ͱ
ج४Λ୳͢ ͨͱ͑ϒϥβ༷Λͱʹ࡞ΒΕ͍ͯΔ
ϚʔΫΞοϓ͢Δ্Ͱඞཁͳࣝ ➬圫 8FC،ؙإءؽٔذ؍ 4&0 刿倜׃װְׅ $.4鏣鎘 &'0 ًٝذشٝأ䚍 ͔ͨ͠͠ΒਓʹΑͬͯͬͱ͍ͬͺ͍͋Δ͔͠Ε·ͤΜ
ϚʔΫΞοϓ͢Δ্Ͱج४ʹ͢Δͷͨͪ ϧʔϧܥ πʔϧܥ
ϚʔΫΞοϓ͢Δ্Ͱج४ʹ͢Δͷͨͪ ϧʔϧܥ ‣ 8$-4ͳͲͷ༷ ‣ +*4ن֨ ‣ ݕࡧΤϯδϯͷΞϧΰϦζϜ ‣ $.4ͷ༷
ϧʔϧܥҰܾ·ͬͨͷͳ͔ͳ͔มΘΒͳ͍ɻ কདྷͷ͜ͱߟ͑ͯେମϧʔϧܥΛج४ɻ
ϚʔΫΞοϓ͢Δ্Ͱج४ʹ͢Δͷͨͪ πʔϧܥ ‣ εΫϦʔϯϦʔμʔ ‣ ΩʔϘʔυૢ࡞ ‣ 344Ϧʔμʔ πʔϧܥϢʔβϏϦςΟΛݕূ͢ΔͨΊʹ͏ɻ ϧʔϧܥͰ0,ͰϢʔβϏϦςΟΛଛͳ͏ͳΒߟ͑
͢ඞཁग़ͯ͘Δɻ
ੈͷதͷ༷ͷҙ ҙɿ༷ਓ͕ؒ࡞ΔͷͰมΘΔ ‣ ༷มߋʹౖΒͳ͍ίπ ༷ੜ͖ͯΔͬͯࢥ͓ͬͯ͘ ৗʹվળ͠Α͏ͱಈ͍͍ͯΔ͜ͱ͍͍͜ͱ
ϚʔΫΞοϓͨ݁͠Ռ͕Ͳ͏ͳΔ͔Λ͓ͬͯ͘ Ͳ͏ͬͨΒମݧͰ͖ΔͩΖ͏ʁ ࣮ࡍʹମݧͯࣝ͠Λ͚ͭΔ ࠷దղΛݟ͚ͭΔͨΊʹߦͬͨ͜ͱ
࣮ࡍʹମݧ͢Δํ๏ ‣ εΫϦʔϯϦʔμʔ ‣ 344ϦʔμʔͳͲͷϦʔμʔදࣔ ‣ ΩʔϘʔυૢ࡞ ‣ ݕࡧΤϯδϯ ‣
ʜFUD
࣮ࡍʹମݧͯ͠Έͯमਖ਼ͨ͠ϚʔΫΞοϓྫ ‣ ͳʹ͔Λด͡ΔϘλϯ ‣ ಠࣗσβΠϯͷνΣοΫϘοΫε ‣ ҙຯΛ࣋ͭγϯϘϧϑΥϯτ ‣ σβΠϯʹҾ͖ͣΒΕͳ͍ %0.ߏΛอͭ
ڍಈΛ͔ͬͯΒमਖ਼ͨ͠ϚʔΫΞοϓͦͷ̍ TQBODMBTTˑKTDMPTF˒ด͡ΔTQBO ͳʹ͔Λด͡ΔϘλϯ CVUUPOUZQFˑCVUUPO˒DMBTTˑKTDMPTF˒ด͡ΔCVUUPO ꟗׄ
ڍಈΛ͔ͬͯΒमਖ਼ͨ͠ϚʔΫΞοϓͦͷ MBCFM JOQVUUZQFˑDIFDLCPY˒WBMVFˑBQQMF˒ΓΜ͝ MBCFM ಠࣗσβΠϯͷνΣοΫϘοΫε EJW JOQVUUZQFˑDIFDLCPY˒WBMVFˑBQQMF˒JEˑBQQMF˒ MBCFMGPSˑBQQMF˒ΓΜ͝MBCFM EJW ΓΜ͝
ڍಈΛ͔ͬͯΒमਖ਼ͨ͠ϚʔΫΞοϓͦͷ TQBODMBTTˑJDPOCFHJOOFS˒BSJBMBCFMˑॳ৺ऀՄೳ˒TQBO ҙຯΛ࣋ͭγϯϘϧϑΥϯτ TQBODMBTTˑJDPOCFHJOOFS˒BSJBIJEEFOˑUSVF˒TQBO TQBODMBTTˑTSPOMZ˒ʢॳ৺ऀՄೳʣTQBO 1. ਖ਼ࣾһ(த్) 2. ਖ਼ࣾһ(৽ଔ)
ڍಈΛ͔ͬͯΒमਖ਼ͨ͠ϚʔΫΞοϓͦͷ σβΠϯʹҾ͖ͣΒΕͣʹ%0.ߏΛอͭʢ)5.-ʣ MJDMBTTˑJUFN˒ EJWDMBTTˑJUFNGPPUFS˒ QهࣄͷλΠτϧ͕ೖΓ·͢Q EJW EJWDMBTTˑJUFNIFBEFS˒ VM MJϥϕϧ"MJ MJϥϕϧ#MJ
VM EJW MJ هࣄͷλΠτϧ͕ೖΓ·͢ ϥϕϧ" ϥϕϧ#
ڍಈΛ͔ͬͯΒमਖ਼ͨ͠ϚʔΫΞοϓͦͷ JUFN\ EJTQMBZUBCMF ^ JUFNIFBEFS\ EJTQMBZUBCMFIFBEFSHSPVQ ^ JUFNGPPUFS\ EJTQMBZUBCMFGPPUFSHSPVQ ^
σβΠϯʹҾ͖ͣΒΕͣʹ%0.ߏΛอͭ $44ͦͷ هࣄͷλΠτϧ͕ೖΓ·͢ ϥϕϧ" ϥϕϧ#
ڍಈΛ͔ͬͯΒमਖ਼ͨ͠ϚʔΫΞοϓͦͷ JUFN\ EJTQMBZGMFY GMFYEJSFDUJPODPMVNO ^ JUFNIFBEFS\ PSEFS ^ JUFNGPPUFS\ PSEFS
^ σβΠϯʹҾ͖ͣΒΕͣʹ%0.ߏΛอͭʢ$44ͦͷʣ هࣄͷλΠτϧ͕ೖΓ·͢ ϥϕϧ" ϥϕϧ#
ڍಈΛ͔ͬͯΒमਖ਼ͨ͠ϚʔΫΞοϓͦͷ JUFN\ EJTQMBZNTHSJE EJTQMBZHSJE ^ JUFNIFBEFS\ NTHSJESPX HSJESPX ^ JUFNGPPUFS\
NTHSJESPX HSJESPX ^ σβΠϯʹҾ͖ͣΒΕͣʹ%0.ߏΛอͭʢ$44ͦͷʣ هࣄͷλΠτϧ͕ೖΓ·͢ ϥϕϧ" ϥϕϧ#
ϚʔΫΞοϓΛΓ͍ͨͳΒ ମݧΛͯ͠ڍಈΛѲ͠Α͏ )5.-ͷཁૉΛબఆ͢Δཧ༝8FC͕࣋ͭػೳΛ ࠷େݶʹ׆͔ͨ͢Ίɻ ͪΌΜͱग़ྗઌͷσόΠεͰࢥͬͨ݁Ռ͕ ಘΒΕ͍ͯΔ͔֬ೝ͠Α͏ɻ
ͨ·ʹυΩϡϝϯτͨͪ՞͢Δ ՞ͨ͠ͱ͖ΫϥΠΞϯτ͕ͲΜͳػೳΛ Ұ൪ٻΊ͍ͯΔ͔Ұߟ͑ͯΈΑ͏ ϓϩδΣΫτ͝ͱʹ༏ઌॱҐΛܾΊΔ ࠷దղΛݟ͚ͭΔͨΊʹߦͬͨ͜ͱ
ߟྀ͢Δ͖༷ͨͪ ➬圫 8FC،ؙإءؽٔذ؍ 4&0 刿倜׃װְׅ $.4鏣鎘 &'0 ًٝذشٝأ䚍
➬圫 8FC،ؙإءؽٔذ؍ 4&0 刿倜׃װְׅ $.4鏣鎘 &'0 ًٝذشٝأ䚍 תח鄃הָֹ֮ ߟྀ͢Δ͖༷ͨͪ 秛劍הְֲせך植㹋
༏ઌॱҐͷྫ $.4ઃܭ ༷ 4&0ରࡦ&'0ରࡦ 8FCΞΫηγϏϦςΟ 8FCΞΫηγϏϦςΟ
༷ $.4ઃܭ &'0ରࡦ4&0ରࡦ $.4ߋ৽ॏࢹͷҊ݅ 8FCΞΫηγϏςΟॏࢹͷҊ݅ ‣ ͪΖΜɺͲΕେࣄ ͦΕͰɺ·ͣཉுΒͣʹ࠷༏ઌࣄ߲Λ࣮֬ʹ͜ͳͦ͏
ϓϩδΣΫτͷ͚͕ͩ͑͋Δ ϓϩδΣΫτ͝ͱʹඪΛܾΊͯɺඪʹ͔ͬͯୡ͢Δ ͦΕ͕ɺϚʔΫΞοϓͷ࠷దղ
זMJ銲稆ד و٦ؙ،حفׅךַ
“ ͜͜MJཁૉͰϚʔΫΞοϓ͠·͢ ͱ͋Δॳ৺ऀ͚ॻ੶ʹͯ
Ͳ͏ͬͯϚʔΫΞοϓ͍ͯ͠·͔͢ʁ ͓Βͤ ͓Βͤ ͓Βͤ Q Q EJW
EJW BSUJDMF BSUJDMF I I MJ MJ Q Q
Α͘ΈΔϚʔΫΞοϓͦͷ ‣ BSUJDMFཁૉΛ͏ͱɺඞવతʹݟग़͕͠ ͨ͘͞Μʹͳͬͯ͠·͏ʜ ‣ ಠཱͯ͠ͳ͍ͷʹBSUJDMFཁૉʁ ͜Εࣗମهࣄ͡Όͳ͍ʜ ͓Βͤ BSUJDMF
BSUJDMF I I
Α͘ΈΔϚʔΫΞοϓͦͷ ‣ ͠ϦϯΫઌ͕هࣄ͔ͩΒͱ͍͏ͰBSUJDMFཁૉΛબΜͰ͍ͨΒʜ ͓Βͤͷهࣄ ͓Βͤͷهࣄ ͓Βͤͷهࣄ ͓Βͤͷهࣄ BSUJDMF BSUJDMF BSUJDMF
BSUJDMF ݄ ݄ ݄ ͓Βͤͷهࣄ ͓Βͤͷهࣄ ͓Βͤͷهࣄ Χ ς ΰ Ϧ ʔ Χ ς ΰ Ϧ ʔ Χ ς ΰ Ϧ ʔ BSUJDMF BSUJDMF BSUJDMF αΠτλΠτϧ φϏɹφϏɹφϏ̏φϏ "ͷৄࡉͪ͜Β ∠ ∠ BSUJDMF
Α͘ΈΔϚʔΫΞοϓͦͷ ‣ EJWཁૉؒҧͬͯͳ͍͚ͲɺͦΕͧΕͷ ͓Βͤهࣄ͕ͭͷάϧʔϓͩͱ͍͑ͨʜ ͓Βͤ EJW EJW Q Q
Α͘ΈΔϚʔΫΞοϓͦͷ ‣ MJཁૉͰϚʔΫΞοϓ͍ͯ͠Ε ࢧԉٕज़ʹΑΔ͚Ͳ ʮϦετ˓߲ʯͬͯ࢝·ΓΛڭ͑ͯ͘ΕΔ ‣ ͠)5.-͚ͩʹͳͬͯ ಄ʹʮɾʯ͕େମ͔ͭ͘Βࢹ֮తʹ ά ϧʔϓͩͬͯཧղͰ͖Δ
͓Βͤ MJ MJ Q Q
͔ͩΒMJཁૉͳΜͩʂ ‣ ༷ΛΔ͜ͱ ‣ ͍Ζ͍Ζͳπʔϧ͔ΒϚʔΫΞοϓΛମݧͯ͠ΈΔ͜ͱ
תה
ϚʔΫΞοϓ͢Δ͜ͱɺ ਓͱػցΛͭͳ͙༁͢Δ࡞ۀͷ͜ͱ ‣ ϚʔΫΞοϓਓ͕ػցʹ͑ͯػց͕ਓʹਖ਼͘͠ ͑ΔͨΊʹଘࡏ͢Δ ♥
ϚʔΫΞοϓͷ࠷దͳղ ϓϩδΣΫτ͝ͱʹมΘͬͯ͘Δ ‣ ࣗͰ͑Λಋ͖ग़ͤΔਓؒʹͳΖ͏
ࠓͷ͓ɺ͔ͬͨ͠Ͱ͔͢ʁ
·ͣͰ͖Δͱ͜Ζ͔Β ϕετϓϥΫςΟεΛݟ͚ͭΔલʹ ϕλʔϓϥΫςΟεΛݟ͚ͭΔͱ͜Ζ͔Β
ࠓҰ൪͔͑ͨͬͨ͜ͱ ͑ඞͣ͠Ұݸ͚ͩ͡Όͳ͍ ͑ͨ͘͞Μ͋ΔΜͩ ࠷దղࣗͷྗͰΈ͚͍ͭͩͯ͜͠͏ʂ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ ,BTVNJ.PSJUB LBTVNJNPSJUB IUUQNLBTVNJDPN