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

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

੪౻༞໵ @cssradar Cyber Agent

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

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

- LESS / JavaScript (node.js) → CSSʹݶΓͳ͍ۙ͘͠จ๏Ͱॻ͔Ε͍ͯΔ - Sass / Ruby → ߴػೳɻ Compassɺ BourbonͳͲ͸ศར - Stylus / node.js → ΫϦʔϯͳจ๏ɺ Τϥʔจ͸लҳ lessͱ͸

-&44͸OPEFKTɺ ͭ·Γ+BWB4DSJQUΛ࢖ͬͯ࡞੒ ͞Ε͍ͯ·͢ɻ ϒϥ΢β͔ΒͰ΋ར༻͢Δ͜ͱ͕Ͱ͖·͕͢ɺ ࠷ۙ Ͱ͸-&44BQQɺ 8JO-&44ɺ 4JNQ-&44ɺ $PEF,JU ͳͲͷ(6*ΞϓϦέʔγϣϯΛ࢖ͬͯ$44΁ͷม ׵Λߦ͏ϫʔΫϑϩʔͷ΄͏͕Ұൠతʹͳ͖ͬͯ ͍ͯ·͢ɻ lessͱ͸

Syntax

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

γϯλοΫεϛοΫεΠϯ .class ·ͨ͸ #id { property: value; } ྫ .center-block { display: block; margin-left: auto; margin-right: auto; }

γϯλοΫεೖΕࢠϧʔϧ #header { h1 { font-size: 26px; font-weight: bold; } p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px; } } } }

γϯλοΫεԋࢉ @base: 5%; @filler: @base * 2; @other: @base + @filler; .selector { color: #888 / 4; background-color: @base-color + #111; height: 100% / 2 + @filler; }

γϯλοΫεؔ਺ 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);

γϯλοΫευΩϡϝϯτ http://lesscss.org/ http://less-ja.studiomohawk.com/ "MFYJT4FMMJFSࢯͷྃղΛ͑ͯɺ ࢲ͕೔ຊޠ༁ͨ͠υΩϡϝϯτ͕͋Γ·͢ɻ ৄࡉʹ͍ͭͯ͸ͦͪΒΛࢀর͍ͩ͘͞ɻ

Boilerplate

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

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

࠶ར༻͕Մೳͳίʔυू -&44ʹ͸ม਺ɺ ϛοΫεΠϯͷΑ͏ͳ࠶ར༻Λલ ఏͱͨ͠ػೳ͕͋ΔͷͰɺ ͜ͷػೳΛར༻ͯࣗ͠෼ ͷ#PJMFSQMBUF#PPUTUSBQΛߏங͍ͯ͘͜͠ͱͰॳ ظίετΛ͛͞Δ͜ͱ͕Ͱ͖·͢ɻ Boilerplate

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

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

http://html5boilerplate.com/ Boilerplate

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

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

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

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

Boilerplate / IIT

Boilerplate / IIT

Boilerplate / IIT

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

Framework/Collection

#PPUTUSBQ 5XJUUFS Framework/Collection

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

1SFCPPUMFTT Framework/Collection

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

-&44&MFNFOUT Framework/Collection

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

BOEVQ Framework/Collection

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

5IF4FNBOUJD(SJE4ZTUFN Framework/Collection

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

'3".&-&44 Framework/Collection

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

(SJEQBL Framework/Collection

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

-&44$44.JYJOT Framework/Collection

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

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

Prototyping

Prototying “Design isn’t just how it looks, Design is how it works” Steve Jobs

Prototying Water Fall Ajile Lean UX "KJMF࣌୅ͷܰྔ69

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

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

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

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

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

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

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

Finally..

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

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