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

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

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