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.2k
マークアップの最適解を見つけ出す方法 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
6
1.1k
UTSUWAテーマVer.2.0の紹介
mkasumi
1
90
ビルトインモジュールの使い方 / how-to-use-builtin-module
mkasumi
0
170
a-blog cms でよくあるサポート小ネタまとめてみた
mkasumi
1
160
a-blog cms 2020年版 公式テーマの紹介
mkasumi
0
140
デザインを考える習慣づくり
mkasumi
1
920
Other Decks in Programming
See All in Programming
最古の関数型言語「Lisp」ことはじめ / lisp_in_kamiyama
uhooi
1
190
AWS初心者ってどうやってAWSを学ぶ?〜アプリエンジニアがやってよかったアーキテクチャ学習方法〜
yamanashi_ren01
0
190
しくじり先生 Image Matching Challenge 2024 編
goosehaaan
0
810
유연한 Composable 설계
l2hyunwoo
0
380
Introduction to GitOps
hwchiu
0
110
Microservices rules (July 2024) : what good looks like
cer
PRO
0
1.6k
TiDB Serverless ~理想のServerless DBを考える~
soso_15315
1
160
Trial
cairolibrary720
1
130
君たちはどうコードをレビューする (される) か / 大吉祥寺.pm
utgwkk
15
8.5k
feature環境をGitHub ActionsとCloudFormationでいい感じに管理する
nealle
2
310
大規模マルチテナントを解決するYugabyteDBという選択肢
nnaka2992
1
250
CSC307 Lecture 08
javiergs
PRO
0
330
Featured
See All Featured
How GitHub (no longer) Works
holman
305
140k
Building Adaptive Systems
keathley
34
2k
Into the Great Unknown - MozCon
thekraken
20
1.3k
Embracing the Ebb and Flow
colly
81
4.3k
GitHub's CSS Performance
jonrohan
1026
450k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
20
7.2k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.3k
Creatively Recalculating Your Daily Design Routine
revolveconf
214
11k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
17
8.7k
Visualization
eitanlees
139
14k
Six Lessons from altMBA
skipperchong
24
3.2k
Design by the Numbers
sachag
277
18k
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