長く、美しく運用するスタイルガイドの考え方

WordPressと仲良くなろう会 #1 LT

Transcript

1. Eri Tsuruma ௕͘ɺඒ͘͠ӡ༻͢Δ ελΠϧΨΠυͷߟ͑ํ 2018/02/17 WordPressͱ஥ྑ͘ͳΖ͏ձ #1
2. ௽ؒ ܙཬ σβΠφʔʢWEB / άϥϑΟοΫʣɾϚʔΫΞοϓΤϯδχΞ @cranelab_jp 1982೥ੜ·Εʢ35ࡀʣ ϑϦʔϥϯε ܂୔σβΠϯݚڀॴଔ ήʔϜɺόΠΫɺεΩϡʔόμΠϏϯάͳͲͱʹ͔͘ଟझຯ
3. WordPressͬͯͦ΋ͦ΋Կ͕͍͢͝ͷʁ
4. ͻͱ͜ͱͰݴ͏ͱ
5. ͩΕͰ΋؆୯ʹߋ৽͕Ͱ͖Δʂʂ
6. ʮ୭Ͱ΋ʯͱ͸ɾɾɾ HTMLʁͳʹͦΕ͓͍͍͠ͷʁ CSSʁӳձ࿩ڭࣨʁʢͦΕ͸ECCʣ ͳΜ่͔ΕͯΔ͚Ͳ௚͠ํ͕෼͔Βͳ͍ʂ Α͘Θ͔Βͳ͍͔Βॿ͚ͯʙʂʂ Ͳ͜ΛΫϦοΫ͢Ε͹͍͍ͷʁ ɾɾͱ͍͏໠ऀ΋ؚ·Ε·͢ɻ
7. ٯʹݴ͏ͱ
8. ͦΜͳॳ৺ऀͰ΋ӡ༻Ͱ͖ΔΑ͏ʹ͢Δͷ͕େࣄʂ
9. ద੾ͳάϧʔϐϯάͱ༨നͷߟ͑ํ ϑϦʔεϖʔεΛ࠷దԽ ่Εͳ͍CSSهड़ͷ؆୯νΣοΫϙΠϯτ ຊ೔ͷΞδΣϯμ
10. ద੾ͳάϧʔϐϯάͱ༨നͷߟ͑ํ
11. Α͋͘Δύλʔϯ WordPressͷϑϦʔೖྗཝͷݟग़͠ ͦΕ΋े݄ͱ͏ͱ͏͜ͷهԱํͱͯ͠΋ͷͷҎ֎ΛṶ͚ͳ·͢ɻͱ͏ͯ ͍ࠓʹձಘਓ΋͍΍͍΍ͦΜͳҙຯͰͩ͢·Ͱʹग़Δ͔Βɻ WordPressͷϑϦʔೖྗཝͷઆ໌ ͦΕ΋े݄ͱ͏ͱ͏͜ͷهԱํͱͯ͠΋ͷͷҎ֎ΛṶ͚ͳ·͢ɻݸਓΛ ͔Ε͋Δͷ΋ͳ͓͕࣌ؒͲ͏ͯ͠΋·͠ͳͨɻ ͦΕ΋े݄ͱ͏ͱ͏͜ͷهԱํͱͯ͠΋ͷͷҎ֎ΛṶ͚ͳ·͢ɻݸਓΛ ͔Ε͋Δͷ΋ͳ͓͕࣌ؒͲ͏ͯ͠΋·͠ͳͨɻ ͦΕ΋े݄ͱ͏ͱ͏͜ͷهԱํͱͯ͠΋ ͷͷҎ֎ΛṶ͚ͳ·͢ɻݸਓΛ͔Ε͋Δ ͷ΋ͳ͓͕࣌ؒͲ͏ͯ͠΋·͠ͳͨɻ WordPressͰ͸ࠨͷਤ΋؆୯ʹ
 ૠೖ͢Δ͜ͱ͕Ͱ͖·͢ ը૾Ωϟϓγϣϯ ͳΜ͔ͩΑ͘Θ͔Βͳ͍͚Ͳ ؾ࣋ͪѱ͍ɾɾɾ
