LESS For Web Designer

LESS For Web Designer

2012/03/13 HTML5とか勉強会 #27にてお話しさせていただいたウェブデザイナのためのLESSのスライド。

32f242f75b63e7174b493446de54a6b8?s=128

Yuya Saito

March 13, 2012
Tweet

Transcript

  1. HTML5 ͱ͔ษڧձ #27 2012/03/13 less for Web Designer ੪౻༞໵@CSS Radar

  2. ੪౻༞໵ http://css.studiomohawk.com http://newsletter.studiomohawk.com CSS Radar CSS Radar Newsletter

  3. ੪౻༞໵ @cssradar Cyber Agent

  4. -&44ͱ͸ γϯλοΫε -&44Ͱͭ͘Δࣗ෼ͷ#PJMFSQMBUF -&44Λ࢖ͬͨϑϨʔϜϫʔΫɺ ίϨΫγϣϯ -&44Λ࢖ͬͨϓϩτλΠϓ࡞੒ϫʔΫϑϩʔ Agenda

  5. LESSͰ͸ม਺ɺ ϛοΫεΠϯɺ ೖΕࢠϧʔϧɺ ࢛ଇ ԋࢉͱؔ਺ͳͲΛCSSʹ௥Ճ͢Δ͜ͱ͕Ͱ͖· ͢ɻ ϓϩύςΟ΍ηϨΫλͷ֦ு͸͋ͬͯ΋ݴޠͦͷ ΋ͷʹେ͖͘มԽ͕ͳ͍CSSʹμΠφϛοΫͳε λΠϧγʔτΛ࡞੒Ͱ͖ΔػೳΛ௥Ճ͢Δͷ͕ LESSͰ͢ɻ

    lessͱ͸
  6. - LESS / JavaScript (node.js) → CSSʹݶΓͳ͍ۙ͘͠จ๏Ͱॻ͔Ε͍ͯΔ - Sass /

    Ruby → ߴػೳɻ Compassɺ BourbonͳͲ͸ศར - Stylus / node.js → ΫϦʔϯͳจ๏ɺ Τϥʔจ͸लҳ lessͱ͸
  7. -&44͸OPEFKTɺ ͭ·Γ+BWB4DSJQUΛ࢖ͬͯ࡞੒ ͞Ε͍ͯ·͢ɻ ϒϥ΢β͔ΒͰ΋ར༻͢Δ͜ͱ͕Ͱ͖·͕͢ɺ ࠷ۙ Ͱ͸-&44BQQɺ 8JO-&44ɺ 4JNQ-&44ɺ $PEF,JU ͳͲͷ(6*ΞϓϦέʔγϣϯΛ࢖ͬͯ$44΁ͷม

    ׵Λߦ͏ϫʔΫϑϩʔͷ΄͏͕Ұൠతʹͳ͖ͬͯ ͍ͯ·͢ɻ lessͱ͸
  8. Syntax

  9. γϯλοΫεม਺ @ม਺໊: ஋; @color: #4D926F; @font-size: 16px; @strings: “/path/to/image/”; @ver:

    @foo;
  10. γϯλοΫεϛοΫεΠϯ .class ·ͨ͸ #id { property: value; } ྫ .center-block

    { display: block; margin-left: auto; margin-right: auto; }
  11. γϯλοΫεೖΕࢠϧʔϧ #header { h1 { font-size: 26px; font-weight: bold; }

    p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px; } } } }
  12. γϯλοΫεԋࢉ @base: 5%; @filler: @base * 2; @other: @base +

    @filler; .selector { color: #888 / 4; background-color: @base-color + #111; height: 100% / 2 + @filler; }
  13. γϯλοΫεؔ਺ lighten(@color, 10%); darken(@color, 10%); saturate(@color, 10%); desaturate(@color, 10%); fadein(@color,

    10%); fadeout(@color, 10%); fade(@color, 50%); spin(@color, 10); spin(@color, -10); mix(@color1, @color2);
  14. γϯλοΫευΩϡϝϯτ http://lesscss.org/ http://less-ja.studiomohawk.com/ "MFYJT4FMMJFSࢯͷྃղΛ͑ͯɺ ࢲ͕೔ຊޠ༁ͨ͠υΩϡϝϯτ͕͋Γ·͢ɻ ৄࡉʹ͍ͭͯ͸ͦͪΒΛࢀর͍ͩ͘͞ɻ

  15. Boilerplate

  16. boil·er·plate [boi-ler-pleyt] noun 1. plating of iron or steel for

    making the shells of boilers,covering the hulls of ships, etc. 2. Journalism . ! a. syndicated or ready-to-print copy, used especially by weekly newspapers. ! b. trite, hackneyed writing. 3. the detailed standard wording of a contract, warranty, etc. 4. Informal . phrases or units of text used repeatedly, as in correspondence produced by a word-processing system. 5. frozen, crusty, hard-packed snow, often with icy patches. Boilerplate
  17. bootstrap [ˈbuːtˌstræp] noun 1. A loop (leather or other material)

    sewn at the side or top rear of a boot to help in pulling the boot on. 2. A means of advancing oneself or accomplishing something without aid. He used his business experience as a bootstrap to win voters. (computing) The process by which the operating system of a computer is loaded into its memory 3. (computing) The process necessary to compile the tools that will be used to compile the rest of the system or program. 4. (statistics) Any method or instance of estimating properties of an estimator (such as its variance) by measuring those properties when sampling from an approximating distribution. Boilerplate
  18. ࠶ར༻͕Մೳͳίʔυू -&44ʹ͸ม਺ɺ ϛοΫεΠϯͷΑ͏ͳ࠶ར༻Λલ ఏͱͨ͠ػೳ͕͋ΔͷͰɺ ͜ͷػೳΛར༻ͯࣗ͠෼ ͷ#PJMFSQMBUF#PPUTUSBQΛߏங͍ͯ͘͜͠ͱͰॳ ظίετΛ͛͞Δ͜ͱ͕Ͱ͖·͢ɻ Boilerplate

  19. $44ϑϨʔϜϫʔΫ͸ҧ͏ʁ HT΍CMVFQSJOUͳͲʹ୅ද͞ΕΔ$44ϑϨʔ ϜϫʔΫ͸$44͚ͩͰ͸ͳ͘)5.-ʹ΋ࢦఆͷΫ ϥε໊Λར༻͢Δඞཁ͕͋Γ·ͨ͠ɻ -&44΍4BTTͷม਺΍ϛοΫεΠϯΛར༻͢Ε ͹ɺطଘͷ)5.-Λมߋ͠ͳͯ͘΋άϦουͷੜ ੒΍ɺλΠϙάϥϑΟͷઃఆɺΧϥʔεΩʔϜͷ มߋͳͲΛߦ͑·͢ɻ Boilerplate

  20. http://www.slideshare.net/collylogic/developing-your-ultimate-package Boilerplate

  21. http://html5boilerplate.com/ Boilerplate

  22. http://24ways.org/2011/front-end-style-guides Boilerplate

  23. http://24ways.org/2011/crafting-the-front-end Boilerplate

  24. http://github.com/studiomohawk/IIT Boilerplate / IIT

  25. ͦΕͧΕͷιʔείʔυΛϕʔεʹগͣͭ͠खΛՃ͑ͯɺ ࣗ෼Β͍͠#PJMFSQMBUFΛҭ͍ͯͯ·͢ɻ )5.-ɺ$44ɺ+4ͱ͍͏πʔϧ͸ࣗ෼͕࢖͍΍͍༷͢ʹ खೖΕ͢Δɻ -&44͸ͦͷ͓खೖΕͷख఻͍Λͯ͘͠ΕΔͷʹ࠷దͳ πʔϧɻ Boilerplate / IIT

  26. Boilerplate / IIT

  27. Boilerplate / IIT

  28. Boilerplate / IIT

  29. DMFBSpY/JDPMBT(BMMBHIFS ΧϥʔύϨοτBOEVQCZ"OEZ$MBSL ϔϧύπʔϧ)5.-#PJMFSQMBUF ϝσΟΞΫΤϦBOEVQCZ"OEZ$MBSL OPSNBMJ[FDTT/JDPMBT(BMMBHIFS 00$44/JDPMF4VMMJWBO λΠϙάϥϑΟʔ)BSSZ3PCFSUT ϑΥϯτϑΝϛϦʔDTTGPOUTUBDLDPN άϦουγεςϜ'SBNFMFTTCZ+POJ,PSQJ $44-&44$44.JYJOTCZ.BUUIFX8BHFSpFME

    Boilerplate / IIT
  30. Framework/Collection

  31. #PPUTUSBQ 5XJUUFS Framework/Collection

  32. #PPUTUSBQ 5XJUUFS ެ։͞Ε͍ͯΔ΋ͷͰ͸࠷େڃͷ-&44ར༻౓ ϑϨʔϜϫʔΫͱ͍͏ΑΓ͸σβΠϯύοέʔδ ͔ΒϨεϙϯγϒσβΠϯʹରԠ ৄ͘͠͸͜ͷޙͷൃදͰ Framework/Collection

  33. 1SFCPPUMFTT Framework/Collection

  34. #PPUTUSBQ 'SPN5XJUUFSͷݪܕ -&44͕ެ։͞Εͨޙ͙͢ʹެ։͞Εͨઌۦऀ ͷϛοΫεΠϯɺ ͭͷม਺ͷίϨΫγϣϯ ϕʔγοΫͳ-&44ͷιʔεΛֶͿʹ࠷ద 1SFCPPUMFTT Framework/Collection

  35. -&44&MFNFOUT Framework/Collection

  36. 1SFCPPUMFTTͱಉ࣌ظʹެ։͞Εͨ !JNQPSU͚ͩͰݺͼग़ͤΔؾܰ͞Λ঺հ ͷϛοΫεΠϯͷίϨΫγϣϯ ϕʔγοΫͳ-&44ͷιʔεΛֶͿʹ࠷ద -&44&MFNFOUT Framework/Collection

  37. BOEVQ Framework/Collection

  38. ϞόΠϧϑΝʔετΞϓϩʔνͷ)5.-#PJMFSQMBUF "OEZ$MBSLFࢯ࡞ )BSECPJMFE8FC%FTJHOͷஶऀ $MBSLFࢯߟҊͷΧϥʔύϨοτ༻ม਺͸ศར ݩʑ͸$44ϕʔεͩͬͨͷΛ-&44ʹίϯόʔτ BOEVQ Framework/Collection

  39. 5IF4FNBOUJD(SJE4ZTUFN Framework/Collection

  40. Ϩεϙϯγϒݻఆ෯྆ํ࢖͑ΔάϦουγεςϜ ط੒ͷΫϥε໊ʹཔΒͳ͍ͱ͍͏ҙຯͰηϚϯςΟΫ article { .column(12); }  Ϩεϙϯγϒ άϦουγεςϜͷߏங͕ͱͯ΋ָ 5IF4FNBOUJD(SJE4ZTUFN

    Framework/Collection
  41. '3".&-&44 Framework/Collection

  42. άϦουαΠζΛݻఆʹ͢Δ৽͍͠Ϩεϙϯγϒ άϦουͷ௥Ճ͸खಈ άϦου਺͸΢Οϯυ΢ͷαΠζʹΑͬͯมԽ͢Δ ඞཁͳ෦෼͚ͩൈ͖ग़ͯ͠࢖ͬͯ·͢ 4BTT൛΋͋Δ '3".&-&44 Framework/Collection

  43. (SJEQBL Framework/Collection

  44. ϨεϙϯγϒάϦουΛΧελϚΠζ ΨΠυ༻ͷഎܠɺ -&44ɺ +4ɺ $44ɺ 4BTTΛੜ੒ ͲΜͳϓϩδΣΫτʹͰ΋ରԠͰ͖Δ෯ͷ޿͞ ΢Σϒπʔϧ (SJEQBL Framework/Collection

  45. -&44$44.JYJOT Framework/Collection

  46. $44ʹಛԽͨ͠ϛοΫεΠϯू ΄΅શͯͷ$44ͷϓϩύςΟΛ໢ཏ ݺͼग़͠ΛߦΘͳ͚Ε͹$44ʹ͸ॻ͖ग़͞ͳ͍  ϛοΫεΠϯͷఆٛͷํ๏ͰมΘΓ·͢ DVCJDCF[JFS FBTJOH ͷม਺͸लҳ -&44$44.JYJOT Framework/Collection

  47. ঺հͨ͠΄΅͢΂ͯͷϦϙδτϦΛू໿  ݸਓతͳݟղͰ ศརͳ෦෼͚ͩΛબ୒ υΩϡϝϯτ෇͖ ະ࣮૷ ίϥϘϨʔλ͸͍ͭͰ΋ืूͯ͠·͢ **5 Framework/Collection

  48. Prototyping

  49. Prototying “Design isn’t just how it looks, Design is how

    it works” Steve Jobs
  50. Prototying Water Fall Ajile Lean UX "KJMF࣌୅ͷܰྔ69

  51. ཁٻ Ϗδωεΰʔϧ ৄࡉ࢓༷ ։ൃ σβΠϯ ίʔσΟϯά ཁٻϕʔεͷ։ൃϑϩʔ Prototying

  52. ֓ཁཁٻ Ϗδωεΰʔϧ ৄࡉ࢓༷ ։ൃ ίϯηϓτσβΠϯ ϓϩτλΠϓ ϓϩτλΠϓ͔Β࢓༷ΛৄࡉԽ͍ͯ͘͠ Prototying

  53. ίϛϡχέʔγϣϯͷ૒ํ޲ੑ ໨ʹݟ͑Δ࣮ࡍʹಈ࡞͢ΔϓϩτλΠϓ ϑΟʔυόοΫमਖ਼ ܁Γฦ͠ ৄࡉ࢓༷ʹམͱ͍ͯ͘͠ Prototying

  54. ίϯηϓτΛܗʹ /FFET8BOUTΛ఻ୡ͢ΔͨΊͷϏδϡΞϥΠζ ։ൃʹର͢Δ໰୊ղܾ΋σβΠϯͰఏҊ͠΍͘͢ͳΔ )5.-$44+4Ͱ࡞ΔϓϩτλΠϓ͸ͦͷҰॿ ͱͳΔσβΠϯπʔϧ Prototying

  55. Ͱ΋ɺ ίʔσΟϯά͸΍ͬͺΓ͕͔͔࣌ؒΔ +BWB4DSJQU͸K2VFSZΛಘͯɺ $44͸Ϟμϯϒϥ΢βͱ$44ͱ ͦͯ͠-&44Λಘ·ͨ͠ɻ ϋΠϑΟσΟϦςΟͰɺ ΠϯλϥΫςΟϒͳ ϓϩτλΠϓ͸ܾͯ͠೉͘͠ͳ͍Ͱ͢ɻ Prototying ?

    !
  56. #PPUTUSBQ 'SPN5XJUUFS IUUQUXJUUFSHJUIVCDPNCPPUTUSBQ 'PVOEBUJPOCZ;63# -&44WFS΋͋Δ IUUQGPVOEBUJPO[VSCDPN #MPDLTCZ&JHIU4IBQFT ઈࢍ੡࡞தΒ͍͠ IUUQTHJUIVCDPN&JHIU4IBQFT#MPDLT )5.-$44+4ϓϩτλΠϓϑϨʔϜϫʔΫ

    Prototying
  57. ࢲ΋**5ΛϕʔεʹϓϩτλΠϓ ϑϨʔϜϫʔΫΛ࡞੒༧ఆͰ͢ɻ Prototying

  58. Finally..

  59. Design is for solving problems. But Don’t try to solve

    wrong problems.
  60. Our use of Less is a stopgap while we wait

    for the future of CSS – which is looking really promising and already has great proposals for variables and mixins! For now however, we’re really happy with Less – but don’t think you should have to use it if it’s not your thing. Jacob Thornton A.K.A fat