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

by Chiaki Okamoto

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

·ͣ࠷ॳʹ…

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

ͦΕͰ͸ຊ୊Ͱ͢ʂ

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

ཁૉηϨΫλ͸ͦͬͱ͓ͯ͜͠͏ ཁૉηϨΫλʹελΠϧΛࢦఆͯ͠͠·͏ͱɺͦͷϖʔδ಺ʹ͋ ΔશͯͷཁૉʹͦͷελΠϧ͕౰ͨͬͯ͠·͏ͷͰɺҙਤͤͣϖʔ δશମ่͕Εͯ͠·ͬͨΓ͢Δ͜ͱ͕͋Γ·͢ʂ  ʢ΍͍͍ͬͯͷ͸Ϧηοτ͚ͩʂʣ ͱʹ͔͘ཁૉʹελΠϧ͸౰ͯͳ͍ࣄΛపఈ͠·͠ΐ͏ɻ Ͳ͏ͯ͠΋΍Δͱ͖͸ɺ.hoge h1 {} ͳͲɺ਌ʹΫϥεΛࢦఆ͠ ͍ͯ͋͛ͯͩ͘͞ɻ

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

CSSͷద༻ॱΛҙࣝͯ͠ΈΑ͏ 1໰໨ͷਖ਼ղ͸(A)ɺ2໰໨ͷਖ਼ղ͸(B)Ͱ͢ʂ CSS͸ɺجຊతʹޙ͔Βॻ͍ͨํ͕༏ઌͯ͠ඳը͞Ε·͢ɻ  ͜ͷಛੑΛར༻ͯ͠ɺྫ͑͹ࣗࣾͰ͸͜͏ͳͬͯΔ͚ͲָఱͰ͸ ͜͏͢Δʂͱ͍͏ͱ͖ʹɺϕʔεʹͳΔCSSΑΓޙʹCSSΛهड़ ͢Ε͹໰୊ͳ্͘ॻ͖͕Ͱ͖·͢ɻ

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

CSSͷద༻ॱΛҙࣝͯ͠ΈΑ͏(Ԡ༻) ਖ਼ղ͸(A)Ͱ͢ʂޙ͔Βॻ͍ͨͷʹͳΜͰʁͬͯͳΓ·͢Ͷʂ  CSSʹ͸ʮৄࡉ౓ʯͱ͍͏΋ͷ͕͋Γ·͢ɻ  ৄ͘͠΍Δͱ͕࣌ؒ଍Γͳ͍ͷͰϙΠϯτ͚͓ͩ͑͞·͠ΐ͏ • ΫϥεΑΓid͕༏ઌ͞ΕΔʢʹۃྗΫϥεͰॻ͘ͷ͕٢ʣ • .hoge .fuga ͷΑ͏ʹਂ౓͕ਂ͘ͳΕ͹ͳΔ΄Ͳ༏ઌ͞ΕΔ • !important ͸ԿΑΓ΋༏ઌ͞ΕΔ

Slide 14

Slide 14 text

Slide 15

Slide 15 text

!important͸ͱͯ΋λν͕ѱ͍ !important͸ԿΑΓ΋༏ઌ͞ΕΔͷͰɺ͔ͨ͠ʹศརͰ͢Ͷɻ  ͭ·Γɺ!importantΛଧͪফ͢ʹ͸ɺͦͷελΠϧΑΓޙʹߋ ʹ!importantΛ͚ͭͳ͍ͱ͍͚·ͤΜɻ ·ͨͦͷ!importantΛଧͪফ͢ʹ͸ɾɾɾɾऴΘΒͳ͍Ͱ͢Ͷɻ ͳͥελΠϧॻ͍ͯΔͷʹద༻͞Εͳ͍ΜͩʂͱCSSΛಡΈղ͘ खؒ΋͔͔Γ·͢ɻ  ༏ઌ౓Λۦ࢖ͯ͠ɺ!important͔Β͸ͦΖͦΖଔۀ͠·͠ΐ͏ɻ

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

styleଐੑʹ͸ؾΛ͚ͭΑ͏ !importantͷ࣍ʹৄࡉ౓͕ߴ͍ॻ͖ํʹͳΓ·͢ɻ  ͭ·ΓɺstyleଐੑͰॻ͔ΕͨCSSΛଧͪফ͢ʹ͸ɺѱखͰ͋ Δ!importantΛ࢖Θ͟ΔΛಘͳ͘ͳΓ·͢ɻ  ςετతʹʙͱ͔ɺ͜͜Ͱ͚͔ͩ͜͜͠ຊοο౰ʹ࢖Θͳ͍ʂ ͱ͍͏ͱ͖Λআ͍ͯ࢖Θͳ͍ͷ͕ແ೉Ͱ͢ɻ  ʢ໘౗Ͱ΋ͪΌΜͱΫϥε໊Λ͚͓͍ͭͯͨํ͕͍͍Ͱ͢ʣ