12. Կ͕μϝͳͷ͔
13. ᶃ·ͣάϧʔϐϯάΛҙࣝ͠·͢
14. ؔ࿈ͷ͋Δ߲໨ಉ࢜Λ·ͱΊΔ WordPressͷϑϦʔೖྗཝͷݟग़͠ ͦΕ΋े݄ͱ͏ͱ͏͜ͷهԱํͱͯ͠΋ͷͷҎ֎ΛṶ͚ͳ·͢ɻͱ͏ͯ ͍ࠓʹձಘਓ΋͍΍͍΍ͦΜͳҙຯͰͩ͢·Ͱʹग़Δ͔Βɻ WordPressͷϑϦʔೖྗཝͷઆ໌ ͦΕ΋े݄ͱ͏ͱ͏͜ͷهԱํͱͯ͠΋ͷͷҎ֎ΛṶ͚ͳ·͢ɻݸਓΛ ͔Ε͋Δͷ΋ͳ͓͕࣌ؒͲ͏ͯ͠΋·͠ͳͨɻ ͦΕ΋े݄ͱ͏ͱ͏͜ͷهԱํͱͯ͠΋ͷͷҎ֎ΛṶ͚ͳ·͢ɻݸਓΛ ͔Ε͋Δͷ΋ͳ͓͕࣌ؒͲ͏ͯ͠΋·͠ͳͨɻ ͦΕ΋े݄ͱ͏ͱ͏͜ͷهԱํͱͯ͠΋ ͷͷҎ֎ΛṶ͚ͳ·͢ɻݸਓΛ͔Ε͋Δ ͷ΋ͳ͓͕࣌ؒͲ͏ͯ͠΋·͠ͳͨɻ WordPressͰ͸ࠨͷਤ΋؆୯ʹ
 ૠೖ͢Δ͜ͱ͕Ͱ͖·͢ ը૾Ωϟϓγϣϯ WordPressͷϑϦʔೖྗཝͷݟग़͠ ͦΕ΋े݄ͱ͏ͱ͏͜ͷهԱํͱͯ͠΋ͷͷҎ֎ΛṶ͚ͳ·͢ɻͱ ͏͍ͯࠓʹձಘਓ΋͍΍͍΍ͦΜͳҙຯͰͩ͢·Ͱʹग़Δ͔Βɻ WordPressͷϑϦʔೖྗཝͷઆ໌ ͦΕ΋े݄ͱ͏ͱ͏͜ͷهԱํͱͯ͠΋ͷͷҎ֎ΛṶ͚ͳ·͢ɻݸ ਓΛ͔Ε͋Δͷ΋ͳ͓͕࣌ؒͲ͏ͯ͠΋·͠ͳͨɻ ͦΕ΋े݄ͱ͏ͱ͏͜ͷهԱํͱͯ͠΋ͷͷҎ֎ΛṶ͚ͳ·͢ɻݸ ਓΛ͔Ε͋Δͷ΋ͳ͓͕࣌ؒͲ͏ͯ͠΋·͠ͳͨɻ ͦΕ΋े݄ͱ͏ͱ͏͜ͷهԱํͱͯ͠ ΋ͷͷҎ֎ΛṶ͚ͳ·͢ɻݸਓΛ͔Ε ͋Δͷ΋ͳ͓͕࣌ؒͲ͏ͯ͠΋·͠ͳ ͨɻ WordPressͰ͸ࠨͷਤ΋؆୯ʹ
 ૠೖ͢Δ͜ͱ͕Ͱ͖·͢ ը૾Ωϟϓγϣϯ
