Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
こんなCSSからはそろそろ卒業しよう
Search
Chiaki Okamoto
October 14, 2017
Technology
18
16k
こんなCSSからはそろそろ卒業しよう
社内向け勉強会で作ったスライド
※Bracketsの拡張機能「Shizimily Multiencoding for Brackets」は最新Bracketsにはいらないようです!
Chiaki Okamoto
October 14, 2017
Tweet
Share
More Decks by Chiaki Okamoto
See All by Chiaki Okamoto
私の推しはブロックエディター 〜デフォルトブロックに触れ合う〜
chiilog
0
190
この一年で身についた“マトモ”な WordPressテーマの作り方
chiilog
7
1.9k
WordPressテーマの作り方 2019 私のベストプラクティス
chiilog
24
13k
Google Optimizeで始めるA/Bテスト #wbkyoto
chiilog
1
3.1k
まだCSSで消耗したい?Sassを覚えて楽しちゃおう!
chiilog
4
2k
さいきょうのWordPressサイト構築フローとは
chiilog
2
980
エンジニアから見た、すごくやりやすかった構築フローの話
chiilog
0
1.7k
Other Decks in Technology
See All in Technology
JAWS-UG Bedrock Claude Night
yamahiro
3
560
アクセシビリティを考慮したUI/CSSフレームワーク・ライブラリ選定
yajihum
2
1k
ServiceNow Knowledge 24の歩き方 EYストラテジー・アンド・コンサルティング
manarobot
0
190
自己改善からチームを動かす! 「セルフエンジニアリングマネージャー」のすゝめ
shoota
6
320
MapLibreとAmazon Location Service
dayjournal
1
150
VSCodeの拡張機能を作っている話
ebarakazuhiro
1
300
Hands-on Gemini, the Google DeepMind LLM
meteatamel
1
110
Google Cloud の AI を支える裏側のインフラを垣間見る!
maroon1st
0
340
本当のAWS基礎
toru_kubota
0
500
Delivering Millions of Messages within seconds @ Duolingo
pelelgrino
0
350
オーナーシップを持つ領域を明確にする
konifar
13
3.1k
Azure Container Apps + Bicep 〜 こんな感じで運用しています
kaz29
2
450
Featured
See All Featured
Building Applications with DynamoDB
mza
88
5.6k
[RailsConf 2023] Rails as a piece of cake
palkan
23
3.9k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Docker and Python
trallard
34
2.7k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
40
4.4k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
2
3.4k
Bash Introduction
62gerente
604
210k
Product Roadmaps are Hard
iamctodd
44
9.7k
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
Imperfection Machines: The Place of Print at Facebook
scottboms
260
12k
Adopting Sorbet at Scale
ufuk
68
8.6k
Transcript
͜ΜͳCSS͔Β ͦΖͦΖଔۀ͠Α͏ 2017.10.14 Obara Chiaki
·ͣ࠷ॳʹ…
HTMLΛਖ਼͘͠ॻ͜͏ʂ CSSͷϨϕϧΞοϓʹHTMLͷࣝ͋ΔͱΑΓΑ͍ Ͱ͢ɻ ྫ͑ɺsectionarticleʹඞͣݟग़͕͠ඞཁͩͱ͔ɺ ulolͷԼʹliؚ͔͠ΜͰ͍͚ͳ͍…ͳͲɺHTML ʹͪΐͬͱͨ͠ϧʔϧ͕͋Γ·͢ɻ CSSΛϨϕϧΞοϓͤ͞ΔͨΊʹɺHTMLͷจॻߏΛ ҙࣝͯ͠ίʔσΟϯάͯ͠Έ·͠ΐ͏ʂ
ͦΕͰຊͰ͢ʂ
ϨΨγʔϒϥβ༻ͷهड़ফͦ͏ ϨΨγʔϒϥβʹʢಛʹIEΛࢦ͠·͕͢ʣࠓ͋·ΓΘΕͯ ͍ͳ͍ݹ͍ϒϥβͷ͜ͱͰ͢ɻ width /***/: auto;ͱ͔* html .clearfix { zoom:
1; }ͱ͍ͬͨهड़ ɺओʹIE6ͱ͔IE7ͷͱͬͬͬͬͬͯݹ͍ϒϥβ༻ͷهड़ͳ ͷͰɺࠓ͏ॻ͔ͳͯ͘େৎͰ͢ʂ
ཁૉηϨΫλͦͬͱ͓ͯ͜͠͏ h1 { color: #fc0; } span { display: block;
} div { text-align: center; }
ཁૉηϨΫλͦͬͱ͓ͯ͜͠͏ h1 { color: #fc0; } span { display: block;
} div { text-align: center; } NOOOOOOOO!!!!
ཁૉηϨΫλͦͬͱ͓ͯ͜͠͏ ཁૉηϨΫλʹελΠϧΛࢦఆͯ͠͠·͏ͱɺͦͷϖʔδʹ͋ ΔશͯͷཁૉʹͦͷελΠϧ͕ͨͬͯ͠·͏ͷͰɺҙਤͤͣϖʔ δશମ่͕Εͯ͠·ͬͨΓ͢Δ͜ͱ͕͋Γ·͢ʂ ʢ͍͍ͬͯͷϦηοτ͚ͩʂʣ ͱʹ͔͘ཁૉʹελΠϧͯͳ͍ࣄΛపఈ͠·͠ΐ͏ɻ Ͳ͏ͯ͠Δͱ͖ɺ.hoge h1 {} ͳͲɺʹΫϥεΛࢦఆ͠
͍ͯ͋͛ͯͩ͘͞ɻ
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)ϒϥβʹΑͬͯ·ͪ·ͪ
CSSͷద༻ॱΛҙࣝͯ͠ΈΑ͏ .box { width: 300px; } .box { width: 400px;
} Question! (A)෯300px (B)෯400px (C)ϒϥβʹΑͬͯ·ͪ·ͪ
CSSͷద༻ॱΛҙࣝͯ͠ΈΑ͏ 1ͷਖ਼ղ(A)ɺ2ͷਖ਼ղ(B)Ͱ͢ʂ CSSɺجຊతʹޙ͔Βॻ͍ͨํ͕༏ઌͯ͠ඳը͞Ε·͢ɻ ͜ͷಛੑΛར༻ͯ͠ɺྫ͑ࣗࣾͰ͜͏ͳͬͯΔ͚ͲָఱͰ ͜͏͢Δʂͱ͍͏ͱ͖ʹɺϕʔεʹͳΔCSSΑΓޙʹCSSΛهड़ ͢Εͳ্͘ॻ͖͕Ͱ͖·͢ɻ
CSSͷద༻ॱΛҙࣝͯ͠ΈΑ͏(Ԡ༻) .wrap .box { width: 300px; } .box { width:
400px; } Question! (A)෯300px (B)෯400px (C)͜Εؒҧ͍ͳ͘ϒϥβʹΑͬͯ·ͪ·ͪ
CSSͷద༻ॱΛҙࣝͯ͠ΈΑ͏(Ԡ༻) ਖ਼ղ(A)Ͱ͢ʂޙ͔Βॻ͍ͨͷʹͳΜͰʁͬͯͳΓ·͢Ͷʂ CSSʹʮৄࡉʯͱ͍͏ͷ͕͋Γ·͢ɻ ৄ͘͠Δͱ͕࣌ؒΓͳ͍ͷͰϙΠϯτ͚͓ͩ͑͞·͠ΐ͏ • ΫϥεΑΓid͕༏ઌ͞ΕΔʢʹۃྗΫϥεͰॻ͘ͷ͕٢ʣ • .hoge .fuga ͷΑ͏ʹਂ͕ਂ͘ͳΕͳΔ΄Ͳ༏ઌ͞ΕΔ
• !important ԿΑΓ༏ઌ͞ΕΔ
CSSͷద༻ॱΛҙࣝͯ͠ΈΑ͏(Ԡ༻) ਖ਼ղ(A)Ͱ͢ʂޙ͔Βॻ͍ͨͷʹͳΜͰʁͬͯͳΓ·͢Ͷʂ CSSʹʮৄࡉʯͱ͍͏ͷ͕͋Γ·͢ɻ ৄ͘͠Δͱ͕࣌ؒΓͳ͍ͷͰϙΠϯτ͚͓ͩ͑͞·͠ΐ͏ • ΫϥεΑΓid͕༏ઌ͞ΕΔʢʹۃྗΫϥεͰॻ͘ͷ͕٢ʣ • .hoge .fuga ͷΑ͏ʹਂ͕ਂ͘ͳΕͳΔ΄Ͳ༏ઌ͞ΕΔ
• !important ԿΑΓ༏ઌ͞ΕΔ
!importantͱͯλν͕ѱ͍ !importantԿΑΓ༏ઌ͞ΕΔͷͰɺ͔ͨ͠ʹศརͰ͢Ͷɻ ͭ·Γɺ!importantΛଧͪফ͢ʹɺͦͷελΠϧΑΓޙʹߋ ʹ!importantΛ͚ͭͳ͍ͱ͍͚·ͤΜɻ ·ͨͦͷ!importantΛଧͪফ͢ʹɾɾɾɾऴΘΒͳ͍Ͱ͢Ͷɻ ͳͥελΠϧॻ͍ͯΔͷʹద༻͞Εͳ͍ΜͩʂͱCSSΛಡΈղ͘ ख͔͔ؒΓ·͢ɻ ༏ઌΛۦͯ͠ɺ!important͔ΒͦΖͦΖଔۀ͠·͠ΐ͏ɻ
id/ΫϥεͷલͷηϨΫλল͜͏ p.item-name ͳͲɺΫϥε໊id໊ͷલʹηϨΫλΛ͚ͭΔͱɺ ྫ͑divͰಉ͡ΫϥεΛ͍͍ͨͱ͖ʹɺ·ͨ div.item-name Λ૿͞ͳ͍ͱ͍͚ͳ͘ͳΓ·͢ɻ ·ͨɺઌఔઆ໌ͨ͠ৄࡉ͕͋ͬͯ͠·͏ͷͰɺ্ॻ͖͠ʹ͘ ͍CSSʹͳͬͯ͠·͍·͢ɻ ಛʹ͚ͭͳ͍ͱ͍͚ͳ͍ͷͰͳ͍ͷͰɺཁૉηϨΫλͲ ΜͲΜল͍͍͖ͯ·͠ΐ͏ɻ
styleଐੑʹؾΛ͚ͭΑ͏ !importantͷ࣍ʹৄࡉ͕ߴ͍ॻ͖ํʹͳΓ·͢ɻ ͭ·ΓɺstyleଐੑͰॻ͔ΕͨCSSΛଧͪফ͢ʹɺѱखͰ͋ Δ!importantΛΘ͟ΔΛಘͳ͘ͳΓ·͢ɻ ςετతʹʙͱ͔ɺ͜͜Ͱ͚͔ͩ͜͜͠ຊοοʹΘͳ͍ʂ ͱ͍͏ͱ͖Λআ͍ͯΘͳ͍ͷ͕ແͰ͢ɻ ʢ໘ͰͪΌΜͱΫϥε໊Λ͚͓͍ͭͯͨํ͕͍͍Ͱ͢ʣ
jQueryͰstyleଐੑ͕ͭ͘ jQueryͷ$(select).hide()$(select).show()ͳͲɺҰ෦ͷಈ͖Ͱ styleଐੑ͕͋ͯΒΕ·͢ɻ ී௨JSͰදࣔඇදࣔΛ৮Δ͚ͩͳΒͦ͜·Ͱҙࣝ͠ͳͯ͘େ ৎͰ͕͢ɺྫ͑εϚϗͷͱ͖ΞίʔσΟΦϯͯ͠ɺPCͰ දࣔͨ͠··ʹ͢Δʂ…ͳΜ͔ͷͱ͖ɺεϚϗͰΞίʔ σΟΦϯด͡ΔˠPCαΠζʹ͢Δͱɺdisplay:none͕ͬͨ· ·ʹͳΔʂͱ͍͏͜ͱ͕͋ͬͨΓ͠·͢ɻ దٓɺඞཁͰ͋ΕremoveAttrͰstyleଐੑΛআ͠·͠ΐ͏ɻ
CSSͷελΠϧܧঝΛΖ͏ ཁૉͰࢦఆͨ͠CSSɺࢠཁૉʹద༻͞ΕΔͷ͕͋Γ·͢ɻ ओʹɺϑΥϯταΠζΧϥʔɺ͋ͱtext-alignͳͲͷςΩετ Λ০͢ΔελΠϧͰ͢ɻ ͭ·ΓɺཁૉʹCSSΛॻ͍ͯ͠·͑ɺࢠཁૉʹಉ͡CSSΛॻ ͘ඞཁ͋Γ·ͤΜʂ
͜Μͳ෩ʹॻ͍ͯద༻͞ΕΔ͚Ͳ… <ul class=“list”> <li>Ϧετ</li> <li>Ϧετ</li> </ul> <p class=“text”>ςΩετ</p> .list li
{ color: #fff; } .text { color: #fff; }
͜͏ॻ͍ͨΒίϯύΫτʂ <div class=“wrap”> <ul class=“list”> <li>Ϧετ</li> <li>Ϧετ</li> </ul> <p class=“text”>ςΩετ</p>
</div> .wrap { color: #fff; }
ϕϯμʔϓϨϑΟοΫε -webkit-border-radiusͱ͔ɺ-ms-border-radiusͱ͍͏ॻ͖ํ ݟͨ͜ͱ͕͋Γ·ͤΜ͔ʁ ͜ͷɺ-webkit-ɺ-ms-ͳͲͷ෦͕ʮϕϯμʔϓϨϑΟοΫεʯ Ͱ͢ɻ ओʹ͜ΕΒ·༷͕͔ͩͬ͠Γܾ·͍ͬͯͳ͍Ͱɺϒϥ βʹઌߦ࣮͞ΕͨCSSʹ͚ͭΒΕ·͢ɻ ͭ·Γɺਖ਼࣮ࣜ͞ΕͨΒ͍Βͳ͘ͳΓ·͢ɻ
None
caniuse.com ϕϯμʔϓϨϑΟοΫε͕ඞཁ͔Ͳ͏͔Λڭ͑ͯ͘ΕΔαΠτͰ ͢ɻ ௐ͍ͨCSSͷελΠϧΛೖྗ͢ΔͱɺݱࡏରԠ͍ͯ͠Δ͔Ͳ͏ ͔͕ͻͱͰΘ͔Γ·͢ɻ ෆཁͳϕϯμʔϓϨϑΟοΫε͕ͭΜͱΓ·͠ΐ͏ɻ
ϕϯμʔϓϨϑΟοΫεͷॱ൪ (A) .hoge { -webkit-box-sizing: border-box; box-sizing: border-box; } (B)
.hoge { box-sizing: border-box; -webkit-box-sizing: border-box; } Question! ॻ͖ํͲ͕ͬͪਖ਼͍͠Ͱ͠ΐ͏ʁ
ϕϯμʔϓϨϑΟοΫεͷॱ൪ ਖ਼ղ(A)Ͱ͢ʂ ઌʹʹग़ͨ͠ద༻ॱͷ֓೦ͱಉ͡Ͱ͢Ͷɻ ਖ਼ࣜͳॻ͖ํΛ࠷ޙʹ͓͚ͯ͠ɺ·࣮ͩ͞Ε͍ͯͳ͍͏ͪ ϕϯμʔϓϨϑΟοΫεͷهड़͕ɺ࣮͞ΕͨΒCSS3ͷਖ਼ࣜ ͳॻ͖ํ͕దԠ͞Ε·͢ɻ େମϕϯμʔϓϨϑΟοΫεͷ༗ແͳ͚ͩͳͷͰͦΜͳʹ ͳ͍Ͱ͕͢ɺͨ·ʹશવॻ͖ํͷҧ͏CSS3͕͋ΔͷͰҙ͠· ͠ΐ͏ɻ
ͦͷCSS ͜͏ॻ͍ͨํ͕͍͍͔ʁ
line-height .text { font-size: 10px; line-height: 12px; } @media (min-width:
768px) { .text { font-size: 16px; line-height: 18px; } }
line-heightʹ͍ͭͯ line-heightʹ͜Μͳॻ͖ํ͕͋Γ·͢ • ୯Ґ͖ͭʢྫɿline-height: 10pxʣ • ˋ͖ͭʢྫɿline-height: 150%ʣ • ͷΈʢྫɿline-height:
1.6ʣ
line-heightɿ୯Ґ͖ͭͷಛ ୯Ґ͖ͭʢઆ໌͘͢͢͠ΔͨΊpxͰ౷Ұ͠·͕͢ɺemͱ͔Ͱ ಉ༷Ͱ͢ʣͷ߹ɺline-heightͷ͔ΒϑΥϯταΠζΛҾ͖ ࢉͯ͠ɺ2Ͱ্ׂ͕ͬͨԼʹߦؒͱͯ͠͞Ε·͢ɻ (ྫ) font-size: 10px / line-height: 16px
(16-10)/2 = 3 // ্Լ3pxͷߦؒ
line-heightɿˋ͖ͭͷಛ ·ͣɺline-heightͷͱϑΥϯταΠζΛֻ͚ࢉ͠·͢ɻͦͷֻ ͚ࢉ͔ͨ͠ΒϑΥϯταΠζΛҾ͍ͯɺ2ͰׂΓ·͢ɻ (ྫ) font-size: 10px / line-height: 120% ((10*120)-10)/2
= 1 // ্Լ1pxͷߦؒ
line-heightɿ୯Ґͳ͠ͷಛ ϑΥϯταΠζʹline-heightͷΛֻ͚ࢉͯ͠ɺͦͷ͔Β ϑΥϯταΠζΛҾ͍ͯ2Ͱ্ׂ͕ͬͨԼʹߦؒͱͯ͠͞ Ε·͢ɻ (ྫ) font-size: 10px / line-height: 2
((10*2)-10)/2 = 5 // ্Լ5pxͷߦؒ
ͭ·Γ…%ͱ୯Ґͳָ͕͠ʂ Ϩεϙϯγϒͷͱ͖ʹPCͱεϚϗͰͦΕͧΕϑΥϯταΠζͱ line-heightΛࢦఆ͍ͯ͠ΔέʔεΛΑ͘ݟ·͕͢ɺline-height Λˋ୯Ґͳ͠Ͱࢦఆ͓͚ͯ͠ɺ΄΅ಉ͡ߦؒΛอͯΔͷͰ νϣοτָ͕Ͱ͖·͢ʂ ͪͳΈʹࢲ͍ͭ୯Ґͳ͠Ͱॻ͍͍ͯ·͢ɻ
ͭ·Γɺ͜Μͳײ͡ʹʂ .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ͷߦؒ
ॏෳ͢Δهड़Λ·ͱΊΑ͏ .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; }
ॏෳ͢Δهड़Λ·ͱΊΑ͏ CSSΧϯϚ۠ΓͰ·ͱΊΔ͜ͱ͕Ͱ͖·͢ɻελΠϧ͝ͱ૿ ͍ͯ͘͠ͱԆʑCSSϑΝΠϧ͕͘ͳͬͯʮͲ͜ʹͨͬ͠ ͚ʁʯͱͳΓ͕ͪͳͷͰɺΧϯϚ۠ΓͰ·ͱΊͯΈ·͠ΐ͏ɻ
ॏෳ͢Δهड़Λ·ͱΊΑ͏ .text-a, .text-b, .text-c { text-align: left; color: #000; }
.text-a { font-size: 20px; } .text-b { font-size: 50px; }
Ϋϥεෳ͚ͭΒΕ·͢ <div class=“class1 class2 class3”></div> ͜ͷΑ͏ʹɺ֯εϖʔεΛೖΕΕɺҰͭͷཁૉʹͨ͘͞Μͷ ΫϥεΛ͚ͭΔ͜ͱ͕Ͱ͖·͢ɻ ※ͨͩ͠ɺidҰ͔͚ͭͭ͠Δ͜ͱ͕Ͱ͖·ͤΜʂ
ઌఔͷॏෳΫϥεڞ௨Խ .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>
z-indexͷʹҙ ॏͶॱΛมߋͰ͖ͯศརͳz-indexͰ͕͢ɺ͋·Γେ͖͍Λ ͏ͱɺҙਤ͠ͳ͍ͱ͜ΖͰॱ൪௨ΓʹͳΒͳ͔ͬͨΓ͠·͢ɻ
margin৺ͷڑ <div class=“a”></div> <div class=“b”></div> // CSS .a { margin:
40px 0; } .b { margin-top: 20px; } Question .bͷ্ʹͭ͘marginԿpxʁ
margin৺ͷڑ ਖ਼ղ40pxʂ 60px͡Όͳ͍ͷʁͱࢥ͍·͢ΑͶɻ marginجຊతʹେ͖͍ํͰऔΒΕ·͢ɻ͜Ε͕marginͷ૬ࡴ ͱݺΕ͍ͯΔͷͰ͢ɻ ʮ৺ͷڑʯҾ༻ɿhttp://kojika17.com/2012/08/margin-of-css.html
Ͳ͏ͬͯษڧͨ͠Βʁ
ॻ͔͘͠ͳ͍…ʂʂ HTMLͱ͔CSSͬͯσβΠϯΑΓͬͱ;Θͬͱ͍ͯͯ͠ɺͲ͏ ॻ͍ͯݟΕΔ͔Β͍͍ͬͯͳΓ͕ͪͰ͢ɻʢ͋ͱࢦఠ͞Εͨ Β͙͵…ͬͯͳΓ·͢ΑͶʣ ͜Ε͔ͬΓॻ͍ͯܦݧΛஷΊΔ͔͋͠Γ·ͤΜ… ࢲɺલʹ͕ࣗॻ͍ͨίʔυͱݟൺͯʮ͜ͷͱ͖ΑΓϚγ ʹॻ͚ΔΑ͏ʹͳͬͨͳʯΛੵΈॏͶ͖ͯ·ͨ͠ʂ
͓·͚
Brackets
ܰɹ͍ɹʂ • DreamweaverͦΕͦΕૉΒ͍͠ιϑτͰ͕͢ɺ͍͔ ΜͤΜϑϧεϖοΫ͗ͯ͢ॏ͍ͷ͕೦ɻ • DreamweaverૉΒ͍͠ιϑτʢ2ճʣͰ͕͢ɺݸਓత ʹͪΐͬͱͨ͠LPͱ͔Λ࡞ΔʹΦʔόʔεϖοΫͳιϑτ ͔ͳʁͱࢥͬͨΓɻ ※ࢲͬͯ·ͤΜɻAtomͱ͍͏ผͷΤσΟλΛ͍ͬͯ·͢ˑʢʍωɾʣvŝŒűƅ ʢͰPCͷػݏ࣍ୈͰΊͪΌͪ͘Όॏͯ͘શવಈ͔ͳ͍ͷͰBracketsซ༻͠͡Ί·ͨ͠ʣ
ͪΐͬͱϖʔδ৮Δ͚ͩͳΒ Bracketsͷ΄͏͕ετϨεগͳ͍͔ʁ • ࣗͷΈʹ߹ΘͤͯΧελϚΠζͰ͖Δͷ͕Α͍ • σϑΥϧτͰຊޠԽࡁΈɺDreamweaverʹ͋ΔϥΠϒϓϨ Ϗϡʔ࣮ࡁΈɺͱ͍͏͔…ͦͦDreamweaverͷίʔ υϏϡʔ෦Brackets͕Έࠐ·Ε͍ͯΔͷͰɺ༻ײʹ ۃͳେࠩͳͦ͞͏ ※Dreamweaver͍ͬͯ͜͜ͳ͍ͷͰϋοΩϦͱ͍͑ͳ͍Ͱ͕͢…
ೖΕ͓͖͍֦ͯͨுػೳ • Custom Work ։͍͍ͯΔϑΝΠϧ͕λϒͰදࣔ͞ΕͨΓɺαΠυόʔΛӅ͠ ͨΓͰ͖Δ • શۭ֯നɾεϖʔεɾλϒදࣔ ۭനจࣈͳͲΛදࣔͰ͖Δ֦ுɻશ֯Ͱ͖ͨͷ͜ͷ֦ுػ ೳ͚͔ͩ
• Shizimily Multiencoding for Brackets BracketsσϑΥϧτͰUTF-8͔͑͠·ͤΜ͕ɺ͜ͷ֦ுΛ ೖΕΔͱShift_JISɺEUC-JPͳͲ͕͑·͢
͓ΈͰೖΕΔͱ͍͍͔ͷ֦ுػೳ • Select Lines σϞ͠·͢ɻߦ൪߸ʹϚεΦʔόʔͰϋΠϥΠτͯ͘͠Εʢςʔ ϚʹΑΔ͔ʣͯίϐʔͰ͖·͢ • Emmet σϞ͠·͢ɻ׳ΕΔͱศརͩͳʔͱ͍͏ػೳͰ͢ʂ ࠓճڍ֦͛ͨுػೳ΄ΜͷҰ෦Ͱ͢ʂ
ʮBrackets ֦ு ͓͢͢Ίʯͱ͔ͰGoogleઌੜʹฉ͘ͱ͍ΖΜͳ هࣄ͕ग़ͯ͘ΔͷͰɺࣗͷ͖ͳ֦ுػೳΛೖΕͯΈΔͱ͍͍ ͱࢥ͍·͢ʂ
ݟͨม͑ΕΔBrackets
࣭λΠϜ