Upgrade to Pro — share decks privately, control downloads, hide ads and more …

マークアップの最適解を見つけ出す方法 in Frontrend Vol.9

マークアップの最適解を見つけ出す方法 in Frontrend Vol.9

Frontrend Vol.9 でお話しした内容です。
動画配信もされています → https://freshlive.tv/tech-conference/109133

Kasumi Morita

April 28, 2017
Tweet

More Decks by Kasumi Morita

Other Decks in Programming

Transcript

  1. Ͳ͏΍ͬͯϚʔΫΞοϓ͍ͯ͠·͔͢ʁ ͓஌Βͤ  ͓஌Βͤ  Q Q EJW EJW 

    ͓஌Βͤ  BSUJDMF BSUJDMF I I  MJ MJ Q Q 
  2. <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>
  3. <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> ו׍׵׮꟦麩׏גכְזְ
  4. ϚʔΫΞοϓ͢Δ্Ͱج४ʹ͢Δ΋ͷͨͪ ϧʔϧܥ ‣ 8$΍-4ͳͲͷ࢓༷ ‣ +*4ن֨ ‣ ݕࡧΤϯδϯͷΞϧΰϦζϜ ‣ $.4ͷ࢓༷

    ϧʔϧܥ͸Ұ౓ܾ·ͬͨ΋ͷ͸ͳ͔ͳ͔มΘΒͳ͍ɻ কདྷͷ͜ͱ΋ߟ͑ͯେମ͸ϧʔϧܥΛج४ɻ
  5. ڍಈΛ஌͔ͬͯΒमਖ਼ͨ͠ϚʔΫΞοϓͦͷ JUFN\
 EJTQMBZNTHSJE
 EJTQMBZHSJE ^ JUFNIFBEFS\
 NTHSJESPX
 HSJESPX ^ JUFNGPPUFS\


    NTHSJESPX
 HSJESPX ^ σβΠϯʹҾ͖ͣΒΕͣʹ%0.ߏ଄Λอͭʢ$44ͦͷʣ هࣄͷλΠτϧ͕ೖΓ·͢ ϥϕϧ" ϥϕϧ#
  6. ༏ઌॱҐͷྫ  $.4ઃܭ  ࢓༷  4&0ରࡦ&'0ରࡦ
 8FCΞΫηγϏϦςΟ  8FCΞΫηγϏϦςΟ

     ࢓༷  $.4ઃܭ  &'0ରࡦ4&0ରࡦ $.4ߋ৽ॏࢹͷҊ݅ 8FCΞΫηγϏςΟॏࢹͷҊ݅ ‣ ΋ͪΖΜɺͲΕ΋େࣄ
 ͦΕͰ΋ɺ·ͣ͸ཉுΒͣʹ࠷༏ઌࣄ߲Λ࣮֬ʹ͜ͳͦ͏
  7. Α͘ΈΔϚʔΫΞοϓͦͷ ‣ ΋͠ϦϯΫઌ͕هࣄ͔ͩΒͱ͍͏ͰBSUJDMFཁૉΛબΜͰ͍ͨΒʜ ͓஌Βͤͷهࣄ ͓஌Βͤͷهࣄ ͓஌Βͤͷهࣄ ͓஌Βͤͷهࣄ BSUJDMF BSUJDMF BSUJDMF

    BSUJDMF ೥݄೔ ೥݄೔ ೥݄೔ ͓஌Βͤͷهࣄ ͓஌Βͤͷهࣄ ͓஌Βͤͷهࣄ Χ ς ΰ Ϧ ʔ Χ ς ΰ Ϧ ʔ Χ ς ΰ Ϧ ʔ BSUJDMF BSUJDMF BSUJDMF αΠτλΠτϧ φϏɹφϏɹφϏ̏φϏ ঎඼"ͷৄࡉ͸ͪ͜Β ∠ ∠ BSUJDMF