項目：値のマークアップについて

まぼろしのマークアップ勉強会#1での発表資料です。

Transcript

1. ߲໨ ΞλΠɺ͍͖ͨͩʹΊ Λ΍ͬͯʜ ·΅Ζ͠ͷϚʔΫΞοϓษڧձ
    ஋ ௖ ໨ ஋
2. ߲໨஋ɺͲ͏
   ϚʔΫΞοϓ͢Δ͔
3. ෲےϩʔϥʔͷྗΛ৴͡Ζ גࣜձࣾνʔϜεϐϦοτ
   6*σβΠφʔ
   ࣾ಺֎ͰෲےϩʔϥʔϋϥεϝϯτΛੜۀʹ͍ͯ͠Δ @8845musign ΋͙ΒͰ͢ ˞ޙ೔஫ऍ
   ձࣾ΍ΊͨΘ͚Ͱ͸ͳ͍Ͱ͢
 ෲےͷ΄͏͕ڧ͍͚ͩͰ͢
4. ʮ߲໨ɿ஋ʯ͜Μͳࢠ w ·ͣɺ߲໨໊͕͋Δ
   w ͦΕʹରԠ͢Δ஋Λ࣋ͭ
   w ஋͸ಈతʹมԽ͢Δ৔߹͕ଟ͍
   w Πϝʔδ͸͜Μͳײ͡Ͱ͢ˣ ෲےϙΠϯτɿ
   
5. ௕೥ͷখ͞ͳ೰ΈɺͲ͏
   ϚʔΫΞοϓ͢Δͷʁ
6. ΈΜͳͲ͏ͯ͠Δ͔
 ௐ΂·ͨ͠
7. Twitter facebook FRESH! Calendar Instagram Spotify dribbble Evernot inVision Github Amazon Paypal heroku Todoist Trello Youtube Protto ͸ͯͳϒοΫϚʔ Apple
8. ௐ΂·ͨ̎̌͠αΠτ Twitter facebook FRESH! Calendar Instagram Spotify dribbble Evernot inVision Github Amazon Paypal heroku Todoist Trello Youtube Protto ͸ͯͳϒοΫϚʔ Apple
9. ෼ྨ͠·ͨ͠ w ϦετλΠϓ
   w EJW
   
   TQBOλΠϓ
   w PVUMJOFλΠϓ
   w ఆٛϦετλΠϓ
   w ςʔϒϧλΠϓ ˞ޙ೔஫ऍ
 ϚαΧϦͣΈ
10. ͞ͺ͊ʔʔʔͬͱ
 ݟ͖ͯ·͠ΐ͏
11. ϦετλΠϓ <ul> <li> <a href="/8845musign/following" data-element- term="following_stats" data-original-title="371ਓΛϑΥϩʔத"> <span>ϑΥϩʔ</span> <span data-count="371" data-is-compact="false">371</span> </a> </li> …
 </ul>
12. ϦετλΠϓ w ࠓճͷௐࠪͰ͸Ұ൪ଟ͔ͬͨ
    w ౰ͨΓલ͕ͩҰ࿈ͷ߲໨ΛҰͭͷηοτͱ͠ ͯදݱͰ͖Δ
    w εΫϦʔϯϦʔμʔͰ͸ʮϦετ߲໨ͱಡ Έ্͛ΒΕΔʯ ྫ
    https://twitter.com/
13. EJW
    
    TQBOλΠϓ <div> <span>໊લ</span><span>Yokouchi Hiroki</span> <div> <button><span class="mc-tertiary-link-button-content"><span class="mc-tertiary-icon-text">ฤू</span></span> </button> </div> </div> …
14. EJW
    
    TQBOλΠϓ ྫ
    https://dropbox.com/ w ESPQCPYͰ͸ʮฤूʯ΍ʮ࡟আʯͳͲͷػ ೳϘλϯ͕഑ஔ͞Ε͍ͯΔ
    w ֤ʹෳࡶͳϨΠΞ΢τ΍ػೳ͕٧Ίࠐ·Ε ͍ͯΔ৔߹ʹ࠾༻͞Ε͍ͯΔ܏޲͕ݟΒΕ ͨ
    w ࣗ෼ͩͬͨΒɺෳ਺ͷ߲໨͕ͳ͍৔߹ʹͷ Έ࢖͏͔΋ʁ
