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
280
私の推しはブロックエディター 〜デフォルトブロックに触れ合う〜
chiilog
0
320
この一年で身についた“マトモ”な WordPressテーマの作り方
chiilog
7
2k
WordPressテーマの作り方 2019 私のベストプラクティス
chiilog
24
13k
Google Optimizeで始めるA/Bテスト #wbkyoto
chiilog
1
3.4k
まだCSSで消耗したい?Sassを覚えて楽しちゃおう!
chiilog
4
2.1k
さいきょうのWordPressサイト構築フローとは
chiilog
2
1k
エンジニアから見た、すごくやりやすかった構築フローの話
chiilog
0
2k
Other Decks in Technology
See All in Technology
セキュアな社内Dify運用と外部連携の両立 ~AIによるAPIリスク評価~
zozotech
PRO
0
120
[SRE NEXT] ARR150億円_エンジニア140名_27チーム_17プロダクトから始めるSLO.pdf
satos
5
3k
OpenTelemetryセマンティック規約の恩恵とMackerel APMにおける活用例 / SRE NEXT 2025
mackerelio
3
2k
“日本一のM&A企業”を支える、少人数SREの効率化戦略 / SRE NEXT 2025
genda
1
270
ソフトウェアQAがハードウェアの人になったの
mineo_matsuya
3
200
全部AI、全員Cursor、ドキュメント駆動開発 〜DevinやGeminiも添えて〜
rinchsan
10
5.1k
推し書籍📚 / Books and a QA Engineer
ak1210
0
140
SREの次のキャリアの道しるべ 〜SREがマネジメントレイヤーに挑戦して、 気づいたこととTips〜
coconala_engineer
1
4.4k
LLM拡張解体新書/llm-extension-deep-dive
oracle4engineer
PRO
23
6.3k
AIでテストプロセス自動化に挑戦する
sakatakazunori
1
530
An introduction to Claude Code SDK
choplin
2
1.1k
Amplify Gen2から知るAWS CDK Toolkit Libraryの使い方/How to use the AWS CDK Toolkit Library as known from Amplify Gen2
fossamagna
1
350
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Designing for Performance
lara
610
69k
Documentation Writing (for coders)
carmenintech
72
4.9k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Code Review Best Practice
trishagee
69
19k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Six Lessons from altMBA
skipperchong
28
3.9k
Making Projects Easy
brettharned
116
6.3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
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
࣭λΠϜ