Upgrade to Pro — share decks privately, control downloads, hide ads and more …

フロントエンドデザイン・開発におけるマークアップ設計の基礎 / frontend markup...

Kou
May 20, 2018

フロントエンドデザイン・開発におけるマークアップ設計の基礎 / frontend markup design basics

Kou

May 20, 2018
Tweet

More Decks by Kou

Other Decks in Programming

Transcript

  1. WebσβΠϯ࡞੒࣌ʹ·ͣඞཁͳཁૉͱ͸ • ϒϨΠΫϙΠϯτ • ίϯςϯπྖҬ෯ • ༨ന(margin, padding, line-height, letter-spacing)ͷϧʔϧ

    ͜ͷ̏఺Λ༧ΊܾΊ͓ͯ͘ͱɺεϜʔζʹσβΠϯ࡞ ੒͕ਐΊΒΕɺϚʔΫΞοϓ࣌ʹ΋ࠞཚ͢Δ͜ͱ͕গ ͳ͘ͳΓ·͢
  2. ίϯςϯπྖҬ෯ͷܾΊํ ݹ͔͘Β࢖ΘΕΔͷ͸ 960 άϦουγεςϜʹج͍ͮͨ 960px Ͱ͢ɻ ͨͩ͠ɺ͜ͷ਺஋͸ 1024px ͷσΟεϓϨΠ෯Λલఏͱͨ͠΋ͷͳͷͰɺ ࡢࠓͰ͸খ͍͞৔߹͕͋Γ·͢ɻ

    ͦͷͨΊɺ960px Λϕʔεʹɺද͍ࣔͨ͠ίϯςϯπ͕ऩ·Γ͖Δ৔߹ ͸ 960pxɺऩ·Γ੾Βͳ͍৔߹͸ 8 ͷഒ਺୯ҐͰྖҬ෯Λ૿΍͍ͯ͠ ͖ɺ࠷దͳ஋Λܾఆ͢Δͷ͕͓͢͢ΊͰ͢ɻ 8ͷഒ਺Ͱ͋Δཧ༝͸ɺPC΍SPͷσΟεϓϨΠ͕8ͷഒ਺αΠζͰ͋Δ ͜ͱʹج͍͍ͮͯ·͢ɻ8ͷഒ਺Ͱ࡞੒͓ͯ͘͜͠ͱͰɺը໘಺ʹ៉ྷʹ ऩ·ΔΑ͏ʹ࡞੒͠΍͘͢ͳΓ·͢ɻ
  3. BEMͷྫ (CSS) /* ୯ޠ୯ҐͰϋΠϑϯ۠੾ΓͰهड़͢ΔɻϒϩοΫͱཁૉͷؒ͸ΞϯμʔείΞ̎ͭͰهड़͢Δ */ .top-page__head { display: block; font-size:

    20px; font-weight: bold; } /* म০ࢠ(Modifier)͸ϋΠϑϯ̎ͭͷ͋ͱʹ໊শΛهड़͢Δ */ .top-page__head--red { color: red; }
  4. BEMͷ͋·Γྑ͘ͳ͍ྫ (CSS) /* ҎԼͷΑ͏ͳϒϩοΫͷதʹϒϩοΫΛೖΕࢠʹ͢ΔΑ͏ͳ໋໊͸ඇਪ঑Ͱ͢ */ .top-page__head__sub-page__sub-head { display: block; font-size:

    20px; } /* ModifierΛෳ਺෇༩͢Δͷ΋ඇਪ঑Ͱ͢ */ .top-page__head--red--hidden { display: none; color: red; }
  5. Atomic DesignͷCSSϑΝΠϧߏ੒ྫ ֤ύʔπ͝ͱʹσΟϨΫτϦΛ࡞੒͠ɺͦͷதʹίϯϙʔ ωϯτผʹϑΝΠϧΛ෼͚ͯελΠϧΛهड़͍͖ͯ͠· ͢ɻ໋໊ʹ͍ͭͯ͸BEMΛ࢖༻͠ɺύʔπͷछྨ͕Θ͔ ΔΑ͏ʹAtomsͳΒ a- ɺMoleculesͳΒ m- ͱ͍ͬͨ઀

    ಄ޠΛ෇༩͠·͢ɻ·ͨɺ͜ΕΒͷύʔπσΟϨΫτϦ ͸ɺ֤ύʔπͷґଘॱͱͳΔ 1. Atoms 2. Molecules 3. Organisms 4. Templates 5. Pages ͷॱ൪ʹͦΕͧΕͷελΠϧΛಡΈࠐΈ·͢ɻ
  6. ϚʔΫΞοϓ؀ڥߏஙྫ HTML • Pug CSS • PostCSS (SugarSS) JavaScript •

    Babel (ES2015Ҏ߱) Bundler • FuseBox λεΫϥϯφʔ • ࢖Θͳ͍ (npm-scriptsͷΈ)
  7. npm-scriptsʹ͍ͭͯ npm-scripts ͸ package.json ͷ scripts ͱ͍͏߲໨ʹهड़ͨ͠ίϚϯυΛ࣮ߦ͢ ΔػೳͰ͢ɻ௨ৗͷίϚϯυ࣮ߦͱͷҧ͍͸PATHʹnode_modules/.bin σΟϨ ΫτϦ͕ࣗಈతʹ௥Ճ͞Εͨঢ়ଶͰίϚϯυΛ࣮ߦͰ͖Δͱ͜Ζʹ͋Γ·͢ɻ

    { "name": "my-package", "scripts": { "build": "babel src -d lib", "test": "jest" } } ҎԼͷίϚϯυͰ࣮ߦՄೳ ʲyarnͷ৔߹ʳ yarn build ʲnpmͷ৔߹ʳ npm run build