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
730
Style Guideとstylelintを使ってHTML/CSSを綺麗に書こう!
大塚真言
January 31, 2020
Tweet
Share
More Decks by 大塚真言
See All by 大塚真言
自社プロダクトを作ってみた.pdf
shingen29
0
240
CI/CD実践入門! GitHub ActionsでCI/CD環境を作ってみよう!
shingen29
0
72
CI/CD実践入門! GitHub ActionsでCI/CD環境を作ってみよう!
shingen29
0
200
ユースケース駆動開発で自社プロダクトを作ってみた!
shingen29
1
5.6k
MDN Web Docsから学ぶ 公式ドキュメントを読むメリット
shingen29
0
760
PHP8をざっくり解説してみる
shingen29
0
270
最近のプロジェクトを振り返ってみる
shingen29
0
330
Stripe CLIを触ってみた!
shingen29
1
200
プロジェクト管理ツールとしてGitLabと向き合ってみる
shingen29
0
45
Other Decks in Programming
See All in Programming
MIERUNE BBQにおけるユーザー中心設計()
mierune
PRO
1
110
Temporalを取り巻く仕様を整理する
sajikix
0
110
유연한 Composable 설계
l2hyunwoo
0
380
TiDB Serverless ~理想のServerless DBを考える~
soso_15315
1
160
継続的な活動で築く地方エンジニアの道
myamashii
2
350
Composing an API the *right* way (Droidcon Berlin 2024)
zsmb
1
450
【Go言語】golangci-lintの使い方
tomo1227
0
270
はしめてのプログラミングとロボット制御
watawatavoltage
0
290
DynamoDB コスト最適化っぽいことの基本 with Terraform
kuro_kurorrr
2
250
Folding Cheat Sheet #7
philipschwarz
PRO
0
150
APIのない大学ログインWebサービスをWKWebViewとJavaScriptでアプリ化した話
akidon0000
1
330
しくじり先生 Image Matching Challenge 2024 編
goosehaaan
0
810
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
35
6.3k
Fantastic passwords and where to find them - at NoRuKo
philnash
42
2.7k
Code Review Best Practice
trishagee
58
16k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
78
15k
Happy Clients
brianwarren
94
6.5k
What the flash - Photography Introduction
edds
65
11k
How to Ace a Technical Interview
jacobian
274
23k
Clear Off the Table
cherdarchuk
89
320k
WebSockets: Embracing the real-time Web
robhawkes
59
7.2k
How GitHub Uses GitHub to Build GitHub
holman
471
290k
How STYLIGHT went responsive
nonsquared
93
5k
Speed Design
sergeychernyshev
9
270
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