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

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

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

Transcript

1. ͜ΜͳCSS͔Β͸
   ͦΖͦΖଔۀ͠Α͏
   2017.10.14 Obara Chiaki
   

   View Slide

2. ·ͣ࠷ॳʹ…
   

   View Slide

3. HTMLΛਖ਼͘͠ॻ͜͏ʂ
   CSSͷϨϕϧΞοϓʹ͸HTMLͷ஌ࣝ΋͋ΔͱΑΓΑ͍
   Ͱ͢ɻ

   ྫ͑͹ɺsection΍articleʹ͸ඞͣݟग़͕͠ඞཁͩͱ͔ɺ
   ul΍olͷ௚Լʹ͸liؚ͔͠ΜͰ͸͍͚ͳ͍…ͳͲɺHTML
   ʹ͸ͪΐͬͱͨ͠ϧʔϧ͕͋Γ·͢ɻ
   CSSΛϨϕϧΞοϓͤ͞ΔͨΊʹɺHTMLͷจॻߏ଄Λ
   ҙࣝͯ͠ίʔσΟϯάͯ͠Έ·͠ΐ͏ʂ
   

   View Slide

4. ͦΕͰ͸ຊ୊Ͱ͢ʂ
   

   View Slide

5. ϨΨγʔϒϥ΢β༻ͷهड़͸ফͦ͏
   ϨΨγʔϒϥ΢βʹʢಛʹIEΛࢦ͠·͕͢ʣࠓ͸͋·Γ࢖ΘΕͯ
   ͍ͳ͍ݹ͍ϒϥ΢βͷ͜ͱͰ͢ɻ
   width /***/: auto;ͱ͔* html .clearfix { zoom: 1; }ͱ͍ͬͨهड़
   ͸ɺओʹIE6ͱ͔IE7ͷͱͬͬͬͬͬͯ΋ݹ͍ϒϥ΢β༻ͷهड़ͳ
   ͷͰɺࠓ͸΋͏ॻ͔ͳͯ͘େৎ෉Ͱ͢ʂ
   

   View Slide

6. ཁૉηϨΫλ͸ͦͬͱ͓ͯ͜͠͏
   h1 {
   color: #fc0;
   }
   span {
   display: block;
   }
   div {
   text-align: center;
   }
   

   View Slide

7. ཁૉηϨΫλ͸ͦͬͱ͓ͯ͜͠͏
   h1 {
   color: #fc0;
   }
   span {
   display: block;
   }
   div {
   text-align: center;
   }
   NOOOOOOOO!!!!
   

   View Slide

8. ཁૉηϨΫλ͸ͦͬͱ͓ͯ͜͠͏
   ཁૉηϨΫλʹελΠϧΛࢦఆͯ͠͠·͏ͱɺͦͷϖʔδ಺ʹ͋
   ΔશͯͷཁૉʹͦͷελΠϧ͕౰ͨͬͯ͠·͏ͷͰɺҙਤͤͣϖʔ
   δશମ่͕Εͯ͠·ͬͨΓ͢Δ͜ͱ͕͋Γ·͢ʂ

   ʢ΍͍͍ͬͯͷ͸Ϧηοτ͚ͩʂʣ
   ͱʹ͔͘ཁૉʹελΠϧ͸౰ͯͳ͍ࣄΛపఈ͠·͠ΐ͏ɻ
   Ͳ͏ͯ͠΋΍Δͱ͖͸ɺ.hoge h1 {} ͳͲɺ਌ʹΫϥεΛࢦఆ͠
   ͍ͯ͋͛ͯͩ͘͞ɻ
   

   View Slide

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)ϒϥ΢βʹΑͬͯ·ͪ·ͪ
   

   View Slide

10. CSSͷద༻ॱΛҙࣝͯ͠ΈΑ͏
    .box {
    width: 300px;
    }
    .box {
    width: 400px;
    }
    Question!
    (A)෯300px
    (B)෯400px
    (C)ϒϥ΢βʹΑͬͯ·ͪ·ͪ
    

    View Slide

