Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

Chiaki Okamoto

October 14, 2017
Tweet

More Decks by Chiaki Okamoto

Other Decks in Technology

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