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

WEB屋さん1年目に知ってほしいマークアップ4つのこと

 WEB屋さん1年目に知ってほしいマークアップ4つのこと

技術者ではないけれど、WEBに携わる会社に入って一年目の人に知ってほしいマークアップのこと。

atsuco

May 30, 2014
Tweet

More Decks by atsuco

Other Decks in Programming

Transcript

  1. 8԰͞Μ̍೥໨ʹ஌ͬͯ΄͍͠
    ϚʔΫΞοϓ̐ͭͷ͜ͱ

    View Slide

  2. ઙԬರࢠ͓͔͋͋ͭ͜͞
    ϑϩϯτΤϯυΤϯδχΞ
    ೣ೿

    View Slide

  3. ࣗࣾ։ൃΛ͢Δձࣾͷࣾһͱͯ͠
    ࠷௿ݶ஌͓͍ͬͯͯ΄͍͜͠ͱ

    View Slide

  4. ϚʔΫΞοϓͬͯͳʹʁ
    )5.-$44+4
    4&0ͷ͸ͳ͠
    ࣮ࡍͲ͏΍Δͷʁ
    ࠓ೔࿩͢͜ͱ
    ʁ

    View Slide

  5. ϚʔΫΞοϓͬͯͳʹʁ

    View Slide

  6. ʮσβΠϯ͕ܾ·ͬͨͷʹ
    ͳΜͰ͙͢ΦʔϓϯͰ͖ͳ͍ͷʁʯ
    લ৬ʹͯ

    View Slide

  7. ઃܭ͚ͨͩ͠Ͱ͸͓Ոʹ͸
    ॅΊͳ͍Ͱ͢ΑͶʁ

    View Slide

  8. ը૾͕ೖΔΑ
    Ϧετ͕
    ೖΔΑ
    ϦϯΫ͢ΔΑ
    MJLFϘλϯ
    ͚ͭΔΑ
    ಈը
    ຒΊࠐΉΑ
    8ϖʔδ

    View Slide

  9. ը໘ͷߏ੒Λϒϥ΢β͕ೝࣝͰ͖Δݴ༿ʹ
    ม׵ͯ͋͛͠ͳ͚Ε͹͍͚ͳ͍

    View Slide

  10. )5.-$44+4

    View Slide

  11. IUNM
    DTT
    KT
    Ϣʔβʔ
    ϒϥ΢βͰӾཡ

    View Slide

  12. )ZQFS5FYU.BSLVQ-BOHVBHF
    ϋΠύʔςΩετͷͨΊͷߏ଄هड़༻ݴޠ

    View Slide

  13. )5.-
    ͋Δཁૉ͕ͲΜͳछྨͷ΋ͷͳͷ͔

    View Slide

  14. View Slide

  15. ը૾
    ද૊Έ
    ϦϯΫ
    Ϧετ

    View Slide

  16. Ͳ͔͜ΒͲ͜·Ͱ͕Կͷཁૉ͔
    ʁ

    View Slide

  17. QςΩετͱ͔͕ೖΔΑʂQ

    View Slide

  18. QςΩετͱ͔͕ೖΔΑʂQ
    Q͔ΒQ·Ͱ
    ஈམͩΑʂ
    ด͡λά
    ։࢝λά

    View Slide

  19. ը૾ JNHTSDը૾ͷ63-
    ϦϯΫ BISFGϦϯΫઌͷ63-ςΩετB
    Ϧετ VMϦετͷ߲໨VM
    Ϧετͷ߲໨ MJςΩετMJ

    View Slide

  20. ը૾ JNHTSDը૾ͷ63-
    ϦϯΫ BISFGϦϯΫઌͷ63-ςΩετB
    Ϧετ VMϦετͷ߲໨VM
    Ϧετͷ߲໨ MJςΩετMJ
    ด͡λά͕
    ཁΒͳ͍

    View Slide

  21. ը૾ JNHTSDը૾ͷ63-
    ϦϯΫ BISFGϦϯΫઌͷ63-ςΩετB
    Ϧετ VMϦετͷ߲໨VM
    Ϧετͷ߲໨ MJςΩετMJ
    ಛघͳ
    ૊Έ߹Θͤ

    View Slide

  22. $BTDBEJOH4UZMF4IFFUT
    )5.-ͳͲͷ૷০ɾදࣔํ๏ͷࢦࣔॻ

    View Slide

  23. $44
    ͋Δཁૉ͕ͲΜͳ͋͠Β͍Λ͢Δͷ͔

    View Slide

  24. View Slide

  25. ڧௐจ͸
    ੺͘͢Δ
    Ϧετ͸
    ԣʹฒ΂Δ
    ݟग़͠͸
    ໨ཱͨͤΔ
    ϦϯΫ͸
    ੨͘͢Δ

    View Slide

  26. ର৅ͷԿΛͲ͏͢Δ
    ʁ

    View Slide

  27. B\
    DPMPSC
    UFYUEFDPSBUJPOVOEFSMJOF
    ^

    View Slide

  28. B\
    DPMPSC
    UFYUEFDPSBUJPOVOEFSMJOF
    ^
    Bཁૉͷ
    จࣈ৭Λ ੨͘͢Δ

    View Slide

  29. B\
    DPMPSC
    UFYUEFDPSBUJPOVOEFSMJOF
    ^
    จࣈ૷০Λ Լઢʹ͢Δ
    Bཁૉͷ

    View Slide

  30. ԣ෯ XJEUI QY BVUP
    ߴ͞ IFJHIU QY BVUP
    ༨ന NBSHJO QY BVUP
    ॏͳΓͷॱং [JOEFY ਺ࣈ
    จࣈͷ഑ஔ UFYUBMJHO MFGU DFOUFS SJHIU

    View Slide

  31. +BWB4DSJQU
    ϒϥ΢βʹ࣮૷͞Ε͍ͯΔεΫϦϓτݴޠ

    View Slide

  32. +4
    ͋Δཁૉ͕ͲΜͳಈ͖Λ͢Δͷ͔

    View Slide

  33. View Slide

  34. ϘλϯΛԡ͢ͱ
    ϧʔϨοτ͕ճస͢Δ

    View Slide

  35. )5.- ཁૉͷछྨΛࢦఆ͢Δ IUNM
    $44 ཁૉͷ͋͠Β͍Λࢦఆ͢Δ DTT
    +4 ཁૉͷಈ͖Λࢦఆ͢Δ KT

    View Slide

  36. IUNM
    DTT
    KT
    Ϣʔβʔ
    ϒϥ΢βͰӾཡ
    ಈ͖Λ͚ͭΔ
    ݟͨ໨Λ੔͑Δ

    View Slide

  37. 4&0ͷ͸ͳ͠

    View Slide

  38. 4FBSDI&OHJOF0QUJNJ[BUJPO
    αʔνΤϯδϯ࠷దԽ

    View Slide

  39. 4&0
    ݕࡧ݁ՌͷॱҐΛ্͛Δରࡦ

    View Slide

  40. View Slide

  41. ࠷ॳʹ
    දࣔ͞ΕͯΔʂ

    View Slide

  42. ϖʔδͷ಺༰Λ൑அ͍ͯ͠Δ
    Կ͕ॻ͍ͯ
    ͋Δͷʁ
    ৴པͰ͖Δ
    ৘ใʁ
    Τϥʔ
    ग़ͯͳ͍ʁ

    View Slide

  43. ϖʔδ
    λΠτϧʁ
    ݕࡧ༻
    Ωʔϫʔυʁ
    γΣΞ༻
    ը૾ʁ
    ೔ຊޠʁ
    ӳޠʁ
    ϖʔδ֓ཁʁ
    8ϖʔδ

    View Slide

  44. ϒϥ΢βʹදࣔ͞Εͳ͍͚Ͳඞཁͳ৘ใ
    ʹϝλ৘ใ

    View Slide

  45. ݕࡧΤϯδϯʹਖ਼͘͠఻͑Δ
    ʹਖ਼͘͠ϚʔΫΞοϓ͢Δ
    େࣄʂ

    View Slide

  46. ࣮ࡍͲ͏΍Δͷʁ

    View Slide

  47. )5.- ཁૉͷछྨΛࢦఆ͢Δ IUNM
    $44 ཁૉͷ͋͠Β͍Λࢦఆ͢Δ DTT
    +4 ཁૉͷಈ͖Λࢦఆ͢Δ KT

    View Slide

  48. )5.- ཁૉͷछྨΛࢦఆ͢Δ IUNM
    $44 ཁૉͷ͋͠Β͍Λࢦఆ͢Δ DTT
    +4 ཁૉͷಈ͖Λࢦఆ͢Δ KT
    ্͔ΒԼʹ
    ίʔσΟϯά͢Δ

    View Slide

  49. )5.-

    View Slide

  50. $44

    View Slide

  51. ·ΘΔΑʂ
    +4

    View Slide

  52. σβΠϯΛཁૉʹ෼ղ͢Δ
    )5.-ʹ͢Δ
    ཁૉʹ໊લΛ͚ͭΔ
    ελΠϧΛ͋ͯΔ
    ಈ͖Λ͚ͭΔ

    View Slide

  53. ͦͷલʹɺԼ४උ
    ʁ

    View Slide

  54. IUNM
    QOH
    KQH
    DTT
    KT
    HJG
    IUNM
    IUNM

    View Slide

  55. JNH DTT
    KT
    BCPVU CVTJOFTT༻్͝ͱʹ
    ϑΥϧμΛ෼͚Δ

    View Slide

  56. σβΠϯΛཁૉʹ෼ղ͢Δ
    )5.-ʹ͢Δ
    ཁૉʹ໊લΛ͚ͭΔ
    ελΠϧΛ͋ͯΔ
    ಈ͖Λ͚ͭΔ

    View Slide

  57. View Slide

  58. ஈམ
    ڧௐจ
    ݟग़͠େ
    ݟग़͠খ

    View Slide

  59. ஈམ
    ڧௐจ
    ݟग़͠େ
    ݟग़͠খ
    ҹ࡮ʹखॻ͖
    ͯ͠·ͨ͠

    View Slide

  60. σβΠϯΛཁૉʹ෼ղ͢Δ
    )5.-ʹ͢Δ
    ཁૉʹ໊લΛ͚ͭΔ
    ελΠϧΛ͋ͯΔ
    ಈ͖Λ͚ͭΔ

    View Slide

  61. ஈམ
    ڧௐจ
    ݟग़͠େ
    ݟग़͠খ

    View Slide

  62. ݟग़͠େ II
    ݟग़͠খ II
    ஈམ QQ
    ڧௐจ TUSPOHTUSPOH

    View Slide

  63. QஈམͷςΩετTUSPOHڧௐจTUSPOH
    ஈམͷςΩετʜQ
    !
    Iݟग़͠େI
    QஈམͷςΩετTUSPOHڧௐจTUSPOH
    ஈམͷςΩετʜQ
    !
    Iݟग़͠େI
    Iݟग़͠খI
    QஈམͷςΩετʜQ
    QஈམͷςΩετʜQ

    View Slide

  64. σβΠϯΛཁૉʹ෼ղ͢Δ
    )5.-ʹ͢Δ
    ཁૉʹ໊લΛ͚ͭΔ
    ελΠϧΛ͋ͯΔ
    ಈ͖Λ͚ͭΔ

    View Slide

  65. #IUNM
    DTT
    $IUNM
    "IUNM
    ڞ௨ͷ
    ελΠϧ

    View Slide

  66. #IUNM
    DTT
    $IUNM
    "IUNM
    ݟग़͠େ͸
    ੺͕͍͍ʂ
    ݟग़͠େ͸
    ྘͕͍͍ʂ

    View Slide

  67. ͦΕͧΕͷཁૉʹ໊લΛ෇͚ͯղܾ
    ໊લ͕ಉ͡
    ʹ͋͠Β͍͕ಉ͡

    View Slide

  68. IDMBTTIE3FE੺ͷݟग़͠େI
    IDMBTTIE(SFFO྘ͷݟग़͠େI

    View Slide

  69. IDMBTTIE3FE੺ͷݟग़͠େI
    IDMBTTIE(SFFO྘ͷݟग़͠େI
    എܠ৭͸੺ʂ
    എܠ৭͸྘ʂ

    View Slide

  70. σβΠϯΛཁૉʹ෼ղ͢Δ
    )5.-ʹ͢Δ
    ཁૉʹ໊લΛ͚ͭΔ
    ελΠϧΛ͋ͯΔ
    ಈ͖Λ͚ͭΔ

    View Slide

  71. I
    I

    View Slide

  72. Լͷཁૉͱͷ༨നɿɹQY
    ཁૉ಺ͷ༨നɿɹQY
    ԼϘʔμʔɿɹQYɹ௚ઢɹˌ&#
    എܠͷ৭ɿɹ⒎GF
    จࣈͷଠ͞ɿɹଠ͍
    จࣈαΠζɿɹQY
    I

    View Slide

  73. Լཁૉͱͷ༨ന NBSHJOCPUUPN
    ཁૉ಺ͷ༨ന QBEEJOH
    ԼϘʔμʔ CPSEFSCPUUPN
    എܠͷ৭ CBDLHSPVOEDPMPS
    จࣈͷଠ͞ GPOUXJHIU
    จࣈͷେ͖͞ GPOUTJ[F

    View Slide

  74. I\
    NBSHJOCPUUPNQY
    QBEEJOHQY
    CPSEFSCPUUPNQYTPMJE&#
    CBDLHSPVOEDPMPS⒎GF
    GPOUXFJHIUCPME
    GPOUTJ[FQY

    ^

    View Slide

  75. DMBTTIE3FE

    View Slide

  76. IE3FE\
    NBSHJOCPUUPNQY
    QBEEJOHQY
    CPSEFSCPUUPNQYTPMJE&#
    CBDLHSPVOEDPMPS⒎GF
    GPOUXFJHIUCPME
    GPOUTJ[FQY

    ^

    View Slide

  77. IE3FE\
    NBSHJOCPUUPNQY
    QBEEJOHQY
    CPSEFSCPUUPNQYTPMJE&#
    CBDLHSPVOEDPMPS⒎GF
    GPOUXFJHIUCPME
    GPOUTJ[FQY

    ^
    DMBTTIE3FE

    View Slide

  78. Qͷதʹ͋Δ
    TUSPOH

    View Slide

  79. จࣈͷ৭ɿɹ''
    จࣈͷଠ͞ɿɹଠ͍
    Qͷதʹ͋Δ
    TUSPOH

    View Slide

  80. QTUSPOH\
    DPMPS''
    GPOUXFJHIUCPME
    ^

    View Slide

  81. QTUSPOH\
    DPMPS''
    GPOUXFJHIUCPME
    ^
    Qͷதʹ͋Δ
    TUSPOH

    View Slide

  82. σβΠϯΛཁૉʹ෼ղ͢Δ
    )5.-ʹ͢Δ
    ཁૉʹ໊લΛ͚ͭΔ
    ελΠϧΛ͋ͯΔ
    ಈ͖Λ͚ͭΔ

    View Slide

  83. γεςϜݚमͰ΍ΔͷͰׂѪ

    View Slide

  84. ࠓ೔ͷ·ͱΊ

    View Slide

  85. ϚʔΫΞοϓͬͯͳʹʁ
    σβΠϯΛϒϥ΢β͕ೝࣝͰ͖Δݴ༿ʹ͢Δ
    )5.-$44+4
    )5.-ɿཁૉͷछྨΛࢦఆ͢Δ
    $44ɿཁૉͷ͋͠Β͍Λࢦఆ͢Δ
    +4ɿཁૉͷಈ͖Λࢦఆ͢Δ

    View Slide

  86. 4&0ͷ͸ͳ͠
    αʔνΤϯδϯͷ࠷దԽ
    త֬ͳϚʔΫΞοϓ͕ඞਢ

    View Slide

  87. ࣮ࡍͲ͏΍Δͷʁ
    σβΠϯΛཁૉʹ෼ղ͢Δ
    )5.-ʹ͢Δ
    ཁૉʹ໊લΛ͚ͭΔ
    ελΠϧΛ͋ͯΔ
    ಈ͖Λ͚ͭΔ

    View Slide

  88. ͓ർΕ༷Ͱͨ͠

    View Slide