15. ᶄ࣍ʹϑΥϯτͷδϟϯϓ཰Λҙࣝ͠·͢
16. ϑΥϯτͷେ͖͞ͱॏཁ౓͸ൺྫ͢Δ WordPressͷϑϦʔೖྗཝͷݟग़͠ ͦΕ΋े݄ͱ͏ͱ͏͜ͷهԱํͱͯ͠΋ͷͷҎ֎ΛṶ͚ͳ·͢ɻͱ͏͍ͯ ࠓʹձಘਓ΋͍΍͍΍ͦΜͳҙຯͰͩ͢·Ͱʹग़Δ͔Βɻ WordPressͷϑϦʔೖྗཝͷઆ໌ ͦΕ΋े݄ͱ͏ͱ͏͜ͷهԱํͱͯ͠΋ͷͷҎ֎ΛṶ͚ͳ·͢ɻݸਓΛ͔ Ε͋Δͷ΋ͳ͓͕࣌ؒͲ͏ͯ͠΋·͠ͳͨɻ ͦΕ΋े݄ͱ͏ͱ͏͜ͷهԱํͱͯ͠΋ͷͷҎ֎ΛṶ͚ͳ·͢ɻݸਓΛ͔ Ε͋Δͷ΋ͳ͓͕࣌ؒͲ͏ͯ͠΋·͠ͳͨɻ ͦΕ΋े݄ͱ͏ͱ͏͜ͷهԱํͱͯ͠΋ͷ ͷҎ֎ΛṶ͚ͳ·͢ɻݸਓΛ͔Ε͋Δͷ΋ ͳ͓͕࣌ؒͲ͏ͯ͠΋·͠ͳͨɻ WordPressͰ͸ࠨͷਤ΋؆୯ʹ
 ૠೖ͢Δ͜ͱ͕Ͱ͖·͢ ը૾Ωϟϓγϣϯ WordPressͷϑϦʔೖྗཝͷݟग़͠ ͦΕ΋े݄ͱ͏ͱ͏͜ͷهԱํͱͯ͠΋ͷͷҎ֎ΛṶ͚ͳ·͢ɻͱ ͏͍ͯࠓʹձಘਓ΋͍΍͍΍ͦΜͳҙຯͰͩ͢·Ͱʹग़Δ͔Βɻ WordPressͷϑϦʔೖྗཝͷઆ໌ ͦΕ΋े݄ͱ͏ͱ͏͜ͷهԱํͱͯ͠΋ͷͷҎ֎ΛṶ͚ͳ·͢ɻݸ ਓΛ͔Ε͋Δͷ΋ͳ͓͕࣌ؒͲ͏ͯ͠΋·͠ͳͨɻ ͦΕ΋े݄ͱ͏ͱ͏͜ͷهԱํͱͯ͠΋ͷͷҎ֎ΛṶ͚ͳ·͢ɻݸ ਓΛ͔Ε͋Δͷ΋ͳ͓͕࣌ؒͲ͏ͯ͠΋·͠ͳͨɻ ͦΕ΋े݄ͱ͏ͱ͏͜ͷهԱํͱͯ͠ ΋ͷͷҎ֎ΛṶ͚ͳ·͢ɻݸਓΛ͔Ε ͋Δͷ΋ͳ͓͕࣌ؒͲ͏ͯ͠΋·͠ͳ ͨɻ WordPressͰ͸ࠨͷਤ΋؆୯ʹ
 ૠೖ͢Δ͜ͱ͕Ͱ͖·͢ ը૾Ωϟϓγϣϯ