11. CSSͷద༻ॱΛҙࣝͯ͠ΈΑ͏
    1໰໨ͷਖ਼ղ͸(A)ɺ2໰໨ͷਖ਼ղ͸(B)Ͱ͢ʂ
    CSS͸ɺجຊతʹޙ͔Βॻ͍ͨํ͕༏ઌͯ͠ඳը͞Ε·͢ɻ

    ͜ͷಛੑΛར༻ͯ͠ɺྫ͑͹ࣗࣾͰ͸͜͏ͳͬͯΔ͚ͲָఱͰ͸
    ͜͏͢Δʂͱ͍͏ͱ͖ʹɺϕʔεʹͳΔCSSΑΓޙʹCSSΛهड़
    ͢Ε͹໰୊ͳ্͘ॻ͖͕Ͱ͖·͢ɻ
    

    View Slide

12. CSSͷద༻ॱΛҙࣝͯ͠ΈΑ͏(Ԡ༻)
    .wrap .box {
    width: 300px;
    }
    .box {
    width: 400px;
    }
    Question!
    (A)෯300px
    (B)෯400px
    (C)͜Ε͸ؒҧ͍ͳ͘ϒϥ΢βʹΑͬͯ·ͪ·ͪ
    

    View Slide

13. CSSͷద༻ॱΛҙࣝͯ͠ΈΑ͏(Ԡ༻)
    ਖ਼ղ͸(A)Ͱ͢ʂޙ͔Βॻ͍ͨͷʹͳΜͰʁͬͯͳΓ·͢Ͷʂ

    CSSʹ͸ʮৄࡉ౓ʯͱ͍͏΋ͷ͕͋Γ·͢ɻ

    ৄ͘͠΍Δͱ͕࣌ؒ଍Γͳ͍ͷͰϙΠϯτ͚͓ͩ͑͞·͠ΐ͏
    • ΫϥεΑΓid͕༏ઌ͞ΕΔʢʹۃྗΫϥεͰॻ͘ͷ͕٢ʣ
    • .hoge .fuga ͷΑ͏ʹਂ౓͕ਂ͘ͳΕ͹ͳΔ΄Ͳ༏ઌ͞ΕΔ
    • !important ͸ԿΑΓ΋༏ઌ͞ΕΔ
    

    View Slide

14. CSSͷద༻ॱΛҙࣝͯ͠ΈΑ͏(Ԡ༻)
    ਖ਼ղ͸(A)Ͱ͢ʂޙ͔Βॻ͍ͨͷʹͳΜͰʁͬͯͳΓ·͢Ͷʂ

    CSSʹ͸ʮৄࡉ౓ʯͱ͍͏΋ͷ͕͋Γ·͢ɻ

    ৄ͘͠΍Δͱ͕࣌ؒ଍Γͳ͍ͷͰϙΠϯτ͚͓ͩ͑͞·͠ΐ͏
    • ΫϥεΑΓid͕༏ઌ͞ΕΔʢʹۃྗΫϥεͰॻ͘ͷ͕٢ʣ
    • .hoge .fuga ͷΑ͏ʹਂ౓͕ਂ͘ͳΕ͹ͳΔ΄Ͳ༏ઌ͞ΕΔ
    • !important ͸ԿΑΓ΋༏ઌ͞ΕΔ
    

    View Slide

