$30 off During Our Annual Pro Sale. View Details »

見出しとアウトラインのはなし / wpshinshu vol 4

見出しとアウトラインのはなし / wpshinshu vol 4

Toro_Unit (Hiroshi Urabe)

October 20, 2018
Tweet

More Decks by Toro_Unit (Hiroshi Urabe)

Other Decks in Technology

Transcript

  1. ݟग़͠ͱΞ΢τϥΠϯͷ͸ͳ͠
    Toro_Unit@ Shinshu WP Meetup vol.4
    1

    View Slide

  2. $ whoami
    2

    View Slide

  3. Toro_Unit
    ઎෦ ߛ (͏Β΂ ͻΖ͠)
    • Frontend Engineer
    • WordPress Plugin and Theme
    Developer
    Github: @torounit
    Twitter: @Toro_Unit
    3

    View Slide

  4. ࡳຈͷձࣾͰϦϞʔτϫʔΫͯ͠·͢
    4

    View Slide

  5. 5

    View Slide

  6. Contribution
    • WordPress 5.0.1 and 5.1 (Α͍ͯ)
    • WordCamp Kyoto 2017 / Osaka
    2018 / Ogijima 2018 ࣮ߦҕһ
    • WordCamp Osaka 2018 Speaker.
    • etc...
    6

    View Slide

  7. Plugins and Themes
    • Custom Post Type Permalinks
    • Simple Post Type Permalinks
    • Powerful Posts Per Page (PPPP)
    • Smart PWA <- new!
    • Vanilla
    • and more...
    7

    View Slide

  8. Do you know HTML ?
    8

    View Slide

  9. HTML is...
    • HyperText Markup Language
    • ver 5.2
    • WHATWG͕ඪ४࢓༷ʢHTML Living StandardʣΛࡦఆͯ͠
    ͍ΔɻͦΕΛݩʹW3C ͕קࠂ͍ͯ͠Δɻ
    9

    View Slide

  10. 10

    View Slide

  11. 11

    View Slide

  12. Do you know ?






    12

    View Slide

  13. W3C ͷઆ໌ΑΓҾ༻ɻ
    These elements represent headings for their sections.
    e
    These elements have a rank given by the number in their name.
    The h1 element has the highest rank, the h6 element has the
    lowest rank, and two elements with the same name have equal
    rank.
    e
    Use the rank of heading elements to create the document outline.
    13

    View Slide

  14. ࿨༁
    ͜ΕΒͷཁૉ͸ɺηΫγϣϯͷݟग़͠Λද͠·͢ɻ
    e
    ͜ΕΒͷཁૉʹ͸ɺ໊લͷ൪߸Ͱࢦఆ͞ΕͨϥϯΫ͕͋Γ·
    ͢ɻ h1ཁૉ͸࠷ߴϥϯΫΛ࣋ͪɺh6ཁૉ͸࠷௿ϥϯΫΛ࣋ͪɺ
    ಉ໊͡લͷཁૉ͸ಉ͡ϥϯΫΛ࣋ͪ·͢ɻ
    e
    ݟग़͠ཁૉͷϥϯΫΛ࢖༻ͯ͠ɺυΩϡϝϯτΞ΢τϥΠϯΛ
    ࡞੒͠·͢ɻ
    14

    View Slide

  15. ηΫγϣϯ
    ষɻจষͷ۠෼ɻ
    Ξ΢τϥΠϯ
    จষͷશମͷߏ੒
    15

    View Slide

  16. Do you know ?




    16

    View Slide

  17. Sectioning content (۠෼ίϯςϯπ)
    ,, , ͸ Sectioning content
    ͱ͍͏ΧςΰϦʔʹଐ͢Δλάɻ
    17

    View Slide


  18. ηΫγϣϯΛද͢ɻΑΓదͨ͠λά͕͋ΔͳΒ͹ͦͪΒΛ࢖͏
    ͜ͱɻ

    ϒϩά΍৽ฉͳͲͷهࣄɺSNS΍ܝࣔ൘ͳͲͷ౤ߘͳͲɺࣗݾ
    ׬݁ͨ͠ηΫγϣϯɻ
    18

    View Slide


  19. φϏήʔγϣϯɻϝχϡʔ౳Λද͢ηΫγϣϯɻ

    จॻͷϝΠϯίϯςϯπͱؒ઀తͳؔ܎͔͍࣋ͬͯ͠ͳ͍ηΫ
    γϣϯɻ޿ࠂͱ͔αΠυόʔͱ͔ɻ
    19

    View Slide

  20. Example.
    20

    View Slide

  21. ௕໺ݝͷࢢொଜ

    ௕໺ࢢ
    ળޫࣉ͕͋ΔΑ.


    দຊࢢ
    দຊ৓͕͋ΔΑ.

    21

    View Slide

  22. Outline.
    1. ௕໺ݝͷࢢொଜ
    1. ௕໺ࢢ
    2. দຊࢢ
    22

    View Slide

  23. ݟग़͠ͷϨϕϧʹؔ܎ͳ͘จॻߏ଄͸౳Ձɻ
    ௕໺ݝͷࢢொଜ

    ௕໺ࢢ
    ળޫࣉ͕͋ΔΑ.


    দຊࢢ
    দຊ৓͕͋ΔΑ.

    23

    View Slide

  24. ηΫγϣϯͷߏ଄ʹΑΓɺจॻߏ଄͸ܾఆ͞ΕΔɻ
    • શ෦ Ͱ΋ HTML ͷ࢓༷తʹ͸શ͘໰୊ແ͍ɻ
    • ݟग़͠ͷແ͍ηΫγϣϯ͕͋Δ৔߹ɺλΠτϧແ͠ͷηΫ
    γϣϯͱͯ͠ೝࣝ͞ΕΔɻ
    • ௨ৗ ʹ͸ݟग़͕͋͠Δ͸ͣɻ
    24

    View Slide

  25. ҉໧తͳηΫγϣϯ
    25

    View Slide

  26. λάΛ࢖Θͳ͍৔߹Ͱ΋ɺจॻߏ଄ΛఆٛͰ͖Δɻ
    26

    View Slide

  27. ௕໺ݝͷࢢொଜ
    ௕໺ࢢ
    ળޫࣉ͕͋ΔΑ.
    দຊࢢ
    দຊ৓͕͋ΔΑ.
    27

    View Slide

  28. ௕໺ݝͷࢢொଜ

    ௕໺ࢢ
    ળޫࣉ͕͋ΔΑ.


    দຊࢢ
    দຊ৓͕͋ΔΑ.

    28

    View Slide

  29. Outline.
    1. ௕໺ݝͷࢢொଜ
    1. ௕໺ࢢ
    2. দຊࢢ
    29

    View Slide

  30. • - ͸ηΫγϣϯͷλΠτϧͳͷͰɺݟग़͠λά͕͋
    Δ৔߹ɺηΫγϣϯ͕͸͡·ͬͨϞϊͱͯ͠ղऍ͞ΕΔɻ
    • Ϩϕϧ͕௿͍ηΫγϣϯ͕͋Δ৔߹ɺͦΕ͸αϒηΫγϣϯ
    ͕͸͡·ͬͨϞϊͱͯ͠ɺղऍ͞ΕΔɻ
    • ಉ͡Ϩϕϧ͔ͦΕΑΓߴ͍৔߹ɺݱࡏͷηΫγϣϯ͕ऴΘ
    Γɺ৽͍͠ηΫγϣϯ͕͸͡·ͬͨϞϊͱͯ͠ղऍ͞ΕΔɻ
    30

    View Slide

  31. ௕໺ݝ
    ஍ཧ
    ࢢொଜ
    ௕໺ࢢ
    দຊࢢ
    ಛ௃
    31

    View Slide

  32. outline.
    1. ௕໺ݝ
    1. ஍ཧ
    2. ࢢொଜ
    1. ௕໺ࢢ
    2. দຊࢢ
    3. ಛ௃
    32

    View Slide

  33. ౳ͷதͰ΋ద༻͞ΕΔɻ
    33

    View Slide

  34. ௕໺ݝ
    ஍ཧ

    ࢢொଜ
    ௕໺ࢢ
    দຊࢢ

    ಛ௃
    34

    View Slide

  35. outline.
    1. ௕໺ݝ
    1. ஍ཧ
    2. ࢢொଜ
    1. ௕໺ࢢ
    2. দຊࢢ
    3. ಛ௃
    35

    View Slide

  36. ௕໺ݝ
    ஍ཧ

    ࢢொଜ
    ௕໺ࢢ
    দຊࢢ

    ಛ௃
    36

    View Slide

  37. ͜͏ղऍ͞ΕΔɻ
    37

    View Slide

  38. ௕໺ݝ
    ஍ཧ

    ࢢொଜ


    ௕໺ࢢ


    দຊࢢ

    ಛ௃
    38

    View Slide

  39. outline.
    1. ௕໺ݝ
    1. ஍ཧ
    2. ࢢொଜ
    3. ௕໺ࢢ
    4. দຊࢢ
    5. ಛ௃
    39

    View Slide

  40. ݟग़͠ͷ෇͚ํͰɺจॻߏ଄͕มΘͬͯ͠·͏ɻ
    40

    View Slide


  41. هࣄͷλΠτϧ
    ຊจ...
    ݟग़͠
    ຊจ...

    Outline.
    1. هࣄͷλΠτϧ
    1. ݟग़͠
    41

    View Slide


  42. هࣄͷλΠτϧ
    ຊจ...
    ݟग़͠
    ຊจ...

    ผͷηΫγϣϯʹͳͬͯ͠·͏ɻ
    1. هࣄͷλΠτϧ
    2. ݟग़͠
    42

    View Slide

  43. Ξ΢τϥΠϯͷॏཁੑ
    43

    View Slide

  44. ԿނΞ΢τϥΠϯ͕ॏཁ͔ʁ
    จষͷߏ଄ΛɺϚγʔϯϦʔμϒϧʹ͢ΔͨΊɻ
    ·ͨɺจॻߏ଄Λ͔ͬ͠Γ͢Δ͜ͱͰɺΘ͔Γ΍͍͢จষɻ
    ϒϥ΢βɺεΫϦʔϯϦʔμʔ(Ի੠ϒϥ΢β)౳ɺͦͷଞࢧԉٕज़͕ݟग़͠
    ΛೝࣝͰ͖ΔͨΊɺ༷ʑͳϝϦοτΛϢʔβʔʹఏڙग़དྷΔɻ
    • ݟग़͠Ͱͷδϟϯϓػೳɻ
    • ໨࣍ͷࣗಈੜ੒ɻ(ex. Wikipedia)
    ݟग़͠ɹʦจॻߏ଄ʧʛ࣮ફϊ΢ϋ΢ʛΤʔ ΠϨϒϯ ϫΠʦWebA11y.jpʧ
    44

    View Slide

  45. จॻߏ଄ͷνΣοΧʔ
    WordPress 5.0 Ͱ౥ࡌ͞ΕΔɺ৽͍͠ฤ
    ूը໘ʮGutenbergʯͰ͸ɺจॻߏ଄ͷ
    νΣοΧʔ͕౥ࡌ͞ΕΔɻݟग़͕͠ε
    Ωοϓ͞Ε͍ͯͨΓ͢ΔͱΤϥʔ͕දࣔ
    ͞ΕΔɻ
    45

    View Slide

  46. ΞΫηγϏϦςΟͷͨΊʹ΋ਖ਼͍͠ϚʔΫΞοϓ
    Λɻ
    • ো֐ऀࠩผղফ๏͕ࢪ޻͞ΕɺΞΫηγϏϦςΟରԠ͕ɺߦ੓Ͱ
    ͸ඞਢɺຽؒͰ͸౒ྗٛ຿ʹɻج४ͱͯ͠͸ɺJIS X 8341-3 ͕ద
    ༻͞ΕΔɻ
    • ݈ৗऀͰ΋εϚʔτϑΥϯɺεϚʔτεϐʔΧʔͳͲͷීٴͰ
    WEBαΠτͷ༷ʑͳ࢖͍ํ͕͋Δɻ
    • ࣗ෼ͷ࡞ͬͨαΠτ΍ॻ͍ͨهࣄ͕࢖͍ͮΒ͔ͬͨΒݏͩΑͶɻ
    46

    View Slide

  47. ·ͣ͸ݟग़͠Λਖ਼͘͠ઃఆ͢Δͱ͜Ζ͔ΒॳΊͯΈ·ͤΜ͔ʁ
    47

    View Slide

  48. ࢀߟࢿྉ
    • HTML5 υΩϡϝϯτͷηΫγϣϯͱΞ΢τϥΠϯ - HTML:
    HyperText Markup Language | MDN
    • HTML 5.2: 4.3. Sections
    • ݟग़͠ɹʦจॻߏ଄ʧʛ࣮ફϊ΢ϋ΢ʛΤʔ ΠϨϒϯ ϫΠ
    ʦWebA11y.jpʧ
    48

    View Slide

  49. Thanks!
    Github: @torounit
    Twitter: @Toro_Unit
    Facebook: fb.me/torounit
    Blog: https://torounit.com
    49

    View Slide