Slide 18

Slide 18 text

jQueryͰ΋styleଐੑ͕ͭ͘ jQueryͷ$(select).hide()΍$(select).show()ͳͲɺҰ෦ͷಈ͖Ͱ ௚઀styleଐੑ͕͋ͯΒΕ·͢ɻ  ී௨JSͰදࣔඇදࣔΛ৮Δ͚ͩͳΒͦ͜·Ͱҙࣝ͠ͳͯ͘΋େ ৎ෉Ͱ͕͢ɺྫ͑͹εϚϗͷͱ͖͸ΞίʔσΟΦϯͯ͠ɺPCͰ ͸දࣔͨ͠··ʹ͢Δʂ…ͳΜ͔ͷͱ͖͸ɺεϚϗͰΞίʔ σΟΦϯด͡ΔˠPCαΠζʹ͢Δͱɺdisplay:none͕࢒ͬͨ· ·ʹͳΔʂͱ͍͏͜ͱ͕͋ͬͨΓ͠·͢ɻ  దٓɺඞཁͰ͋Ε͹removeAttrͰstyleଐੑΛ࡟আ͠·͠ΐ͏ɻ

Slide 19

Slide 19 text

CSSͷελΠϧܧঝΛ஌Ζ͏ ਌ཁૉͰࢦఆͨ͠CSS͸ɺࢠཁૉʹద༻͞ΕΔ΋ͷ͕͋Γ·͢ɻ  ओʹɺϑΥϯταΠζ΍Χϥʔɺ͋ͱtext-alignͳͲͷςΩετ Λ૷০͢ΔελΠϧͰ͢ɻ ͭ·Γɺ਌ཁૉʹCSSΛॻ͍ͯ͠·͑͹ɺࢠཁૉʹಉ͡CSSΛॻ ͘ඞཁ͸͋Γ·ͤΜʂ

Slide 20

Slide 20 text

͜Μͳ෩ʹॻ͍ͯ΋ద༻͞ΕΔ͚Ͳ…

Ϧετ
Ϧετ

ςΩετ