15. !important͸ͱͯ΋λν͕ѱ͍
    !important͸ԿΑΓ΋༏ઌ͞ΕΔͷͰɺ͔ͨ͠ʹศརͰ͢Ͷɻ

    ͭ·Γɺ!importantΛଧͪফ͢ʹ͸ɺͦͷελΠϧΑΓޙʹߋ
    ʹ!importantΛ͚ͭͳ͍ͱ͍͚·ͤΜɻ
    ·ͨͦͷ!importantΛଧͪফ͢ʹ͸ɾɾɾɾऴΘΒͳ͍Ͱ͢Ͷɻ
    ͳͥελΠϧॻ͍ͯΔͷʹద༻͞Εͳ͍ΜͩʂͱCSSΛಡΈղ͘
    खؒ΋͔͔Γ·͢ɻ

    ༏ઌ౓Λۦ࢖ͯ͠ɺ!important͔Β͸ͦΖͦΖଔۀ͠·͠ΐ͏ɻ
    

    View Slide

16. id/ΫϥεͷલͷηϨΫλ͸ল͜͏
    p.item-name ͳͲɺΫϥε໊΍id໊ͷલʹηϨΫλΛ͚ͭΔͱɺ
    ྫ͑͹divͰಉ͡ΫϥεΛ࢖͍͍ͨͱ͖ʹɺ·ͨ div.item-name
    Λ૿΍͞ͳ͍ͱ͍͚ͳ͘ͳΓ·͢ɻ
    ·ͨɺઌఔઆ໌ͨ͠ৄࡉ౓΋͕͋ͬͯ͠·͏ͷͰɺ্ॻ͖͠ʹ͘
    ͍CSSʹͳͬͯ͠·͍·͢ɻ
    ಛʹ͚ͭͳ͍ͱ͍͚ͳ͍΋ͷͰ͸ͳ͍ͷͰɺཁૉηϨΫλ͸Ͳ
    ΜͲΜল͍͍͖ͯ·͠ΐ͏ɻ
    

    View Slide

17. styleଐੑʹ͸ؾΛ͚ͭΑ͏
    !importantͷ࣍ʹৄࡉ౓͕ߴ͍ॻ͖ํʹͳΓ·͢ɻ

    ͭ·ΓɺstyleଐੑͰॻ͔ΕͨCSSΛଧͪফ͢ʹ͸ɺѱखͰ͋
    Δ!importantΛ࢖Θ͟ΔΛಘͳ͘ͳΓ·͢ɻ

    ςετతʹʙͱ͔ɺ͜͜Ͱ͚͔ͩ͜͜͠ຊοο౰ʹ࢖Θͳ͍ʂ
    ͱ͍͏ͱ͖Λআ͍ͯ࢖Θͳ͍ͷ͕ແ೉Ͱ͢ɻ

    ʢ໘౗Ͱ΋ͪΌΜͱΫϥε໊Λ͚͓͍ͭͯͨํ͕͍͍Ͱ͢ʣ
    

    View Slide

18. jQueryͰ΋styleଐੑ͕ͭ͘
    jQueryͷ$(select).hide()΍$(select).show()ͳͲɺҰ෦ͷಈ͖Ͱ
    ௚઀styleଐੑ͕͋ͯΒΕ·͢ɻ

    ී௨JSͰදࣔඇදࣔΛ৮Δ͚ͩͳΒͦ͜·Ͱҙࣝ͠ͳͯ͘΋େ
    ৎ෉Ͱ͕͢ɺྫ͑͹εϚϗͷͱ͖͸ΞίʔσΟΦϯͯ͠ɺPCͰ
    ͸දࣔͨ͠··ʹ͢Δʂ…ͳΜ͔ͷͱ͖͸ɺεϚϗͰΞίʔ
    σΟΦϯด͡ΔˠPCαΠζʹ͢Δͱɺdisplay:none͕࢒ͬͨ·
    ·ʹͳΔʂͱ͍͏͜ͱ͕͋ͬͨΓ͠·͢ɻ

    దٓɺඞཁͰ͋Ε͹removeAttrͰstyleଐੑΛ࡟আ͠·͠ΐ͏ɻ
    

    View Slide

