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
Style Guideとstylelintを使ってHTML/CSSを綺麗に書こう!
Search
大塚真言
January 31, 2020
Programming
2
870
Style Guideとstylelintを使ってHTML/CSSを綺麗に書こう!
大塚真言
January 31, 2020
Tweet
Share
More Decks by 大塚真言
See All by 大塚真言
自社プロダクトを作ってみた.pdf
shingen29
0
290
CI/CD実践入門! GitHub ActionsでCI/CD環境を作ってみよう!
shingen29
0
110
CI/CD実践入門! GitHub ActionsでCI/CD環境を作ってみよう!
shingen29
0
290
ユースケース駆動開発で自社プロダクトを作ってみた!
shingen29
1
7.5k
MDN Web Docsから学ぶ 公式ドキュメントを読むメリット
shingen29
0
890
PHP8をざっくり解説してみる
shingen29
0
320
最近のプロジェクトを振り返ってみる
shingen29
0
390
Stripe CLIを触ってみた!
shingen29
1
250
プロジェクト管理ツールとしてGitLabと向き合ってみる
shingen29
0
110
Other Decks in Programming
See All in Programming
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
0
130
Google Opalで使える37のライブラリ
mickey_kubo
3
150
CSC509 Lecture 07
javiergs
PRO
0
250
オープンソースソフトウェアへの解像度🔬
utam0k
17
3.2k
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
940
なんでRustの環境構築してないのにRust製のツールが動くの? / Why Do Rust-Based Tools Run Without a Rust Environment?
ssssota
14
46k
Blazing Fast UI Development with Compose Hot Reload (droidcon London 2025)
zsmb
0
260
CSC509 Lecture 06
javiergs
PRO
0
270
contribution to astral-sh/uv
shunsock
0
550
Cursorハンズオン実践!
eltociear
2
1.2k
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
260
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
460
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Site-Speed That Sticks
csswizardry
13
930
VelocityConf: Rendering Performance Case Studies
addyosmani
333
24k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
How Fast Is Fast Enough? [PerfNow 2025]
tammyeverts
2
95
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Why Our Code Smells
bkeepers
PRO
340
57k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Transcript
Style GuideͱstylelintΛͬͯ HTML/CSSΛ៉ྷʹॻ͜͏ʂʂ 2020/01/31 WebφΠτٶ࡚ vol.8 େ௩ਅݴ
LTͷରऀ • ΤϯδχΞͷҰาͱͯ͠HTML/CSSษڧத • όοΫΤϯυΤϯδχΞͰยखؒͰϚʔΫΞο ϓॻ͍͍ͯΔ • ٯʹΰϦΰϦͷϑϩϯτΤϯυΤϯδχΞʹ Γͳ͍͔Ͱ͢ɻɻɻ
ࣗݾհ -BSBWFM 7VFKT 'JSFCBTF αφେ͖ͳ8FCΤϯδχΞ"
ձࣾհʢ֓ཁʣ ߹ಉձࣾϊϚυϦ ۀظ ϝϯόʔ໊ 8FCܥडୗ։ൃ ϑϧϦϞʔτ
ձࣾհʢࣄʣ • Vue.jsͷಋೖࢧԉɾઃܭ࣮ϨϏϡʔ • ҩྍܥWebαʔϏεͷUI/UXվળʢLaravelʣ • ҩྍܥΞϓϦͷ৽نडୗ։ൃʢCordova+Vue.js+Firebaseʣ • JAMstackϕʔεͷ੩తαΠτߏங ʢNuxt.js+Netlify+contentfulʣ
Έͳ͞Μ HTML/CSSΛ៉ྷʹ ॻ͚͍ͯ·͔͢ʁ
ͦ͏ʂ
HTML/CSS ࠷ॳʹগ͠ษڧͯ͠Ҏ߱ ͕ͬͭΓษڧ͢Δ͜ͱ ͕গͳ͍
ࠓͷൃදͰ ͳΜͱͳ͘ͰHTML/CSSΛ ॻ͍͍ͯΔͻͱ͕ ࣗ৴Λ࣋ͬͯॻ͚Δ
None
None
͋ͳͨ Ͳ͏ϨϏϡʔ͢Δʁ
Google HTML/CSS Style Guide
Google HTML/CSS Style Guide • Google͕ఏڙ͢ΔίʔσΟϯάΨΠυ • https://google.github.io/styleguide/ • Java,
Shell, JavaScript, HTML/CSSͳͲଟ • ΠϯσϯτҾ༻ූɺCSSϓϩύςΟͷฒͼ ॱͳͲͷϧʔϧ͕·ͱ·͍ͬͯΔ
HTML
Πϯσϯτۭനݸͱ͢Δ λϒͰͷΠϯσϯτېࢭͱ͢Δ Ϧετཁૉվߦ͢Δ͜ͱ ϧʔϧ
None
CSS
)5.-$44ͷશͯͷίʔυجຊతʹখจࣈΛ͏͜ͱ ՄೳͳݶΓলུܗͷϓϩύςΟΛ͏͜ͱ ͕ͷ߹୯ҐΛলུ͢Δ ΧϥʔίʔυՄೳͳݶΓจࣈͷਐදهΛ༻͢Δ ϧʔϧ
None
HTMLʹൺͯ CSSͷํ͕ϧʔϧ͕ଟ͍
ϧʔϧ͕ଟ͍ͱ νΣοΫ͢Δͷ͕େม
ͦ͜Ͱ CSSͷ੩తղੳπʔϧ StylelintΛ͓͏
Stylelint • CSSʹಛԽͨ͠ίʔυνΣοΫπʔϧ • 170΄Ͳͷϧʔϧ͕͋ΓɺϧʔϧҧͷίʔυΛ νΣοΫͯ͘͠ΕΔ • ͞ΒʹɺGoogle HTML/CSS Style
Guide ʹ४ڌ ͨ͠ϧʔϧηοτ stylelint-config-standard ͕͋ Δ
·ͱΊ • ίʔσΟϯάΨΠυΛऔΓೖΕͯɺHTML/ CSSΛهड़͢ΔϧʔϧΛ࡞Ζ͏ • ͞ΒʹɺStylelint Λಋೖͯ͠ίʔυ࣭Λ ্ͤ͞Α͏
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
None