君の名は。

2016.12.2 DIST.13 「トクするCSS」 @中野ICTCO

Transcript

1. ɻ ܅ ͷ ໊ ͸ ɻ DIST.13 @nayucolony
2. φϢ @nayucolony גࣜձࣾτΡʔΞʔϧ ϑϩϯτΤϯυΤϯδχΞ
3. ཪλΠτϧ ʮ܅ͷ໊͸ɻʯʹֶͿCSSઃܭ ࡞தͰʮ໊લ͕Θ͔Βͳͯ͘΋࠶ձͰ͖ͨʯ ‑
 CSSʹ͓͍ͯ΋໊લʹґଘ͗͢͠ͳ͍ɺ ݁ͼ͖ͭʹॏ͖Λஔ͍ͨղܾΛߟ͑Δɻ
4. ಺༰ ࣗ෼ͳΓͷϚʔΫΞοϓͷखॱΛ঺հ
5. ઃܭख๏ RSCSSΛ༻͍ͨ
 ίϯϙʔωϯτͰߟ͑ΔϚʔΫΞοϓ
6. RSCSSͷ̏ཁૉ
7. RSCSSͷ̏ཁૉ ػೳͰ۠੾ͬͯߟ͑Δ Component
8. RSCSSͷ̏ཁૉ ػೳͰ۠੾ͬͯߟ͑Δ Component Componentͷߏ੒ཁૉ Element
9. RSCSSͷ̏ཁૉ ػೳͰ۠੾ͬͯߟ͑Δ Component Componentͷߏ੒ཁૉ Element ݟͨ໨ҧ͍Λද͢ Variant
10. RSCSS̏ཁૉͷنଇ 1. ʮComponentʯ=>ӳ୯ޠ̎ͭΛ - Ͱܨ͙ (ex) .two-words 2. ʮElementʯ=>̍୯ޠͰද͢
 (ex) .element , elementparts 3. ʮVariantʯ=> ʮ - ʯΛ಄ʹ͚ͭΔ
 (ex) .-small , -reverse

11. ͦͷଞϧʔϧ • ࢖͑Δ΋ͷ͸͔ͳΒͣࢠηϨΫλʮʼʯΛ࢖͏ • ཁૉηϨΫλΛ࢖༻ͤͣશͯʹclassΛ෇͚Δ
12. ηϚϯςΟΫε͸ແࢹ͠·͢
 ʢclassͰӡ༻͢Δ͜ͱʹ஫໨ͯ͠΄͍͠ʣ ʢઆ໌͕࣌ؒ଍Γͳ͍ʣ ʢࢲ͕ͦ΋ͦ΋Α͘Θ͔ͬͯͳ͍ʣ
14. ηΫγϣϯ͝ͱʹΘ͚Δ
15. ࠓճ͸ϔομʔ͔Β΍Γ·͢ɻ ʢ͙͢ऴΘΓͦ͏ͳͷ͔Β΍Δʣ
16. ػೳ͝ͱʹݟΔ ϔομʔ
17. ػೳ͝ͱʹݟΔ ϔομʔ
18. ͦΕͧΕΛߟ͑Δ ϔομʔ
19. ϩΰ ୯ޠ̎ͭΛ - Ͱͭͳ͙ ୯ޠ̍ͭ
20. ϩΰ ࢠηϨΫλΛ࢖͏
21. φϏήʔγϣϯ
22. φϏήʔγϣϯ
23. $44 φϏήʔγϣϯ
24. ϨΠΞ΢τ࡞ۀ
25. .logo .navi Componentʹ Elementͱͯ͠ͷclassΛ෇༩
26. .logo .navi
27. DONE
28. DONE
29. هࣄComponent
32. DONE DONE
33. DONE DONE
34. هࣄϦετComponent
35. هࣄΧʔυComponentͷ ू߹ମ
36. هࣄΧʔυComponent
39. .item .item .item .item Componentʹ Elementͱͯ͠ͷclassΛ෇༩
40. .item .item .item .item Componentʹ Elementͱͯ͠ͷclassΛ෇༩
41. DONE DONE DONE
42. DONE DONE DONE
43. ϑολʔ
44. ϑολʔ
45. άϩʔόϧφϏComponent
46. ϔομʔͷφϏήʔγϣϯͷݟͨ໨ҧ͍ άϩʔόϧφϏComponent
47. Variant
48. Variant഑Լʹ্ॻ͖ελΠϧΛهड़
49. .navi
50. .navi
51. DONE DONE DONE DONE
53. .header .main .aside .footer
54. .header .main .aside .footer
55. DONE
56. ·ͱΊ • RSCSS͸͕̍ͭ̍ͭ୹໊͍લͰ͔͚ͯεοΩϦ • ػೳ୯ҐͰߟ͑Δͱίϯϙʔωϯτ͸෼͔Γ΍͍͢ • ʮίϯϙʔωϯτΛ࡞Δʯͱ
 ʮίϯϙʔωϯτΛ഑ஔ͢ΔʯͱͰ෼͚ͯߟ͑Δ
57. ఻͔͑ͨͬͨ͜ͱ • ໋໊نଇ͕શͯͰ͸ͳ͍ • ཁૉಉ࢜ͷϜεϏΛߟ͑Δ͜ͱ΋େࣄ • ޿͍ࢹ໺ͰCSSઃܭΛ਎ʹ෇͚͍͖ͯ·͠ΐ͏
58. ࡢ೔Qiitaॻ͖·ͨ͠ɻ ΋ͬͱ஌Γ͍ͨਓ༻ ΋͘͠͸࠙਌ձ΍twitterͰ