17. ᶅ͞ΒʹߦؒΛௐ੔͠·͢
18. ஈམͱվߦΛҙࣝ͢Δ WordPressͷϑϦʔೖྗཝͷݟग़͠ ͦΕ΋े݄ͱ͏ͱ͏͜ͷهԱํͱͯ͠΋ͷͷҎ֎ΛṶ͚ͳ·͢ɻͱ͏͍ͯ ࠓʹձಘਓ΋͍΍͍΍ͦΜͳҙຯͰͩ͢·Ͱʹग़Δ͔Βɻ WordPressͷϑϦʔೖྗཝͷઆ໌ ͦΕ΋े݄ͱ͏ͱ͏͜ͷهԱํͱͯ͠΋ͷͷҎ֎ΛṶ͚ͳ·͢ɻݸਓΛ͔ Ε͋Δͷ΋ͳ͓͕࣌ؒͲ͏ͯ͠΋·͠ͳͨɻ ͦΕ΋े݄ͱ͏ͱ͏͜ͷهԱํͱͯ͠΋ͷͷҎ֎ΛṶ͚ͳ·͢ɻݸਓΛ͔ Ε͋Δͷ΋ͳ͓͕࣌ؒͲ͏ͯ͠΋·͠ͳͨɻ ͦΕ΋े݄ͱ͏ͱ͏͜ͷهԱํͱͯ͠΋ͷ ͷҎ֎ΛṶ͚ͳ·͢ɻݸਓΛ͔Ε͋Δͷ΋ ͳ͓͕࣌ؒͲ͏ͯ͠΋·͠ͳͨɻ WordPressͰ͸ࠨͷਤ΋؆୯ʹ
 ૠೖ͢Δ͜ͱ͕Ͱ͖·͢ ը૾Ωϟϓγϣϯ WordPressͷϑϦʔೖྗཝͷݟग़͠ ͦΕ΋े݄ͱ͏ͱ͏͜ͷهԱํͱͯ͠΋ͷͷҎ֎ΛṶ͚ͳ·͢ɻͱ͏͍ͯ ࠓʹձಘਓ΋͍΍͍΍ͦΜͳҙຯͰͩ͢·Ͱʹग़Δ͔Βɻ WordPressͷϑϦʔೖྗཝͷઆ໌ ͦΕ΋े݄ͱ͏ͱ͏͜ͷهԱํͱͯ͠΋ͷͷҎ֎ΛṶ͚ͳ·͢ɻݸਓΛ͔ Ε͋Δͷ΋ͳ͓͕࣌ؒͲ͏ͯ͠΋·͠ͳͨɻ ͦΕ΋े݄ͱ͏ͱ͏͜ͷهԱํͱͯ͠΋ͷͷҎ֎ΛṶ͚ͳ·͢ɻݸਓΛ͔ Ε͋Δͷ΋ͳ͓͕࣌ؒͲ͏ͯ͠΋·͠ͳͨɻ ͦΕ΋े݄ͱ͏ͱ͏͜ͷهԱํͱͯ͠΋ͷ ͷҎ֎ΛṶ͚ͳ·͢ɻݸਓΛ͔Ε͋Δͷ΋ ͳ͓͕࣌ؒͲ͏ͯ͠΋·͠ͳͨɻ WordPressͰ͸ࠨͷਤ΋؆୯ʹ
 ૠೖ͢Δ͜ͱ͕Ͱ͖·͢ ը૾Ωϟϓγϣϯ
19. ݟൺ΂ͯΈ·͠ΐ͏
20. WordPressͷϑϦʔೖྗཝͷݟग़͠ ͦΕ΋े݄ͱ͏ͱ͏͜ͷهԱํͱͯ͠΋ͷͷҎ֎ΛṶ͚ͳ·͢ɻͱ͏ͯ ͍ࠓʹձಘਓ΋͍΍͍΍ͦΜͳҙຯͰͩ͢·Ͱʹग़Δ͔Βɻ WordPressͷϑϦʔೖྗཝͷઆ໌ ͦΕ΋े݄ͱ͏ͱ͏͜ͷهԱํͱͯ͠΋ͷͷҎ֎ΛṶ͚ͳ·͢ɻݸਓΛ ͔Ε͋Δͷ΋ͳ͓͕࣌ؒͲ͏ͯ͠΋·͠ͳͨɻ ͦΕ΋े݄ͱ͏ͱ͏͜ͷهԱํͱͯ͠΋ͷͷҎ֎ΛṶ͚ͳ·͢ɻݸਓΛ ͔Ε͋Δͷ΋ͳ͓͕࣌ؒͲ͏ͯ͠΋·͠ͳͨɻ ͦΕ΋े݄ͱ͏ͱ͏͜ͷهԱํͱͯ͠΋ ͷͷҎ֎ΛṶ͚ͳ·͢ɻݸਓΛ͔Ε͋Δ ͷ΋ͳ͓͕࣌ؒͲ͏ͯ͠΋·͠ͳͨɻ WordPressͰ͸ࠨͷਤ΋؆୯ʹ
 ૠೖ͢Δ͜ͱ͕Ͱ͖·͢ ը૾Ωϟϓγϣϯ Before After WordPressͷϑϦʔೖྗཝͷݟग़͠ ͦΕ΋े݄ͱ͏ͱ͏͜ͷهԱํͱͯ͠΋ͷͷҎ֎ΛṶ͚ͳ·͢ɻͱ͏͍ͯ ࠓʹձಘਓ΋͍΍͍΍ͦΜͳҙຯͰͩ͢·Ͱʹग़Δ͔Βɻ WordPressͷϑϦʔೖྗཝͷઆ໌ ͦΕ΋े݄ͱ͏ͱ͏͜ͷهԱํͱͯ͠΋ͷͷҎ֎ΛṶ͚ͳ·͢ɻݸਓΛ͔ Ε͋Δͷ΋ͳ͓͕࣌ؒͲ͏ͯ͠΋·͠ͳͨɻ ͦΕ΋े݄ͱ͏ͱ͏͜ͷهԱํͱͯ͠΋ͷͷҎ֎ΛṶ͚ͳ·͢ɻݸਓΛ͔ Ε͋Δͷ΋ͳ͓͕࣌ؒͲ͏ͯ͠΋·͠ͳͨɻ ͦΕ΋े݄ͱ͏ͱ͏͜ͷهԱํͱͯ͠΋ͷ ͷҎ֎ΛṶ͚ͳ·͢ɻݸਓΛ͔Ε͋Δͷ΋ ͳ͓͕࣌ؒͲ͏ͯ͠΋·͠ͳͨɻ WordPressͰ͸ࠨͷਤ΋؆୯ʹ
 ૠೖ͢Δ͜ͱ͕Ͱ͖·͢ ը૾Ωϟϓγϣϯ
