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

66b5fea05e9370317581701c87e50eae?s=47 8845musign
November 18, 2017

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

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

66b5fea05e9370317581701c87e50eae?s=128

8845musign

November 18, 2017
Tweet

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 EJWTQBOλΠϓ 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. EJWTQBOλΠϓ <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. EJWTQBOλΠϓ ྫ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 EJWTQBOΛ࢖͏ͱͯ͠΋ۃྗҙਤΛ࢒͢ ˞ޙ೔஫ऍ
 EMͰྑͦ͞͏

  27. ௐࠪࢿྉ https://docs.google.com/spreadsheets/d/ 1u4HjUgez3DYqqC0sHVw-AV6N- zA_VWOX2z_d0WI3rCc/edit#gid=0

  28. ͝੩ௌ
 ͋Γ͕ͱ͏͍͟͝·ͨ͠ αϒϦϛφϧͰ͢ ෲےϩʔϥʔΛ͓ئ͍͠·͢