19. CSSͷελΠϧܧঝΛ஌Ζ͏
    ਌ཁૉͰࢦఆͨ͠CSS͸ɺࢠཁૉʹద༻͞ΕΔ΋ͷ͕͋Γ·͢ɻ

    ओʹɺϑΥϯταΠζ΍Χϥʔɺ͋ͱtext-alignͳͲͷςΩετ
    Λ૷০͢ΔελΠϧͰ͢ɻ
    ͭ·Γɺ਌ཁૉʹCSSΛॻ͍ͯ͠·͑͹ɺࢠཁૉʹಉ͡CSSΛॻ
    ͘ඞཁ͸͋Γ·ͤΜʂ
    

    View Slide

20. ͜Μͳ෩ʹॻ͍ͯ΋ద༻͞ΕΔ͚Ͳ…
    
    Ϧετ
    Ϧετ
    
    ςΩετ
    .list li {
    color: #fff;
    }
    .text {
    color: #fff;
    }
    

    View Slide

21. ͜͏ॻ͍ͨΒίϯύΫτʂ
    
    
    Ϧετ
    Ϧετ
    
    ςΩετ
    
    .wrap {
    color: #fff;
    }
    

    View Slide

22. ϕϯμʔϓϨϑΟοΫε
    -webkit-border-radiusͱ͔ɺ-ms-border-radiusͱ͍͏ॻ͖ํ͸
    ݟͨ͜ͱ͕͋Γ·ͤΜ͔ʁ

    ͜ͷɺ-webkit-ɺ-ms-ͳͲͷ෦෼͕ʮϕϯμʔϓϨϑΟοΫεʯ
    Ͱ͢ɻ
    ओʹ͜ΕΒ͸·ͩ࢓༷͕͔ͬ͠Γܾ·͍ͬͯͳ͍౳Ͱɺϒϥ΢
    βʹઌߦ࣮૷͞ΕͨCSSʹ͚ͭΒΕ·͢ɻ
    ͭ·Γɺਖ਼࣮ࣜ૷͞ΕͨΒ͍Βͳ͘ͳΓ·͢ɻ
    

    View Slide

23. View Slide

24. caniuse.com
    ϕϯμʔϓϨϑΟοΫε͕ඞཁ͔Ͳ͏͔Λڭ͑ͯ͘ΕΔαΠτͰ
    ͢ɻ

    ௐ΂͍ͨCSSͷελΠϧΛೖྗ͢ΔͱɺݱࡏରԠ͍ͯ͠Δ͔Ͳ͏
    ͔͕ͻͱ໨ͰΘ͔Γ·͢ɻ
    ෆཁͳϕϯμʔϓϨϑΟοΫε͸͕ͭΜͱ࡟Γ·͠ΐ͏ɻ
    

    View Slide

25. ϕϯμʔϓϨϑΟοΫεͷॱ൪
    (A)
    .hoge {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }
    (B)
    .hoge {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    }
    Question!

    ॻ͖ํ͸Ͳ͕ͬͪਖ਼͍͠Ͱ͠ΐ͏ʁ
    

    View Slide

26. ϕϯμʔϓϨϑΟοΫεͷॱ൪
    ਖ਼ղ͸(A)Ͱ͢ʂ

    ઌʹ໰୊ʹग़ͨ͠ద༻ॱͷ֓೦ͱಉ͡Ͱ͢Ͷɻ

    ਖ਼ࣜͳॻ͖ํΛ࠷ޙʹ͓͚ͯ͠͹ɺ·࣮ͩ૷͞Ε͍ͯͳ͍͏ͪ
    ͸ϕϯμʔϓϨϑΟοΫεͷهड़͕ɺ࣮૷͞ΕͨΒCSS3ͷਖ਼ࣜ
    ͳॻ͖ํ͕దԠ͞Ε·͢ɻ
    େମ͸ϕϯμʔϓϨϑΟοΫεͷ༗ແͳ͚ͩͳͷͰͦΜͳʹ֐͸
    ͳ͍Ͱ͕͢ɺͨ·ʹશવॻ͖ํͷҧ͏CSS3͕͋ΔͷͰ஫ҙ͠·
    ͠ΐ͏ɻ
    

    View Slide