15. PVUMJOFλΠϓ <div> <h3>Account Level</h3> <div> <p> Evernote Basic <br> <a href="...">Manage subscription</a> </p> </div> </div> ….
16. PVUMJOFλΠϓ w ݟग़͠Λ࣋ͪɺΞ΢τϥΠϯΛܗ੒͢Δ
 λΠϓ
    w ϖʔδͷϝΠϯίϯςϯπΛද͢৔߹ʹ͜ ͷϚʔΫΞοϓ͕ଟ͍
    w ͪΐͬͱ߲໨ɿ஋ͱ͸ݴ͍ͮΒ͍ײ΋͋Δ
    w Ҿ༻ͨ͠σβΠϯΛΈΔͱςʔϒϧͰ΋͍͍ ͷͰ͸ʁͱ΋
    w εΫϦʔϯϦʔμʔͰҠಈ͠΍͍͢ ྫ
    https://www.evernote.com/
17. ఆٛϦετλΠϓ <dl class="dl-horizontal app-settings-info"> <dt>Region</dt> <dd><i id="ember1883" class="icon icon-region-united- states"></i> United States</dd> <dt>Stack</dt> <dd> heroku-16 </dd> ... </dl>
18. ఆٛϦετλΠϓ w ࠓճͷௐࠪͷதͰ͸গͳ͘ɺ̍ྫ͔͠ൃݟ Ͱ͖ͳ͔ͬͨ
    w Ұ࿈ͷ߲໨ΛҰͭͷηοτͱͯ͠දݱͰ͖Δ
    w εΫϦʔϯϦʔμʔͰ͸ʮఆٛϦετ˓߲໨ʯ ͱಡΈ্͛ΒΕΔ
    w ʮ߲໨ɿ஋ʯΛఆٛϦετͱ͢Δ͔͸ٞ࿦͕ ෼͔Εͦ͏ͳͱ͜Ζ
    w ੲఆٛϦετͰςʔϒϧΛ࡞οͯΔਓ͕ͨͪ ͍ͨ͜ͱΛࢥ͍ग़ͨ͠
    ྫ
    https://heroku.com/ ˞ޙ೔஫ऍ
 ϚαΧϦͣΈ
19. ςʔϒϧλΠϓ <td data-col="ipadpro" class="current"> <p><span class="capacity">64GB</span><span class="price">86,800ԁʢ੫ผʣ</span> </p> <p><span class="capacity">256GB</span><span class="price">103,800ԁʢ੫ผʣ</span> </p> <p><span class="capacity">512GB</span><span class="price">125,800ԁʢ੫ผʣ</span> </p> </td>
20. w গͳ͔ͬͨ
    w ݟ͔ͭͬͨαϯϓϧ΋গ͠มଶײ
    w ද૊ΈͬΆ͍ʮ߲໨ɿ஋ʯͩͬͨΒී௨ʹ 5BCMFͰϚʔΫΞοϓͯ͠΋͍͍ΜͰ͸ ྫ: https://www.apple.com/jp/ipad/compare/ ςʔϒϧλΠϓ
21. ΍Γํόϥόϥ
22. ͱ͜ΖͰ
23. ΞΠίϯʹཔΓ੾Βͳ͍ <span> <svg title="ࢹௌ਺" role="img"> <use></use> </svg> <span>2,674</span> <svg title="ίϝϯτ਺" role="img"> <use></use> </svg> <span>267</span> </span> ྫ: https://freshlive.tv/
24. ͓·͚
 ͜Ε΋߲໨ɿ஋ʁ
25. ʢݟͨ໨ʣφνϡϥϧλΠϓ <li> <strong> <a href="..." title=“͢΂ͯͷ ϒοΫϚʔΫΛݟΔ"> <span>171</span> users </a> </strong> </li> ྫ
    http://b.hatena.ne.jp/ w ஋ɿ୯Ґͷ૊Έ߹Θͤɺ޿ٛͷ
 ߲໨ɿ஋ʁ
    w ࣗવͳදݱɺσβΠϯʹΑͬͯ͸
 ͜͏͍͏දݱ͕͍͋ͬͯΔՕॴ΋
 ΞϦͦ͏
    
26. ·ͱΊ w ·ͣίϯςϯπΛݟΔɺߟ͑Δ
    w ෳ਺͋ͬͨΒϦετɺϝΠϯίϯςϯπͳΒΞ΢τ ϥΠϯʹ͠Α͏ͱࢥͬͨ
    w EJW
    
    TQBOΛ࢖͏ͱͯ͠΋ۃྗҙਤΛ࢒͢ ˞ޙ೔஫ऍ
 EMͰྑͦ͞͏
27. ௐࠪࢿྉ https://docs.google.com/spreadsheets/d/ 1u4HjUgez3DYqqC0sHVw-AV6N- zA_VWOX2z_d0WI3rCc/edit#gid=0
28. ͝੩ௌ
 ͋Γ͕ͱ͏͍͟͝·ͨ͠ αϒϦϛφϧͰ͢
    ෲےϩʔϥʔΛ͓ئ͍͠·͢