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

Transcript

1. ݟग़͠ͱΞ΢τϥΠϯͷ͸ͳ͠ Toro_Unit@ Shinshu WP Meetup vol.4 1
2. $ whoami 2
3. Toro_Unit ઎෦ ߛ (͏Β΂ ͻΖ͠) • Frontend Engineer • WordPress Plugin and Theme Developer Github: @torounit Twitter: @Toro_Unit 3
4. ࡳຈͷձࣾͰϦϞʔτϫʔΫͯ͠·͢ 4
6. Contribution • WordPress 5.0.1 and 5.1 (Α͍ͯ) • WordCamp Kyoto 2017 / Osaka 2018 / Ogijima 2018 ࣮ߦҕһ • WordCamp Osaka 2018 Speaker. • etc... 6
7. Plugins and Themes • Custom Post Type Permalinks • Simple Post Type Permalinks • Powerful Posts Per Page (PPPP) • Smart PWA <- new! • Vanilla • and more... 7
8. Do you know HTML ? 8
9. HTML is... • HyperText Markup Language • ver 5.2 • WHATWG͕ඪ४࢓༷ʢHTML Living StandardʣΛࡦఆͯ͠ ͍ΔɻͦΕΛݩʹW3C ͕קࠂ͍ͯ͠Δɻ 9
12. Do you know ? • <h1> • <h2> • <h3> • <h4> • <h5> • <h6> 12
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
14. ࿨༁ ͜ΕΒͷཁૉ͸ɺηΫγϣϯͷݟग़͠Λද͠·͢ɻ e ͜ΕΒͷཁૉʹ͸ɺ໊લͷ൪߸Ͱࢦఆ͞ΕͨϥϯΫ͕͋Γ· ͢ɻ h1ཁૉ͸࠷ߴϥϯΫΛ࣋ͪɺh6ཁૉ͸࠷௿ϥϯΫΛ࣋ͪɺ ಉ໊͡લͷཁૉ͸ಉ͡ϥϯΫΛ࣋ͪ·͢ɻ e ݟग़͠ཁૉͷϥϯΫΛ࢖༻ͯ͠ɺυΩϡϝϯτΞ΢τϥΠϯΛ ࡞੒͠·͢ɻ 14
15. ηΫγϣϯ ষɻจষͷ۠෼ɻ Ξ΢τϥΠϯ จষͷશମͷߏ੒ 15
16. Do you know ? • <section> • <article> • <nav> • <aside> 16
17. Sectioning content (۠෼ίϯςϯπ) <section>,<article>, <nav>, <aside> ͸ Sectioning content ͱ͍͏ΧςΰϦʔʹଐ͢Δλάɻ 17
18. <section> ηΫγϣϯΛද͢ɻΑΓదͨ͠λά͕͋ΔͳΒ͹ͦͪΒΛ࢖͏ ͜ͱɻ <article> ϒϩά΍৽ฉͳͲͷهࣄɺSNS΍ܝࣔ൘ͳͲͷ౤ߘͳͲɺࣗݾ ׬݁ͨ͠ηΫγϣϯɻ 18
19. <nav> φϏήʔγϣϯɻϝχϡʔ౳Λද͢ηΫγϣϯɻ <aside> จॻͷϝΠϯίϯςϯπͱؒ઀తͳؔ܎͔͍࣋ͬͯ͠ͳ͍ηΫ γϣϯɻ޿ࠂͱ͔αΠυόʔͱ͔ɻ 19
20. Example. 20
21. <h1>௕໺ݝͷࢢொଜ</h1> <section> <h2>௕໺ࢢ</h2> <p>ળޫࣉ͕͋ΔΑ.</p> </section> <section> <h2>দຊࢢ</h2> <p>দຊ৓͕͋ΔΑ.</p> </section> 21
22. Outline. 1. ௕໺ݝͷࢢொଜ 1. ௕໺ࢢ 2. দຊࢢ 22
23. ݟग़͠ͷϨϕϧʹؔ܎ͳ͘จॻߏ଄͸౳Ձɻ <h1>௕໺ݝͷࢢொଜ</h1> <section> <h1>௕໺ࢢ</h1> <p>ળޫࣉ͕͋ΔΑ.</p> </section> <section> <h3>দຊࢢ</h3> <p>দຊ৓͕͋ΔΑ.</p> </section> 23
24. ηΫγϣϯͷߏ଄ʹΑΓɺจॻߏ଄͸ܾఆ͞ΕΔɻ • શ෦ <h1> Ͱ΋ HTML ͷ࢓༷తʹ͸શ͘໰୊ແ͍ɻ • ݟग़͠ͷແ͍ηΫγϣϯ͕͋Δ৔߹ɺλΠτϧແ͠ͷηΫ γϣϯͱͯ͠ೝࣝ͞ΕΔɻ • ௨ৗ <section> ʹ͸ݟग़͕͋͠Δ͸ͣɻ 24
25. ҉໧తͳηΫγϣϯ 25
26. <section> λάΛ࢖Θͳ͍৔߹Ͱ΋ɺจॻߏ଄ΛఆٛͰ͖Δɻ 26
27. <h1>௕໺ݝͷࢢொଜ</h1> <h2>௕໺ࢢ</h2> <p>ળޫࣉ͕͋ΔΑ.</p> <h2>দຊࢢ</h2> <p>দຊ৓͕͋ΔΑ.</p> 27
28. <h1>௕໺ݝͷࢢொଜ</h1> <section> <h2>௕໺ࢢ</h2> <p>ળޫࣉ͕͋ΔΑ.</p> </section> <section> <h2>দຊࢢ</h2> <p>দຊ৓͕͋ΔΑ.</p> </section> 28
29. Outline. 1. ௕໺ݝͷࢢொଜ 1. ௕໺ࢢ 2. দຊࢢ 29
30. • <h1> - <h6> ͸ηΫγϣϯͷλΠτϧͳͷͰɺݟग़͠λά͕͋ Δ৔߹ɺηΫγϣϯ͕͸͡·ͬͨϞϊͱͯ͠ղऍ͞ΕΔɻ • Ϩϕϧ͕௿͍ηΫγϣϯ͕͋Δ৔߹ɺͦΕ͸αϒηΫγϣϯ ͕͸͡·ͬͨϞϊͱͯ͠ɺղऍ͞ΕΔɻ • ಉ͡Ϩϕϧ͔ͦΕΑΓߴ͍৔߹ɺݱࡏͷηΫγϣϯ͕ऴΘ Γɺ৽͍͠ηΫγϣϯ͕͸͡·ͬͨϞϊͱͯ͠ղऍ͞ΕΔɻ 30
31. <h1>௕໺ݝ</h1> <h2>஍ཧ</h2> <h2>ࢢொଜ</h2> <h3>௕໺ࢢ</h3> <h3>দຊࢢ</h3> <h2>ಛ௃</h2> 31
32. outline. 1. ௕໺ݝ 1. ஍ཧ 2. ࢢொଜ 1. ௕໺ࢢ 2. দຊࢢ 3. ಛ௃ 32
33. <section> ౳ͷதͰ΋ద༻͞ΕΔɻ 33
34. <h1>௕໺ݝ</h1> <h2>஍ཧ</h2> <section> <h1>ࢢொଜ</h1> <h2>௕໺ࢢ</h2> <h2>দຊࢢ</h2> </section> <h2>ಛ௃</h2> 34
35. outline. 1. ௕໺ݝ 1. ஍ཧ 2. ࢢொଜ 1. ௕໺ࢢ 2. দຊࢢ 3. ಛ௃ 35
36. <h1>௕໺ݝ</h1> <h2>஍ཧ</h2> <section> <h2>ࢢொଜ</h2> <!-- h2 ʹมߋ --> <h2>௕໺ࢢ</h2> <h2>দຊࢢ</h2> </section> <h2>ಛ௃</h2> 36
37. ͜͏ղऍ͞ΕΔɻ 37
38. <h1>௕໺ݝ</h1> <h2>஍ཧ</h2> <section> <h2>ࢢொଜ</h2> </section> <section> <h2>௕໺ࢢ</h2> </section> <section> <h2>দຊࢢ</h2> </section> <h2>ಛ௃</h2> 38
39. outline. 1. ௕໺ݝ 1. ஍ཧ 2. ࢢொଜ 3. ௕໺ࢢ 4. দຊࢢ 5. ಛ௃ 39
40. ݟग़͠ͷ෇͚ํͰɺจॻߏ଄͕มΘͬͯ͠·͏ɻ 40
41. <article> <h1>هࣄͷλΠτϧ</h1> <p>ຊจ...</p> <h2>ݟग़͠</h2> <p>ຊจ...</p> </article> Outline. 1. هࣄͷλΠτϧ 1. ݟग़͠ 41
42. <article> <h1>هࣄͷλΠτϧ</h1> <p>ຊจ...</p> <h1>ݟग़͠</h1> <p>ຊจ...</p> </article> ผͷηΫγϣϯʹͳͬͯ͠·͏ɻ 1. هࣄͷλΠτϧ 2. ݟग़͠ 42
43. Ξ΢τϥΠϯͷॏཁੑ 43
44. ԿނΞ΢τϥΠϯ͕ॏཁ͔ʁ จষͷߏ଄ΛɺϚγʔϯϦʔμϒϧʹ͢ΔͨΊɻ ·ͨɺจॻߏ଄Λ͔ͬ͠Γ͢Δ͜ͱͰɺΘ͔Γ΍͍͢จষɻ ϒϥ΢βɺεΫϦʔϯϦʔμʔ(Ի੠ϒϥ΢β)౳ɺͦͷଞࢧԉٕज़͕ݟग़͠ ΛೝࣝͰ͖ΔͨΊɺ༷ʑͳϝϦοτΛϢʔβʔʹఏڙग़དྷΔɻ • ݟग़͠Ͱͷδϟϯϓػೳɻ • ໨࣍ͷࣗಈੜ੒ɻ(ex. Wikipedia) ݟग़͠ɹʦจॻߏ଄ʧʛ࣮ફϊ΢ϋ΢ʛΤʔ ΠϨϒϯ ϫΠʦWebA11y.jpʧ 44
45. จॻߏ଄ͷνΣοΧʔ WordPress 5.0 Ͱ౥ࡌ͞ΕΔɺ৽͍͠ฤ ूը໘ʮGutenbergʯͰ͸ɺจॻߏ଄ͷ νΣοΧʔ͕౥ࡌ͞ΕΔɻݟग़͕͠ε Ωοϓ͞Ε͍ͯͨΓ͢ΔͱΤϥʔ͕දࣔ ͞ΕΔɻ 45
46. ΞΫηγϏϦςΟͷͨΊʹ΋ਖ਼͍͠ϚʔΫΞοϓ Λɻ • ো֐ऀࠩผղফ๏͕ࢪ޻͞ΕɺΞΫηγϏϦςΟରԠ͕ɺߦ੓Ͱ ͸ඞਢɺຽؒͰ͸౒ྗٛ຿ʹɻج४ͱͯ͠͸ɺJIS X 8341-3 ͕ద ༻͞ΕΔɻ • ݈ৗऀͰ΋εϚʔτϑΥϯɺεϚʔτεϐʔΧʔͳͲͷීٴͰ WEBαΠτͷ༷ʑͳ࢖͍ํ͕͋Δɻ • ࣗ෼ͷ࡞ͬͨαΠτ΍ॻ͍ͨهࣄ͕࢖͍ͮΒ͔ͬͨΒݏͩΑͶɻ 46
47. ·ͣ͸ݟग़͠Λਖ਼͘͠ઃఆ͢Δͱ͜Ζ͔ΒॳΊͯΈ·ͤΜ͔ʁ 47
48. ࢀߟࢿྉ • HTML5 υΩϡϝϯτͷηΫγϣϯͱΞ΢τϥΠϯ - HTML: HyperText Markup Language | MDN • HTML 5.2: 4.3. Sections • ݟग़͠ɹʦจॻߏ଄ʧʛ࣮ફϊ΢ϋ΢ʛΤʔ ΠϨϒϯ ϫΠ ʦWebA11y.jpʧ 48
49. Thanks! Github: @torounit Twitter: @Toro_Unit Facebook: fb.me/torounit Blog: https://torounit.com 49