27. ͦͷCSS
    ͜͏ॻ͍ͨํ͕͍͍͔΋ʁ
    

    View Slide

28. line-height
    .text {
    font-size: 10px;
    line-height: 12px;
    }
    @media (min-width: 768px) {
    .text {
    font-size: 16px;
    line-height: 18px;
    }
    }
    

    View Slide

29. line-heightʹ͍ͭͯ
    line-heightʹ͸͜Μͳॻ͖ํ͕͋Γ·͢
    • ୯Ґ͖ͭʢྫɿline-height: 10pxʣ
    • ˋ͖ͭʢྫɿline-height: 150%ʣ
    • ਺஋ͷΈʢྫɿline-height: 1.6ʣ
    

    View Slide

30. line-heightɿ୯Ґ͖ͭͷಛ௃
    ୯Ґ͖ͭʢઆ໌͠΍͘͢͢ΔͨΊpxͰ౷Ұ͠·͕͢ɺemͱ͔Ͱ
    ΋ಉ༷Ͱ͢ʣͷ৔߹ɺline-heightͷ஋͔ΒϑΥϯταΠζΛҾ͖
    ࢉͯ͠ɺ2Ͱׂͬͨ਺஋্͕Լʹߦؒͱͯ͠଍͞Ε·͢ɻ
    (ྫ) font-size: 10px / line-height: 16px

    (16-10)/2 = 3 // ্Լ3pxͷߦؒ
    

    View Slide

31. line-heightɿˋ͖ͭͷಛ௃
    ·ͣɺline-heightͷ஋ͱϑΥϯταΠζΛֻ͚ࢉ͠·͢ɻͦͷֻ
    ͚ࢉͨ͠஋͔ΒϑΥϯταΠζΛҾ͍ͯɺ2ͰׂΓ·͢ɻ
    (ྫ) font-size: 10px / line-height: 120%

    ((10*120)-10)/2 = 1 // ্Լ1pxͷߦؒ
    

    View Slide

32. line-heightɿ୯Ґͳ͠ͷಛ௃
    ϑΥϯταΠζʹline-heightͷ஋Λֻ͚ࢉͯ͠ɺͦͷ਺஋͔Β
    ϑΥϯταΠζΛҾ͍ͯ2Ͱׂͬͨ਺஋্͕Լʹߦؒͱͯ͠଍͞
    Ε·͢ɻ
    (ྫ) font-size: 10px / line-height: 2

    ((10*2)-10)/2 = 5 // ্Լ5pxͷߦؒ
    

    View Slide

33. ͭ·Γ…%ͱ୯Ґͳָ͕͠ʂ
    Ϩεϙϯγϒͷͱ͖ʹPCͱεϚϗͰͦΕͧΕϑΥϯταΠζͱ
    line-heightΛࢦఆ͍ͯ͠ΔέʔεΛΑ͘ݟ·͕͢ɺline-height
    Λˋ΍୯Ґͳ͠Ͱࢦఆ͓͚ͯ͠͹ɺ΄΅ಉ͡ߦؒΛอͯΔͷͰ
    νϣοτָ͕Ͱ͖·͢ʂ
    ͪͳΈʹࢲ͸͍ͭ΋୯Ґͳ͠Ͱॻ͍͍ͯ·͢ɻ
    

    View Slide

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ͷߦؒ
    

    View Slide

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;
    }
    

    View Slide

36. ॏෳ͢Δهड़Λ·ͱΊΑ͏
    CSS͸ΧϯϚ۠੾ΓͰ·ͱΊΔ͜ͱ͕Ͱ͖·͢ɻελΠϧ͝ͱ૿
    ΍͍ͯ͘͠ͱԆʑCSSϑΝΠϧ͕௕͘ͳͬͯʮͲ͜ʹ଍ͨͬ͠
    ͚ʁʯͱͳΓ͕ͪͳͷͰɺΧϯϚ۠੾ΓͰ·ͱΊͯΈ·͠ΐ͏ɻ
    

    View Slide

