デザインの再現性をぐっと上げる！ コーディング時におさえておきたい基本のキ

2017/5/31開催の【cloudpack デ部会】初心者歓迎！webデザイナー フォント勉強会　で発表した登壇資料になります。

Transcript

1. 
   8FE
   .BTBNJ
   ,BOFNPUP  σβΠϯͷ࠶ݱੑΛ͙ͬͱ্͛Δʂ
   ίʔσΟϯά࣌ʹ͓͓͖͍͑ͯͨ͞جຊͷΩ
   
2.  ࣗݾ঺հ 1
3.  DMPVEQBDLࣄۀ෦
   σβΠϯηΫγϣϯɹσβΠφʔ
   ೥݄ೖࣾ ฌݿݝੜ·Εɹେࡕҭͪ
   ؔ੢ͷσβΠϯࣄ຿ॴ΁άϥϑΟοΫσβΠφʔͱͯ͠ೖࣾޙɺ ͍ͭͷؒʹ͔8FCσβΠφʔʹ
   ۚຊ
   ਖ਼ඒ
4.  लӳؙΰγοΫ
   - ͓ؾʹೖΓϑΥϯτ
5.  จࣈ web ͱ
6.  σβΠϯσʔλͱΠϝʔδ͕ҧ͏ʂʂʂ
7.  ϑΥϯτͷ࣮૷ʹ͍ͭͯ 2
8.  ʮจࣈʯΛදࣔͤ͞Δͭͷํ๏ ը૾ɾ47( XFCϑΥϯτ
   γεςϜϑΥϯτ
   
9.  ʮจࣈʯΛදࣔͤ͞Δͭͷํ๏ XFCϑΥϯτ
   γεςϜϑΥϯτ
   ը૾ɾ47(
10.  04ʹΑΔγεςϜϑΥϯτͷҧ͍ .BD 8JOEPXT w ώϥΪϊ֯ΰγοΫ
    w ώϥΪϊ໌ே
    w 0TBLB
    
    w ᕟΰγοΫ
    w ᕟ໌ே w ϝΠϦΦ
    
    w .4ΰγοΫ
    
    w .4໌ே
    w ᕟΰγοΫ
    w ᕟ໌ே J04 BOESPJE w ώϥΪϊ֯ΰγοΫ
    w ώϥΪϊ໌ே
    w 4BO
    'SBODJTDP w /PUP
    4BOT
    $+,
    +1
    w ϞτϠϚϧϕϦ
    w %SPJE
    4BOT
    
11.  04ʹΑΔγεςϜϑΥϯτͷҧ͍ .BD 8JOEPXT J04 BOESPJE ͓ͳ͡ʂ w ώϥΪϊ֯ΰγοΫ
    w ώϥΪϊ໌ே
    w 0TBLB
    
    w ᕟΰγοΫ
    w ᕟ໌ே w ϝΠϦΦ
    
    w .4ΰγοΫ
    
    w .4໌ே
    w ᕟΰγοΫ
    w ᕟ໌ே w ώϥΪϊ֯ΰγοΫ
    w ώϥΪϊ໌ே
    w 4BO
    'SBODJTDP w /PUP
    4BOT
    $+,
    +1
    w ϞτϠϚϧϕϦ
    w %SPJE
    4BOT
    html { font-style: "ᕟΰγοΫ Medium", "Yu Gothic Medium”, "ᕟΰγοΫମ", YuGothic;
12.  XFCϑΥϯτ͸େ͖͘छྨ 5ZQFLJU w "EPCFఏڙ
    w $$ܦ༝Ͱ1Tͱ૬ੑ˕
    w $$ϝϯόʔͰ͋Ε͹ϙʔτ ϑΥϦΦϓϥϯ͕࢖༻Մ (PPHMF
    'POUT 5ZQF4RVBSF w ϞϦαϫఏڙ
    w ೔ຊޠϑΥϯτ͕ॆ࣮
    w ສ17݄Ͱ͋Ε͹ɺແྉͰͷ ར༻Մ w (PPHMFఏڙ
    w ӳ਺ϑΥϯτ͕ॆ࣮
    w 17ؔ܎ͳ͘ແྉʢ঎༻Մʣ
13.  ϑΥϯτͷαΠζࢦఆʹ͍ͭͯ 3
14.  ୯Ґ৭ʑ͋Γ͗͢ʂ QY ϐΫηϧ FN ΤϜ SFN ϧʔτΤϜ  ύʔηϯτ WX Ϗϡʔϙʔτ
    ΢Οζ WI Ϗϡʔϙʔτ
    ϋΠτ WNJO Ϗϡʔϙʔτ
    ϛχϚϜ WNBY Ϗϡʔϙʔτ
    ϚοΫε 
    71QYͰQYͷจࣈΛදࣔ
     14px/320px=0.04375(4.375%) => 4.375vw
15.  ྫɿฐࣾͷ৔߹ SFN ϧʔτΤϜ html { font-size: 62.5%; /* 10px */ } p.txt { font-size: 1.4rem; /* 14px */ } 'SPOUFOE
    &OHJOFFS
16.  ߦؒͷઃఆ 4
17.  ࠓ΋ੲ΋ɺ҆ఆͷMJOFIFJHIU line-height: 1.5; ʹจࣈͷߴ͞ͷഒͷߦૹΓ ʹจࣈͷߴ͞ͷ൒෼ͷߦؒ
18.  QTEͷจࣈύωϧ͸ͪΐͬͱෆ਌੾ 35/20 = 1.75 MJOFIFJHIU͸ font-size !?
19.  ஈམύωϧ
    
    δϟεςΟϑΟέʔγϣϯ
    
    ࣗಈߦૹΓ ߦૹΓͷʢࣗಈʣ͸ࣗ෼ͰઃఆͰ͖Δʂ
20.  ͲͪΒ΋MJOFIFJHIU
    ʂ
21.  ࣈؒͷπϝɾΞΩͱΧʔχϯά
    4
22.  ΞΩɾπϝ͸MFUUFSTQBDJOHΛ letter-spacing: 10px; ʹจࣈͱจࣈͷؒΛQY͚͋Δ
23.  τϥοΩϯάͷ஋ΛMFUUFSTQBDFʹ 200/1000 = 0.2em τϥοΩϯά
24.  GPOUGFBUVSFTFUUJOHͬͯ஌ͬͯ·͔͢ʁ
25.  ࣗಈΧʔχϯάͯ͘͠ΕΔʮGPOUGFBUVSFTFUUJOHTʯʂ ʮπϝ૊Έʯ͕ࣗಈͰͰ͖Δʂ͛͑͢ʂ
26.  font-feature-setting:“initial”; σϑΥϧτ
27.  font-feature-setting:“palt”; ϓϩϙʔγϣφϧϝτϦΫεͰΧʔχϯά
28.  font-feature-setting:“pwid”; ϓϩϙʔγϣφϧࣈܗʹஔ͖׵͑
29.  ࿨Ԥࠞ২ 5
30.  ࿨จͱ൒֯ӳ਺ࣈͷϑΥϯτΛ෼͚͍ͨʂ font-family:OneNikeCurrency,Helvetica,Arial,’ϝΠϦΦ’,Meiryo,'Hiragino Kaku Gothic Pro','̢̨ ̥ΰγοΫ','MS PGothic',sans-serif
31.  ·ͱΊ 6
32.  จࣈͷදݱ͸Ԟ͕ਂ͍ʂ