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
Vertex AI を中心に 生成AIのアップデートを共有します
kaz1437
0
300
リテール金融(キャッシュレス・ネット銀行・ネット証券)の競争環境と経済圏
8maki
0
690
ゼロから始めるVue.jsコミュニティ貢献 / first-vuejs-community-contribution-link-and-motivation
lmi
1
120
KubeConにproposalを送りたい人へのアドバイス
sat
PRO
3
240
MySQL の SQL クエリチューニングの要所を掴む勉強会
andpad
2
6.2k
JAWS-UG Bedrock Claude Night
yamahiro
3
570
開発生産性向上サービスを作るFindyが自分たちで開発生産性を爆上げした組織づくりの歩み / Findy's path to boosting its own development productivity 2024-04-17
ma3tk
3
640
元インフラエンジニアに成る / Human Resources to Human Relations
bobtani
4
900
プロデザ! BY リクルート vol.18_リクルートのリサーチ実践組織「リサーチブーストコミュニティ」
recruitengineers
PRO
3
280
Postman v10リリース後を振り返る / Looking back at Postman v10 after release
yokawasa
1
160
VS CodeでAWSを操作しよう
smt7174
7
1.6k
SPI原点回帰論:事業課題とFour Keysの結節点を見出す実践的ソフトウェアプロセス改善 / DevOpsDays Tokyo 2024
visional_engineering_and_design
4
1.9k
Featured
See All Featured
Web development in the modern age
philhawksworth
202
10k
Imperfection Machines: The Place of Print at Facebook
scottboms
260
12k
Become a Pro
speakerdeck
PRO
11
4.5k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
17
1.4k
We Have a Design System, Now What?
morganepeng
43
6.7k
Debugging Ruby Performance
tmm1
70
11k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
Embracing the Ebb and Flow
colly
80
4.1k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
78
42k
What the flash - Photography Introduction
edds
64
11k
Why You Should Never Use an ORM
jnunemaker
PRO
51
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
࣭λΠϜ