.list li { color: #fff; } .text { color: #fff; }

Slide 21

Slide 21 text

͜͏ॻ͍ͨΒίϯύΫτʂ

Ϧετ
Ϧετ

ςΩετ

.wrap { color: #fff; }

Slide 22

Slide 22 text

ϕϯμʔϓϨϑΟοΫε -webkit-border-radiusͱ͔ɺ-ms-border-radiusͱ͍͏ॻ͖ํ͸ ݟͨ͜ͱ͕͋Γ·ͤΜ͔ʁ  ͜ͷɺ-webkit-ɺ-ms-ͳͲͷ෦෼͕ʮϕϯμʔϓϨϑΟοΫεʯ Ͱ͢ɻ ओʹ͜ΕΒ͸·ͩ࢓༷͕͔ͬ͠Γܾ·͍ͬͯͳ͍౳Ͱɺϒϥ΢ βʹઌߦ࣮૷͞ΕͨCSSʹ͚ͭΒΕ·͢ɻ ͭ·Γɺਖ਼࣮ࣜ૷͞ΕͨΒ͍Βͳ͘ͳΓ·͢ɻ

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

ϕϯμʔϓϨϑΟοΫεͷॱ൪ (A) .hoge { -webkit-box-sizing: border-box; box-sizing: border-box; } (B) .hoge { box-sizing: border-box; -webkit-box-sizing: border-box; } Question!  ॻ͖ํ͸Ͳ͕ͬͪਖ਼͍͠Ͱ͠ΐ͏ʁ

Slide 26

Slide 26 text

ϕϯμʔϓϨϑΟοΫεͷॱ൪ ਖ਼ղ͸(A)Ͱ͢ʂ  ઌʹ໰୊ʹग़ͨ͠ద༻ॱͷ֓೦ͱಉ͡Ͱ͢Ͷɻ  ਖ਼ࣜͳॻ͖ํΛ࠷ޙʹ͓͚ͯ͠͹ɺ·࣮ͩ૷͞Ε͍ͯͳ͍͏ͪ ͸ϕϯμʔϓϨϑΟοΫεͷهड़͕ɺ࣮૷͞ΕͨΒCSS3ͷਖ਼ࣜ ͳॻ͖ํ͕దԠ͞Ε·͢ɻ େମ͸ϕϯμʔϓϨϑΟοΫεͷ༗ແͳ͚ͩͳͷͰͦΜͳʹ֐͸ ͳ͍Ͱ͕͢ɺͨ·ʹશવॻ͖ํͷҧ͏CSS3͕͋ΔͷͰ஫ҙ͠· ͠ΐ͏ɻ

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

ͭ·Γɺ͜Μͳײ͡ʹʂ .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ͷߦؒ

Slide 35

Slide 35 text

ॏෳ͢Δهड़Λ·ͱΊΑ͏ .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; }

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

Ϋϥε͸ෳ਺͚ͭΒΕ·͢

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

margin͸৺ͷڑ཭

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

Slide 42

Slide 42 text

margin͸৺ͷڑ཭ ਖ਼ղ͸40pxʂ 60px͡Όͳ͍ͷʁͱࢥ͍·͢ΑͶɻ  margin͸جຊతʹେ͖͍ํͰऔΒΕ·͢ɻ͜Ε͕marginͷ૬ࡴ ͱݺ͹Ε͍ͯΔ΋ͷͰ͢ɻ ʮ৺ͷڑ཭ʯҾ༻ɿhttp://kojika17.com/2012/08/margin-of-css.html

Slide 43

Slide 43 text

Ͳ͏΍ͬͯษڧͨ͠Βʁ

Slide 44

Slide 44 text

ॻ͔͘͠ͳ͍…ʂʂ HTMLͱ͔CSSͬͯσβΠϯΑΓ΋ͬͱ;Θͬͱ͍ͯͯ͠ɺͲ͏ ॻ͍ͯ΋ݟΕΔ͔Β͍͍΍ͬͯͳΓ͕ͪͰ͢ɻʢ͋ͱࢦఠ͞Εͨ Β͙͵…ͬͯͳΓ·͢ΑͶʣ  ͜Ε͹͔ͬΓ͸ॻ͍ͯܦݧ஋ΛஷΊΔ͔͋͠Γ·ͤΜ… ࢲ͸ɺલʹࣗ෼͕ॻ͍ͨίʔυͱݟൺ΂ͯʮ͜ͷͱ͖ΑΓϚγ ʹॻ͚ΔΑ͏ʹͳͬͨͳʯΛੵΈॏͶ͖ͯ·ͨ͠ʂ

Slide 45

Slide 45 text

͓·͚

Slide 46

Slide 46 text

Brackets

Slide 47

Slide 47 text

ܰɹ͍ɹʂ • Dreamweaver΋ͦΕ͸ͦΕ͸ૉ੖Β͍͠ιϑτͰ͕͢ɺ͍͔ ΜͤΜϑϧεϖοΫ͗ͯ͢ॏ͍ͷ͕࢒೦ɻ • Dreamweaver͸ૉ੖Β͍͠ιϑτʢ2ճ໨ʣͰ͕͢ɺݸਓత ʹͪΐͬͱͨ͠LPͱ͔Λ࡞Δʹ͸ΦʔόʔεϖοΫͳιϑτ ͔ͳʁͱࢥͬͨΓɻ  ※ࢲ͸࢖ͬͯ·ͤΜɻAtomͱ͍͏ผͷΤσΟλΛ࢖͍ͬͯ·͢ˑʢʍωɾʣvŝŒűƅ  ʢͰ΋PCͷػݏ࣍ୈͰΊͪΌͪ͘Όॏͯ͘શવಈ͔ͳ͍ͷͰBrackets΋ซ༻͠͸͡Ί·ͨ͠ʣ

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

ೖΕ͓͖͍֦ͯͨுػೳ • Custom Work  ։͍͍ͯΔϑΝΠϧ͕λϒͰදࣔ͞ΕͨΓɺαΠυόʔΛӅ͠ ͨΓͰ͖Δ • શۭ֯നɾεϖʔεɾλϒදࣔ  ۭനจࣈͳͲΛදࣔͰ͖Δ֦ுɻશ֯΋Ͱ͖ͨͷ͸͜ͷ֦ுػ ೳ͚͔ͩ΋ • Shizimily Multiencoding for Brackets  Brackets͸σϑΥϧτͰUTF-8͔͠࢖͑·ͤΜ͕ɺ͜ͷ֦ுΛ ೖΕΔͱShift_JISɺEUC-JPͳͲ͕࢖͑·͢

Slide 50

Slide 50 text

͓޷ΈͰೖΕΔͱ͍͍͔΋ͷ֦ுػೳ • Select Lines  σϞ͠·͢ɻߦ൪߸ʹϚ΢εΦʔόʔͰϋΠϥΠτͯ͘͠Εʢςʔ ϚʹΑΔ͔΋ʣͯίϐʔ΋Ͱ͖·͢ • Emmet  σϞ͠·͢ɻ׳ΕΔͱศརͩͳʔͱ͍͏ػೳͰ͢ʂ ࠓճڍ֦͛ͨுػೳ͸΄ΜͷҰ෦Ͱ͢ʂ  ʮBrackets ֦ு ͓͢͢Ίʯͱ͔ͰGoogleઌੜʹฉ͘ͱ͍ΖΜͳ هࣄ͕ग़ͯ͘ΔͷͰɺࣗ෼ͷ޷͖ͳ֦ுػೳΛೖΕͯΈΔͱ͍͍ ͱࢥ͍·͢ʂ