Tweet
Tweet

Slide 1

Slide 1 text

Style GuideͱstylelintΛ࢖ͬͯ HTML/CSSΛ៉ྷʹॻ͜͏ʂʂ 2020/01/31 WebφΠτٶ࡚ vol.8 େ௩ਅݴ

Slide 2

Slide 2 text

LTͷର৅ऀ • ΤϯδχΞͷҰา໨ͱͯ͠HTML/CSSษڧத • όοΫΤϯυΤϯδχΞͰยखؒͰϚʔΫΞο ϓॻ͍͍ͯΔ • ٯʹΰϦΰϦͷϑϩϯτΤϯυΤϯδχΞʹ ͸෺଍Γͳ͍͔΋Ͱ͢ɻɻɻ

Slide 3

Slide 3 text

ࣗݾ঺հ -BSBWFM 7VFKT 'JSFCBTF α΢φେ޷͖ͳ8FCΤϯδχΞ"

Slide 4

Slide 4 text

ձࣾ঺հʢ֓ཁʣ ߹ಉձࣾϊϚυϦ ૑ۀظ໨ ϝϯόʔ໊ 8FCܥडୗ։ൃ ϑϧϦϞʔτ

Slide 5

Slide 5 text

ձࣾ঺հʢ࢓ࣄʣ • Vue.jsͷಋೖࢧԉɾઃܭ࣮૷ϨϏϡʔ • ҩྍܥWebαʔϏεͷUI/UXվળʢLaravelʣ • ҩྍܥΞϓϦͷ৽نडୗ։ൃʢCordova+Vue.js+Firebaseʣ • JAMstackϕʔεͷ੩తαΠτߏங ʢNuxt.js+Netlify+contentfulʣ

Slide 6

Slide 6 text

Έͳ͞Μ HTML/CSSΛ៉ྷʹ ॻ͚͍ͯ·͔͢ʁ

Slide 7

Slide 7 text

ͦ͏ʂ

Slide 8

Slide 8 text

HTML/CSS͸ ࠷ॳʹগ͠ษڧͯ͠Ҏ߱ ͕ͬͭΓษڧ͢Δ͜ͱ ͕গͳ͍

Slide 9

Slide 9 text

ࠓ೔ͷൃදͰ ͳΜͱͳ͘ͰHTML/CSSΛ ॻ͍͍ͯΔͻͱ͕ ࣗ৴Λ࣋ͬͯॻ͚Δ

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

͋ͳͨ Ͳ͏ϨϏϡʔ͢Δʁ

Slide 13

Slide 13 text

Google HTML/CSS Style Guide

Slide 14

Slide 14 text

Google HTML/CSS Style Guide • Google͕ఏڙ͢ΔίʔσΟϯάΨΠυ • https://google.github.io/styleguide/ • Java, Shell, JavaScript, HTML/CSSͳͲଟ਺ • Πϯσϯτ΍Ҿ༻ූɺCSSϓϩύςΟͷฒͼ ॱͳͲͷϧʔϧ͕·ͱ·͍ͬͯΔ

Slide 15

Slide 15 text

HTML

Slide 16

Slide 16 text

Πϯσϯτ͸ۭനݸͱ͢Δ λϒͰͷΠϯσϯτ͸ېࢭͱ͢Δ Ϧετཁૉ͸վߦ͢Δ͜ͱ ϧʔϧ

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

CSS

Slide 19

Slide 19 text

)5.-$44ͷશͯͷίʔυ͸جຊతʹখจࣈΛ࢖͏͜ͱ ՄೳͳݶΓলུܗͷϓϩύςΟΛ࢖͏͜ͱ ஋͕ͷ৔߹͸୯ҐΛলུ͢Δ Χϥʔίʔυ͸ՄೳͳݶΓจࣈͷਐදهΛ࢖༻͢Δ ϧʔϧ

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

HTMLʹൺ΂ͯ CSSͷํ͕ϧʔϧ͕ଟ͍

Slide 22

Slide 22 text

ϧʔϧ͕ଟ͍ͱ νΣοΫ͢Δͷ͕େม

Slide 23

Slide 23 text

ͦ͜Ͱ CSSͷ੩తղੳπʔϧ StylelintΛ࢖͓͏

Slide 24

Slide 24 text

Stylelint • CSSʹಛԽͨ͠ίʔυνΣοΫπʔϧ • 170΄Ͳͷϧʔϧ͕͋Γɺϧʔϧҧ൓ͷίʔυΛ νΣοΫͯ͘͠ΕΔ • ͞ΒʹɺGoogle HTML/CSS Style Guide ʹ४ڌ ͨ͠ϧʔϧηοτ stylelint-config-standard ͕͋ Δ

Slide 25

Slide 25 text

·ͱΊ • ίʔσΟϯάΨΠυΛऔΓೖΕͯɺHTML/ CSSΛهड़͢ΔϧʔϧΛ࡞Ζ͏ • ͞ΒʹɺStylelint Λಋೖͯ͠ίʔυ඼࣭Λ޲ ্ͤ͞Α͏

Slide 26

Slide 26 text

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ

Slide 27

Slide 27 text

No content