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.4k
MDN Web Docsから学ぶ 公式ドキュメントを読むメリット
shingen29
0
890
PHP8をざっくり解説してみる
shingen29
0
320
最近のプロジェクトを振り返ってみる
shingen29
0
390
Stripe CLIを触ってみた!
shingen29
1
240
プロジェクト管理ツールとしてGitLabと向き合ってみる
shingen29
0
110
Other Decks in Programming
See All in Programming
Serena MCPのすすめ
wadakatu
4
970
dynamic!
moro
10
7.3k
CSC305 Lecture 02
javiergs
PRO
1
270
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
230
オープンソースソフトウェアへの解像度🔬
utam0k
12
2.5k
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
460
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
250
Conquering Massive Traffic Spikes in Ruby Applications with Pitchfork
riseshia
0
160
技術的負債の正体を知って向き合う / Facing Technical Debt
irof
0
150
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
3
500
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
230
どの様にAIエージェントと 協業すべきだったのか?
takefumiyoshii
2
640
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
What's in a price? How to price your products and services
michaelherold
246
12k
Being A Developer After 40
akosma
91
590k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Context Engineering - Making Every Token Count
addyosmani
5
220
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Optimizing for Happiness
mojombo
379
70k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
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