21. ͨͬͨ͜Ε͚ͩͰશવҧ͏ʂ
22. Ͱ΋ͳΜͰɾɾɾʁ
23. ؆୯ͳϧʔϧΛकΔ͚ͩ ͱʹ͔͘άϧʔϓ෼͚Λ͢Δ ೖΕࢠʹͳ͍ͬͯΔϘοΫε͸֎ଆ΄Ͳ༨നΛ޿͘ จࣈ͸ॏཁ౓͕ߴ͍΄Ͳେ͖͘ɺ༨നΛ޿͘
24. ͭ·Γɺ࠷ॳ͔Βͦ͏ͳΔΑ͏ʹCSSΛॻ͚͹ɺ
 ୭Ͱ΋͖Ε͍ͳϨΠΞ΢τʹͳΔʂ
25. ϑϦʔεϖʔεΛ࠷దԽ
26. ॳ৺ऀʹ΍͍͞͠ϑϦʔεϖʔεͱ͸ جຊతͳߋ৽͸͜͜Λ࢖͍·͢ɻ ίʔυ͸ॻ͖·ͤΜʂʂ
27. ೖΕ͓͖͍ͯͨϓϥάΠϯ TinyMCE Advanced ϏδϡΞϧΤσΟλʔʹ ߴ౓ͳػೳΛ௥Ճ͠·͢ Andrew Ozz Duplicate Post ౤ߘ΍ϖʔδΛෳ੡Ͱ͖Δ ϓϥάΠϯ Enrico Battocchi TinyMCE Clear Float ϏδϡΞϧΤσΟλʔͰ FloatΛղআͰ͖·͢ manager
28. ϑϦʔεϖʔεઐ༻ID·ͨ͸classΛ४උ h1ɺpͳͲͷڞ௨λάʹ:not()Λద༻ h1:not(.page) { font-size: 32px; margin: 2em 0 1em; } ྫ PHPͱCSSʹͻͱ޻෉
29. ͜ΕͰ͋ͱ͸
 ϑϦʔεϖʔε༻ͷCSSΛॻ͚ͩ͘ʂ
30. ่Εͳ͍CSSهड़ͷ؆୯νΣοΫϙΠϯτ
31. ࢥ͍ग़͍ͯͩ͘͠͞
32. ୭͕ॻ͍ͯ΋่Εͳ͍ϨΠΞ΢τͷϧʔϧ͸
33. ͱʹ͔͘͜Ε͕େࣄʂ ͱʹ͔͘άϧʔϓ෼͚Λ͢Δ ೖΕࢠʹͳ͍ͬͯΔϘοΫε͸֎ଆ΄Ͳ༨നΛ޿͘ จࣈ͸ॏཁ౓͕ߴ͍΄Ͳେ͖͘ɺ༨നΛ޿͘
34. ϙΠϯτΛҙࣝͨ͠ελΠϧΨΠυΛ࡞੒͢Δ
35. νΣοΫϙΠϯτ͸͜Ε͚ͩ ϨΠΞ΢τͷେࣄͳϙΠϯτΛҙࣝͨ͠styleΛॻ͘ class͸࢖Θͳ͍ ೖΕࢠͷελΠϧΛ༻ҙ͢Δ
36. ୭Ͱ΋͖Ε͍ͳϖʔδΛ࡞ΕΔWordPressͷັྗΛ ࠷େݶʹ׆͔ͯ͠ɺ஥ྑ͘ͳΓ·͠ΐ͏ʂʂ
37. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