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
800
Style Guideとstylelintを使ってHTML/CSSを綺麗に書こう!
大塚真言
January 31, 2020
Tweet
Share
More Decks by 大塚真言
See All by 大塚真言
自社プロダクトを作ってみた.pdf
shingen29
0
260
CI/CD実践入門! GitHub ActionsでCI/CD環境を作ってみよう!
shingen29
0
85
CI/CD実践入門! GitHub ActionsでCI/CD環境を作ってみよう!
shingen29
0
250
ユースケース駆動開発で自社プロダクトを作ってみた!
shingen29
1
6.5k
MDN Web Docsから学ぶ 公式ドキュメントを読むメリット
shingen29
0
830
PHP8をざっくり解説してみる
shingen29
0
290
最近のプロジェクトを振り返ってみる
shingen29
0
360
Stripe CLIを触ってみた!
shingen29
1
220
プロジェクト管理ツールとしてGitLabと向き合ってみる
shingen29
0
79
Other Decks in Programming
See All in Programming
CloudNativePGがCNCF Sandboxプロジェクトになったぞ! 〜CloudNativePGの仕組みの紹介〜
nnaka2992
0
220
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
5
3.8k
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
210
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
550
[JAWS-UG横浜 #80] うわっ…今年のServerless アップデート、少なすぎ…?
maroon1st
1
170
最近のVS Codeで気になるニュース 2025/01
74th
1
250
Spring gRPC について / About Spring gRPC
mackey0225
0
220
動作確認やテストで漏れがちな観点3選
starfish719
6
1k
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
110
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
7
2.5k
Kanzawa.rbのLT大会を支える技術の裏側を変更する Ruby on Rails + Litestream 編
muryoimpl
0
220
SwiftUIで単方向アーキテクチャを導入して得られた成果
takuyaosawa
0
260
Featured
See All Featured
Building an army of robots
kneath
302
45k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
Gamification - CAS2011
davidbonilla
80
5.1k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Scaling GitHub
holman
459
140k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Code Review Best Practice
trishagee
66
17k
Thoughts on Productivity
jonyablonski
69
4.5k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
How to Ace a Technical Interview
jacobian
276
23k
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