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
17k
こんなCSSからはそろそろ卒業しよう
社内向け勉強会で作ったスライド
※Bracketsの拡張機能「Shizimily Multiencoding for Brackets」は最新Bracketsにはいらないようです!
Chiaki Okamoto
October 14, 2017
Tweet
Share
More Decks by Chiaki Okamoto
See All by Chiaki Okamoto
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
320
私の推しはブロックエディター 〜デフォルトブロックに触れ合う〜
chiilog
0
340
この一年で身についた“マトモ”な WordPressテーマの作り方
chiilog
7
2k
WordPressテーマの作り方 2019 私のベストプラクティス
chiilog
24
14k
Google Optimizeで始めるA/Bテスト #wbkyoto
chiilog
1
3.4k
まだCSSで消耗したい?Sassを覚えて楽しちゃおう!
chiilog
4
2.1k
さいきょうのWordPressサイト構築フローとは
chiilog
2
1k
エンジニアから見た、すごくやりやすかった構築フローの話
chiilog
0
2.1k
Other Decks in Technology
See All in Technology
Effective Match Types - Scala Days 2025
bishabosha
1
110
Gaze-LLE: Gaze Target Estimation via Large-Scale Learned Encoders
kzykmyzw
0
320
ZOZOTOWNフロントエンドにおけるディレクトリの分割戦略
zozotech
PRO
18
5.5k
JOAI発表資料 @ 関東kaggler会
joai_committee
1
350
実践アプリケーション設計 ②トランザクションスクリプトへの対応
recruitengineers
PRO
3
300
Yahoo!広告ビジネス基盤におけるバックエンド開発
lycorptech_jp
PRO
1
280
ドキュメントはAIの味方!スタートアップのアジャイルを加速するADR
kawauso
3
390
現場が抱える様々な問題は “組織設計上” の問題によって生じていることがある / Team-oriented Organization Design 20250827
mtx2s
5
1.3k
Yahoo!ニュースにおけるソフトウェア開発
lycorptech_jp
PRO
0
370
AIエージェントの開発に必須な「コンテキスト・エンジニアリング」とは何か──プロンプト・エンジニアリングとの違いを手がかりに考える
masayamoriofficial
0
410
AIエージェント就活入門 - MCPが履歴書になる未来
eltociear
0
530
実践アプリケーション設計 ③ドメイン駆動設計
recruitengineers
PRO
3
250
Featured
See All Featured
How to Ace a Technical Interview
jacobian
279
23k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
The Pragmatic Product Professional
lauravandoore
36
6.8k
Automating Front-end Workflow
addyosmani
1370
200k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
Done Done
chrislema
185
16k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Become a Pro
speakerdeck
PRO
29
5.5k
Faster Mobile Websites
deanohume
309
31k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
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
࣭λΠϜ