こんなCSSからはそろそろ卒業しよう

社内向け勉強会で作ったスライド

※Bracketsの拡張機能「Shizimily Multiencoding for Brackets」は最新Bracketsにはいらないようです！

1. ͜ΜͳCSS͔Β͸ ͦΖͦΖଔۀ͠Α͏ 2017.10.14 Obara Chiaki
2. ·ͣ࠷ॳʹ…
3. HTMLΛਖ਼͘͠ॻ͜͏ʂ CSSͷϨϕϧΞοϓʹ͸HTMLͷ஌ࣝ΋͋ΔͱΑΓΑ͍ Ͱ͢ɻ
 ྫ͑͹ɺsection΍articleʹ͸ඞͣݟग़͕͠ඞཁͩͱ͔ɺ ul΍olͷ௚Լʹ͸liؚ͔͠ΜͰ͸͍͚ͳ͍…ͳͲɺHTML ʹ͸ͪΐͬͱͨ͠ϧʔϧ͕͋Γ·͢ɻ CSSΛϨϕϧΞοϓͤ͞ΔͨΊʹɺHTMLͷจॻߏ଄Λ ҙࣝͯ͠ίʔσΟϯάͯ͠Έ·͠ΐ͏ʂ
4. ͦΕͰ͸ຊ୊Ͱ͢ʂ
5. ϨΨγʔϒϥ΢β༻ͷهड़͸ফͦ͏ ϨΨγʔϒϥ΢βʹʢಛʹIEΛࢦ͠·͕͢ʣࠓ͸͋·Γ࢖ΘΕͯ ͍ͳ͍ݹ͍ϒϥ΢βͷ͜ͱͰ͢ɻ width /***/: auto;ͱ͔* html .clearfix { zoom: 1; }ͱ͍ͬͨهड़ ͸ɺओʹIE6ͱ͔IE7ͷͱͬͬͬͬͬͯ΋ݹ͍ϒϥ΢β༻ͷهड़ͳ ͷͰɺࠓ͸΋͏ॻ͔ͳͯ͘େৎ෉Ͱ͢ʂ
6. ཁૉηϨΫλ͸ͦͬͱ͓ͯ͜͠͏ h1 { color: #fc0; } span { display: block; } div { text-align: center; }
7. ཁૉηϨΫλ͸ͦͬͱ͓ͯ͜͠͏ h1 { color: #fc0; } span { display: block; } div { text-align: center; } NOOOOOOOO!!!!
8. ཁૉηϨΫλ͸ͦͬͱ͓ͯ͜͠͏ ཁૉηϨΫλʹελΠϧΛࢦఆͯ͠͠·͏ͱɺͦͷϖʔδ಺ʹ͋ ΔશͯͷཁૉʹͦͷελΠϧ͕౰ͨͬͯ͠·͏ͷͰɺҙਤͤͣϖʔ δશମ่͕Εͯ͠·ͬͨΓ͢Δ͜ͱ͕͋Γ·͢ʂ
 ʢ΍͍͍ͬͯͷ͸Ϧηοτ͚ͩʂʣ ͱʹ͔͘ཁૉʹελΠϧ͸౰ͯͳ͍ࣄΛపఈ͠·͠ΐ͏ɻ Ͳ͏ͯ͠΋΍Δͱ͖͸ɺ.hoge h1 {} ͳͲɺ਌ʹΫϥεΛࢦఆ͠ ͍ͯ͋͛ͯͩ͘͞ɻ
9. CSSͷద༻ॱΛҙࣝͯ͠ΈΑ͏ .box { border: 1px solid #000; background: #f00; width: 300px; height: 300px; border: 2px dotted #999; } Question! (A)෯300pxɺߴ͞300pxͰɺഎܠ͕#f00ͷɺ৭͕#999ͷ2pxυοτઢ͕͍͍ͭͯΔ (B)෯300pxɺߴ͞300pxͰɺഎܠ͕#f00ͷɺ৭͕#000ͷ1px௚ઢ͕͍͍ͭͯΔ (C)ϒϥ΢βʹΑͬͯ·ͪ·ͪ
10. CSSͷద༻ॱΛҙࣝͯ͠ΈΑ͏ .box { width: 300px; } .box { width: 400px; } Question! (A)෯300px (B)෯400px (C)ϒϥ΢βʹΑͬͯ·ͪ·ͪ
11. CSSͷద༻ॱΛҙࣝͯ͠ΈΑ͏ 1໰໨ͷਖ਼ղ͸(A)ɺ2໰໨ͷਖ਼ղ͸(B)Ͱ͢ʂ CSS͸ɺجຊతʹޙ͔Βॻ͍ͨํ͕༏ઌͯ͠ඳը͞Ε·͢ɻ
 ͜ͷಛੑΛར༻ͯ͠ɺྫ͑͹ࣗࣾͰ͸͜͏ͳͬͯΔ͚ͲָఱͰ͸ ͜͏͢Δʂͱ͍͏ͱ͖ʹɺϕʔεʹͳΔCSSΑΓޙʹCSSΛهड़ ͢Ε͹໰୊ͳ্͘ॻ͖͕Ͱ͖·͢ɻ
12. CSSͷద༻ॱΛҙࣝͯ͠ΈΑ͏(Ԡ༻) .wrap .box { width: 300px; } .box { width: 400px; } Question! (A)෯300px (B)෯400px (C)͜Ε͸ؒҧ͍ͳ͘ϒϥ΢βʹΑͬͯ·ͪ·ͪ
13. CSSͷద༻ॱΛҙࣝͯ͠ΈΑ͏(Ԡ༻) ਖ਼ղ͸(A)Ͱ͢ʂޙ͔Βॻ͍ͨͷʹͳΜͰʁͬͯͳΓ·͢Ͷʂ
 CSSʹ͸ʮৄࡉ౓ʯͱ͍͏΋ͷ͕͋Γ·͢ɻ
 ৄ͘͠΍Δͱ͕࣌ؒ଍Γͳ͍ͷͰϙΠϯτ͚͓ͩ͑͞·͠ΐ͏ • ΫϥεΑΓid͕༏ઌ͞ΕΔʢʹۃྗΫϥεͰॻ͘ͷ͕٢ʣ • .hoge .fuga ͷΑ͏ʹਂ౓͕ਂ͘ͳΕ͹ͳΔ΄Ͳ༏ઌ͞ΕΔ • !important ͸ԿΑΓ΋༏ઌ͞ΕΔ
14. CSSͷద༻ॱΛҙࣝͯ͠ΈΑ͏(Ԡ༻) ਖ਼ղ͸(A)Ͱ͢ʂޙ͔Βॻ͍ͨͷʹͳΜͰʁͬͯͳΓ·͢Ͷʂ
 CSSʹ͸ʮৄࡉ౓ʯͱ͍͏΋ͷ͕͋Γ·͢ɻ
 ৄ͘͠΍Δͱ͕࣌ؒ଍Γͳ͍ͷͰϙΠϯτ͚͓ͩ͑͞·͠ΐ͏ • ΫϥεΑΓid͕༏ઌ͞ΕΔʢʹۃྗΫϥεͰॻ͘ͷ͕٢ʣ • .hoge .fuga ͷΑ͏ʹਂ౓͕ਂ͘ͳΕ͹ͳΔ΄Ͳ༏ઌ͞ΕΔ • !important ͸ԿΑΓ΋༏ઌ͞ΕΔ
15. !important͸ͱͯ΋λν͕ѱ͍ !important͸ԿΑΓ΋༏ઌ͞ΕΔͷͰɺ͔ͨ͠ʹศརͰ͢Ͷɻ
 ͭ·Γɺ!importantΛଧͪফ͢ʹ͸ɺͦͷελΠϧΑΓޙʹߋ ʹ!importantΛ͚ͭͳ͍ͱ͍͚·ͤΜɻ ·ͨͦͷ!importantΛଧͪফ͢ʹ͸ɾɾɾɾऴΘΒͳ͍Ͱ͢Ͷɻ ͳͥελΠϧॻ͍ͯΔͷʹద༻͞Εͳ͍ΜͩʂͱCSSΛಡΈղ͘ खؒ΋͔͔Γ·͢ɻ
 ༏ઌ౓Λۦ࢖ͯ͠ɺ!important͔Β͸ͦΖͦΖଔۀ͠·͠ΐ͏ɻ
16. id/ΫϥεͷલͷηϨΫλ͸ল͜͏ p.item-name ͳͲɺΫϥε໊΍id໊ͷલʹηϨΫλΛ͚ͭΔͱɺ ྫ͑͹divͰಉ͡ΫϥεΛ࢖͍͍ͨͱ͖ʹɺ·ͨ div.item-name Λ૿΍͞ͳ͍ͱ͍͚ͳ͘ͳΓ·͢ɻ ·ͨɺઌఔઆ໌ͨ͠ৄࡉ౓΋͕͋ͬͯ͠·͏ͷͰɺ্ॻ͖͠ʹ͘ ͍CSSʹͳͬͯ͠·͍·͢ɻ ಛʹ͚ͭͳ͍ͱ͍͚ͳ͍΋ͷͰ͸ͳ͍ͷͰɺཁૉηϨΫλ͸Ͳ ΜͲΜল͍͍͖ͯ·͠ΐ͏ɻ
17. styleଐੑʹ͸ؾΛ͚ͭΑ͏ !importantͷ࣍ʹৄࡉ౓͕ߴ͍ॻ͖ํʹͳΓ·͢ɻ
 ͭ·ΓɺstyleଐੑͰॻ͔ΕͨCSSΛଧͪফ͢ʹ͸ɺѱखͰ͋ Δ!importantΛ࢖Θ͟ΔΛಘͳ͘ͳΓ·͢ɻ
 ςετతʹʙͱ͔ɺ͜͜Ͱ͚͔ͩ͜͜͠ຊοο౰ʹ࢖Θͳ͍ʂ ͱ͍͏ͱ͖Λআ͍ͯ࢖Θͳ͍ͷ͕ແ೉Ͱ͢ɻ
 ʢ໘౗Ͱ΋ͪΌΜͱΫϥε໊Λ͚͓͍ͭͯͨํ͕͍͍Ͱ͢ʣ
18. jQueryͰ΋styleଐੑ͕ͭ͘ jQueryͷ$(select).hide()΍$(select).show()ͳͲɺҰ෦ͷಈ͖Ͱ ௚઀styleଐੑ͕͋ͯΒΕ·͢ɻ
 ී௨JSͰදࣔඇදࣔΛ৮Δ͚ͩͳΒͦ͜·Ͱҙࣝ͠ͳͯ͘΋େ ৎ෉Ͱ͕͢ɺྫ͑͹εϚϗͷͱ͖͸ΞίʔσΟΦϯͯ͠ɺPCͰ ͸දࣔͨ͠··ʹ͢Δʂ…ͳΜ͔ͷͱ͖͸ɺεϚϗͰΞίʔ σΟΦϯด͡ΔˠPCαΠζʹ͢Δͱɺdisplay:none͕࢒ͬͨ· ·ʹͳΔʂͱ͍͏͜ͱ͕͋ͬͨΓ͠·͢ɻ
 దٓɺඞཁͰ͋Ε͹removeAttrͰstyleଐੑΛ࡟আ͠·͠ΐ͏ɻ
19. CSSͷελΠϧܧঝΛ஌Ζ͏ ਌ཁૉͰࢦఆͨ͠CSS͸ɺࢠཁૉʹద༻͞ΕΔ΋ͷ͕͋Γ·͢ɻ
 ओʹɺϑΥϯταΠζ΍Χϥʔɺ͋ͱtext-alignͳͲͷςΩετ Λ૷০͢ΔελΠϧͰ͢ɻ ͭ·Γɺ਌ཁૉʹCSSΛॻ͍ͯ͠·͑͹ɺࢠཁૉʹಉ͡CSSΛॻ ͘ඞཁ͸͋Γ·ͤΜʂ
20. ͜Μͳ෩ʹॻ͍ͯ΋ద༻͞ΕΔ͚Ͳ… <ul class=“list”> <li>Ϧετ</li> <li>Ϧετ</li> </ul> <p class=“text”>ςΩετ</p> .list li { color: #fff; } .text { color: #fff; }
21. ͜͏ॻ͍ͨΒίϯύΫτʂ <div class=“wrap”> <ul class=“list”> <li>Ϧετ</li> <li>Ϧετ</li> </ul> <p class=“text”>ςΩετ</p> </div> .wrap { color: #fff; }
22. ϕϯμʔϓϨϑΟοΫε -webkit-border-radiusͱ͔ɺ-ms-border-radiusͱ͍͏ॻ͖ํ͸ ݟͨ͜ͱ͕͋Γ·ͤΜ͔ʁ
 ͜ͷɺ-webkit-ɺ-ms-ͳͲͷ෦෼͕ʮϕϯμʔϓϨϑΟοΫεʯ Ͱ͢ɻ ओʹ͜ΕΒ͸·ͩ࢓༷͕͔ͬ͠Γܾ·͍ͬͯͳ͍౳Ͱɺϒϥ΢ βʹઌߦ࣮૷͞ΕͨCSSʹ͚ͭΒΕ·͢ɻ ͭ·Γɺਖ਼࣮ࣜ૷͞ΕͨΒ͍Βͳ͘ͳΓ·͢ɻ
24. caniuse.com ϕϯμʔϓϨϑΟοΫε͕ඞཁ͔Ͳ͏͔Λڭ͑ͯ͘ΕΔαΠτͰ ͢ɻ
 ௐ΂͍ͨCSSͷελΠϧΛೖྗ͢ΔͱɺݱࡏରԠ͍ͯ͠Δ͔Ͳ͏ ͔͕ͻͱ໨ͰΘ͔Γ·͢ɻ ෆཁͳϕϯμʔϓϨϑΟοΫε͸͕ͭΜͱ࡟Γ·͠ΐ͏ɻ
25. ϕϯμʔϓϨϑΟοΫεͷॱ൪ (A) .hoge { -webkit-box-sizing: border-box; box-sizing: border-box; } (B) .hoge { box-sizing: border-box; -webkit-box-sizing: border-box; } Question!
 ॻ͖ํ͸Ͳ͕ͬͪਖ਼͍͠Ͱ͠ΐ͏ʁ
26. ϕϯμʔϓϨϑΟοΫεͷॱ൪ ਖ਼ղ͸(A)Ͱ͢ʂ
 ઌʹ໰୊ʹग़ͨ͠ద༻ॱͷ֓೦ͱಉ͡Ͱ͢Ͷɻ
 ਖ਼ࣜͳॻ͖ํΛ࠷ޙʹ͓͚ͯ͠͹ɺ·࣮ͩ૷͞Ε͍ͯͳ͍͏ͪ ͸ϕϯμʔϓϨϑΟοΫεͷهड़͕ɺ࣮૷͞ΕͨΒCSS3ͷਖ਼ࣜ ͳॻ͖ํ͕దԠ͞Ε·͢ɻ େମ͸ϕϯμʔϓϨϑΟοΫεͷ༗ແͳ͚ͩͳͷͰͦΜͳʹ֐͸ ͳ͍Ͱ͕͢ɺͨ·ʹશવॻ͖ํͷҧ͏CSS3͕͋ΔͷͰ஫ҙ͠· ͠ΐ͏ɻ
27. ͦͷCSS ͜͏ॻ͍ͨํ͕͍͍͔΋ʁ
28. line-height .text { font-size: 10px; line-height: 12px; } @media (min-width: 768px) { .text { font-size: 16px; line-height: 18px; } }
29. line-heightʹ͍ͭͯ line-heightʹ͸͜Μͳॻ͖ํ͕͋Γ·͢ • ୯Ґ͖ͭʢྫɿline-height: 10pxʣ • ˋ͖ͭʢྫɿline-height: 150%ʣ • ਺஋ͷΈʢྫɿline-height: 1.6ʣ
30. line-heightɿ୯Ґ͖ͭͷಛ௃ ୯Ґ͖ͭʢઆ໌͠΍͘͢͢ΔͨΊpxͰ౷Ұ͠·͕͢ɺemͱ͔Ͱ ΋ಉ༷Ͱ͢ʣͷ৔߹ɺline-heightͷ஋͔ΒϑΥϯταΠζΛҾ͖ ࢉͯ͠ɺ2Ͱׂͬͨ਺஋্͕Լʹߦؒͱͯ͠଍͞Ε·͢ɻ (ྫ) font-size: 10px / line-height: 16px
 (16-10)/2 = 3 // ্Լ3pxͷߦؒ
31. line-heightɿˋ͖ͭͷಛ௃ ·ͣɺline-heightͷ஋ͱϑΥϯταΠζΛֻ͚ࢉ͠·͢ɻͦͷֻ ͚ࢉͨ͠஋͔ΒϑΥϯταΠζΛҾ͍ͯɺ2ͰׂΓ·͢ɻ (ྫ) font-size: 10px / line-height: 120%
 ((10*120)-10)/2 = 1 // ্Լ1pxͷߦؒ
32. line-heightɿ୯Ґͳ͠ͷಛ௃ ϑΥϯταΠζʹline-heightͷ஋Λֻ͚ࢉͯ͠ɺͦͷ਺஋͔Β ϑΥϯταΠζΛҾ͍ͯ2Ͱׂͬͨ਺஋্͕Լʹߦؒͱͯ͠଍͞ Ε·͢ɻ (ྫ) font-size: 10px / line-height: 2
 ((10*2)-10)/2 = 5 // ্Լ5pxͷߦؒ
33. ͭ·Γ…%ͱ୯Ґͳָ͕͠ʂ Ϩεϙϯγϒͷͱ͖ʹPCͱεϚϗͰͦΕͧΕϑΥϯταΠζͱ line-heightΛࢦఆ͍ͯ͠ΔέʔεΛΑ͘ݟ·͕͢ɺline-height Λˋ΍୯Ґͳ͠Ͱࢦఆ͓͚ͯ͠͹ɺ΄΅ಉ͡ߦؒΛอͯΔͷͰ νϣοτָ͕Ͱ͖·͢ʂ ͪͳΈʹࢲ͸͍ͭ΋୯Ґͳ͠Ͱॻ͍͍ͯ·͢ɻ
34. ͭ·Γɺ͜Μͳײ͡ʹʂ .text { font-size: 10px; line-height: 1.6; } @media (min-width: 768px) { .text { font-size: 16px; } } // εϚϗͷͱ͖͸((10*1.6)-10)/2 Ͱɺ্Լ3pxͷߦؒ // PC͸((16*1.6)-16)/2 Ͱɺ্Լ4.8pxͷߦؒ
35. ॏෳ͢Δهड़Λ·ͱΊΑ͏ .text-a { text-align: left; font-size: 20px; color: #000; } .text-b { text-align: left; font-size: 50px; color: #000; } .text-c { text-align: left; color: #000; }
36. ॏෳ͢Δهड़Λ·ͱΊΑ͏ CSS͸ΧϯϚ۠੾ΓͰ·ͱΊΔ͜ͱ͕Ͱ͖·͢ɻελΠϧ͝ͱ૿ ΍͍ͯ͘͠ͱԆʑCSSϑΝΠϧ͕௕͘ͳͬͯʮͲ͜ʹ଍ͨͬ͠ ͚ʁʯͱͳΓ͕ͪͳͷͰɺΧϯϚ۠੾ΓͰ·ͱΊͯΈ·͠ΐ͏ɻ
37. ॏෳ͢Δهड़Λ·ͱΊΑ͏ .text-a, .text-b, .text-c { text-align: left; color: #000; } .text-a { font-size: 20px; } .text-b { font-size: 50px; }
38. Ϋϥε͸ෳ਺͚ͭΒΕ·͢ <div class=“class1 class2 class3”></div> ͜ͷΑ͏ʹɺ൒֯εϖʔεΛೖΕΕ͹ɺҰͭͷཁૉʹͨ͘͞Μͷ ΫϥεΛ͚ͭΔ͜ͱ͕Ͱ͖·͢ɻ ※ͨͩ͠ɺid͸Ұ͔͚ͭͭ͠Δ͜ͱ͕Ͱ͖·ͤΜʂ
39. ઌఔͷॏෳΫϥε΋ڞ௨Խ .textset { text-align: left; color: #000; } .text-a { font-size: 20px; } .text-b { font-size: 50px; } // HTML <div class=“textset text-a”></div> <div class=“textset text-b”></div>
40. z-indexͷ஋ʹ஫ҙ ॏͶॱΛมߋͰ͖ͯศརͳz-indexͰ͕͢ɺ͋·Γେ͖͍஋Λ࢖ ͏ͱɺҙਤ͠ͳ͍ͱ͜ΖͰॱ൪௨ΓʹͳΒͳ͔ͬͨΓ͠·͢ɻ
41. margin͸৺ͷڑ཭ <div class=“a”></div> <div class=“b”></div> // CSS .a { margin: 40px 0; } .b { margin-top: 20px; } Question .bͷ্ʹͭ͘margin͸Կpxʁ
42. margin͸৺ͷڑ཭ ਖ਼ղ͸40pxʂ 60px͡Όͳ͍ͷʁͱࢥ͍·͢ΑͶɻ
 margin͸جຊతʹେ͖͍ํͰऔΒΕ·͢ɻ͜Ε͕marginͷ૬ࡴ ͱݺ͹Ε͍ͯΔ΋ͷͰ͢ɻ ʮ৺ͷڑ཭ʯҾ༻ɿhttp://kojika17.com/2012/08/margin-of-css.html
43. Ͳ͏΍ͬͯษڧͨ͠Βʁ
44. ॻ͔͘͠ͳ͍…ʂʂ HTMLͱ͔CSSͬͯσβΠϯΑΓ΋ͬͱ;Θͬͱ͍ͯͯ͠ɺͲ͏ ॻ͍ͯ΋ݟΕΔ͔Β͍͍΍ͬͯͳΓ͕ͪͰ͢ɻʢ͋ͱࢦఠ͞Εͨ Β͙͵…ͬͯͳΓ·͢ΑͶʣ
 ͜Ε͹͔ͬΓ͸ॻ͍ͯܦݧ஋ΛஷΊΔ͔͋͠Γ·ͤΜ… ࢲ͸ɺલʹࣗ෼͕ॻ͍ͨίʔυͱݟൺ΂ͯʮ͜ͷͱ͖ΑΓϚγ ʹॻ͚ΔΑ͏ʹͳͬͨͳʯΛੵΈॏͶ͖ͯ·ͨ͠ʂ
45. ͓·͚
46. Brackets
47. ܰɹ͍ɹʂ • Dreamweaver΋ͦΕ͸ͦΕ͸ૉ੖Β͍͠ιϑτͰ͕͢ɺ͍͔ ΜͤΜϑϧεϖοΫ͗ͯ͢ॏ͍ͷ͕࢒೦ɻ • Dreamweaver͸ૉ੖Β͍͠ιϑτʢ2ճ໨ʣͰ͕͢ɺݸਓత ʹͪΐͬͱͨ͠LPͱ͔Λ࡞Δʹ͸ΦʔόʔεϖοΫͳιϑτ ͔ͳʁͱࢥͬͨΓɻ
 ※ࢲ͸࢖ͬͯ·ͤΜɻAtomͱ͍͏ผͷΤσΟλΛ࢖͍ͬͯ·͢ˑʢʍωɾʣvŝŒűƅ
 ʢͰ΋PCͷػݏ࣍ୈͰΊͪΌͪ͘Όॏͯ͘શવಈ͔ͳ͍ͷͰBrackets΋ซ༻͠͸͡Ί·ͨ͠ʣ
48. ͪΐͬͱϖʔδ৮Δ͚ͩͳΒ Bracketsͷ΄͏͕ετϨεগͳ͍͔΋ʁ • ࣗ෼ͷ޷Έʹ߹ΘͤͯΧελϚΠζͰ͖Δͷ͕Α͍ • σϑΥϧτͰ೔ຊޠԽࡁΈɺDreamweaverʹ͋ΔϥΠϒϓϨ Ϗϡʔ΋࣮૷ࡁΈɺͱ͍͏͔…ͦ΋ͦ΋Dreamweaverͷίʔ υϏϡʔ෦෼͸Brackets͕૊Έࠐ·Ε͍ͯΔͷͰɺ࢖༻ײʹ ۃ୺ͳେࠩ͸ͳͦ͞͏
 ※Dreamweaver͜͜਺೥࢖͍ͬͯͳ͍ͷͰϋοΩϦͱ͸͍͑ͳ͍Ͱ͕͢…
49. ೖΕ͓͖͍֦ͯͨுػೳ • Custom Work
 ։͍͍ͯΔϑΝΠϧ͕λϒͰදࣔ͞ΕͨΓɺαΠυόʔΛӅ͠ ͨΓͰ͖Δ • શۭ֯നɾεϖʔεɾλϒදࣔ
 ۭനจࣈͳͲΛදࣔͰ͖Δ֦ுɻશ֯΋Ͱ͖ͨͷ͸͜ͷ֦ுػ ೳ͚͔ͩ΋ • Shizimily Multiencoding for Brackets
 Brackets͸σϑΥϧτͰUTF-8͔͠࢖͑·ͤΜ͕ɺ͜ͷ֦ுΛ ೖΕΔͱShift_JISɺEUC-JPͳͲ͕࢖͑·͢
50. ͓޷ΈͰೖΕΔͱ͍͍͔΋ͷ֦ுػೳ • Select Lines
 σϞ͠·͢ɻߦ൪߸ʹϚ΢εΦʔόʔͰϋΠϥΠτͯ͘͠Εʢςʔ ϚʹΑΔ͔΋ʣͯίϐʔ΋Ͱ͖·͢ • Emmet
 σϞ͠·͢ɻ׳ΕΔͱศརͩͳʔͱ͍͏ػೳͰ͢ʂ ࠓճڍ֦͛ͨுػೳ͸΄ΜͷҰ෦Ͱ͢ʂ
 ʮBrackets ֦ு ͓͢͢Ίʯͱ͔ͰGoogleઌੜʹฉ͘ͱ͍ΖΜͳ هࣄ͕ग़ͯ͘ΔͷͰɺࣗ෼ͷ޷͖ͳ֦ுػೳΛೖΕͯΈΔͱ͍͍ ͱࢥ͍·͢ʂ
51. ݟͨ໨΋ม͑ΕΔBrackets
52. ࣭໰λΠϜ