37. ॏෳ͢Δهड़Λ·ͱΊΑ͏
    .text-a, .text-b, .text-c {
    text-align: left;
    color: #000;
    }
    .text-a {
    font-size: 20px;
    }
    .text-b {
    font-size: 50px;
    }
    

    View Slide

38. Ϋϥε͸ෳ਺͚ͭΒΕ·͢
    
    ͜ͷΑ͏ʹɺ൒֯εϖʔεΛೖΕΕ͹ɺҰͭͷཁૉʹͨ͘͞Μͷ
    ΫϥεΛ͚ͭΔ͜ͱ͕Ͱ͖·͢ɻ
    ※ͨͩ͠ɺid͸Ұ͔͚ͭͭ͠Δ͜ͱ͕Ͱ͖·ͤΜʂ
    

    View Slide

39. ઌఔͷॏෳΫϥε΋ڞ௨Խ
    .textset {
    text-align: left;
    color: #000;
    }
    .text-a {
    font-size: 20px;
    }
    .text-b {
    font-size: 50px;
    }
    // HTML
    
    
    

    View Slide

40. z-indexͷ஋ʹ஫ҙ
    ॏͶॱΛมߋͰ͖ͯศརͳz-indexͰ͕͢ɺ͋·Γେ͖͍஋Λ࢖
    ͏ͱɺҙਤ͠ͳ͍ͱ͜ΖͰॱ൪௨ΓʹͳΒͳ͔ͬͨΓ͠·͢ɻ
    

    View Slide

41. margin͸৺ͷڑ཭
    
    
    // CSS
    .a {
    margin: 40px 0;
    }
    .b {
    margin-top: 20px;
    }
    Question
    .bͷ্ʹͭ͘margin͸Կpxʁ
    

    View Slide

42. margin͸৺ͷڑ཭
    ਖ਼ղ͸40pxʂ
    60px͡Όͳ͍ͷʁͱࢥ͍·͢ΑͶɻ

    margin͸جຊతʹେ͖͍ํͰऔΒΕ·͢ɻ͜Ε͕marginͷ૬ࡴ
    ͱݺ͹Ε͍ͯΔ΋ͷͰ͢ɻ
    ʮ৺ͷڑ཭ʯҾ༻ɿhttp://kojika17.com/2012/08/margin-of-css.html
    

    View Slide

43. Ͳ͏΍ͬͯษڧͨ͠Βʁ
    

    View Slide

44. ॻ͔͘͠ͳ͍…ʂʂ
    HTMLͱ͔CSSͬͯσβΠϯΑΓ΋ͬͱ;Θͬͱ͍ͯͯ͠ɺͲ͏
    ॻ͍ͯ΋ݟΕΔ͔Β͍͍΍ͬͯͳΓ͕ͪͰ͢ɻʢ͋ͱࢦఠ͞Εͨ
    Β͙͵…ͬͯͳΓ·͢ΑͶʣ

    ͜Ε͹͔ͬΓ͸ॻ͍ͯܦݧ஋ΛஷΊΔ͔͋͠Γ·ͤΜ…
    ࢲ͸ɺલʹࣗ෼͕ॻ͍ͨίʔυͱݟൺ΂ͯʮ͜ͷͱ͖ΑΓϚγ
    ʹॻ͚ΔΑ͏ʹͳͬͨͳʯΛੵΈॏͶ͖ͯ·ͨ͠ʂ
    

    View Slide

45. ͓·͚
    

    View Slide

46. Brackets
    

    View Slide

47. ܰɹ͍ɹʂ
    • Dreamweaver΋ͦΕ͸ͦΕ͸ૉ੖Β͍͠ιϑτͰ͕͢ɺ͍͔
    ΜͤΜϑϧεϖοΫ͗ͯ͢ॏ͍ͷ͕࢒೦ɻ
    • Dreamweaver͸ૉ੖Β͍͠ιϑτʢ2ճ໨ʣͰ͕͢ɺݸਓత
    ʹͪΐͬͱͨ͠LPͱ͔Λ࡞Δʹ͸ΦʔόʔεϖοΫͳιϑτ
    ͔ͳʁͱࢥͬͨΓɻ

    ※ࢲ͸࢖ͬͯ·ͤΜɻAtomͱ͍͏ผͷΤσΟλΛ࢖͍ͬͯ·͢ˑʢʍωɾʣvŝŒűƅ

    ʢͰ΋PCͷػݏ࣍ୈͰΊͪΌͪ͘Όॏͯ͘શવಈ͔ͳ͍ͷͰBrackets΋ซ༻͠͸͡Ί·ͨ͠ʣ
    

    View Slide

48. ͪΐͬͱϖʔδ৮Δ͚ͩͳΒ
    Bracketsͷ΄͏͕ετϨεগͳ͍͔΋ʁ
    • ࣗ෼ͷ޷Έʹ߹ΘͤͯΧελϚΠζͰ͖Δͷ͕Α͍
    • σϑΥϧτͰ೔ຊޠԽࡁΈɺDreamweaverʹ͋ΔϥΠϒϓϨ
    Ϗϡʔ΋࣮૷ࡁΈɺͱ͍͏͔…ͦ΋ͦ΋Dreamweaverͷίʔ
    υϏϡʔ෦෼͸Brackets͕૊Έࠐ·Ε͍ͯΔͷͰɺ࢖༻ײʹ
    ۃ୺ͳେࠩ͸ͳͦ͞͏

    ※Dreamweaver͜͜਺೥࢖͍ͬͯͳ͍ͷͰϋοΩϦͱ͸͍͑ͳ͍Ͱ͕͢…
    

    View Slide

49. ೖΕ͓͖͍֦ͯͨுػೳ
    • Custom Work

    ։͍͍ͯΔϑΝΠϧ͕λϒͰදࣔ͞ΕͨΓɺαΠυόʔΛӅ͠
    ͨΓͰ͖Δ
    • શۭ֯നɾεϖʔεɾλϒදࣔ

    ۭനจࣈͳͲΛදࣔͰ͖Δ֦ுɻશ֯΋Ͱ͖ͨͷ͸͜ͷ֦ுػ
    ೳ͚͔ͩ΋
    • Shizimily Multiencoding for Brackets

    Brackets͸σϑΥϧτͰUTF-8͔͠࢖͑·ͤΜ͕ɺ͜ͷ֦ுΛ
    ೖΕΔͱShift_JISɺEUC-JPͳͲ͕࢖͑·͢
    

    View Slide

50. ͓޷ΈͰೖΕΔͱ͍͍͔΋ͷ֦ுػೳ
    • Select Lines

    σϞ͠·͢ɻߦ൪߸ʹϚ΢εΦʔόʔͰϋΠϥΠτͯ͘͠Εʢςʔ
    ϚʹΑΔ͔΋ʣͯίϐʔ΋Ͱ͖·͢
    • Emmet

    σϞ͠·͢ɻ׳ΕΔͱศརͩͳʔͱ͍͏ػೳͰ͢ʂ
    ࠓճڍ֦͛ͨுػೳ͸΄ΜͷҰ෦Ͱ͢ʂ

    ʮBrackets ֦ு ͓͢͢Ίʯͱ͔ͰGoogleઌੜʹฉ͘ͱ͍ΖΜͳ
    هࣄ͕ग़ͯ͘ΔͷͰɺࣗ෼ͷ޷͖ͳ֦ுػೳΛೖΕͯΈΔͱ͍͍
    ͱࢥ͍·͢ʂ
    

    View Slide

51. ݟͨ໨΋ม͑ΕΔBrackets
    

    View Slide

52. ࣭໰λΠϜ
    

    View Slide