Slide 1
Slide 1 text
มଶత$44τϦοΫ
Grand Frontend Osaka 2016 / Kite
Slide 2
Slide 2 text
WordPress core contributor
Ruby on Rails contributor
Wocker developer
Bathe developer
Frasco developer
Web & graphic designer
Programmer
Kite
KITERETZ inc. CEO & Funder
! kite.koga " ixkaito # ixkaito
Slide 3
Slide 3 text
લఏ
˙
'MFYCPYΛΘͳ͍
˙
DBMD
ΛΘͳ͍
ະରԠϒϥβͰϨΠΞτͷӨڹ͕େ͖͍ͷͰ
Slide 4
Slide 4 text
มଶɿॳڃ
Slide 5
Slide 5 text
ݻఆ෯ͱύʔηϯςʔδͷΈ߹Θͤ
Slide 6
Slide 6 text
શମʵQY
ͷ શମʵQY
ͷ
? ?
width: 120px;
Ϩεϙϯγϒ
༷
Slide 7
Slide 7 text
width: 50%;
width: 50%;
margin-left: -120px; // 固定幅分のネガティブマージンを入れる
Γํ
Slide 8
Slide 8 text
padding-left: 120px; // 固定幅分のパディングを入れる
width: 50%;
width: 50%;
Γํ
Slide 9
Slide 9 text
Demo: https://ixkaito.github.io/percent-with-fixed-width/
Source: https://github.com/ixkaito/percent-with-fixed-width
σϞʗιʔε
Slide 10
Slide 10 text
มଶɿதڃ
Slide 11
Slide 11 text
ҟͳΔഎܠ৭ͷࣼΊσβΠϯ
Slide 12
Slide 12 text
ਫฏ
ਫฏ
Ϩεϙϯγϒ
༷
Slide 13
Slide 13 text
ී௨ʹskewΛ͔͚Δͱ
ࣦഊ
Slide 14
Slide 14 text
// 背景色を半分ずつ上下の要素に合わせる
background: linear-gradient(
blue 50%, yellow 50%
);
position: relative;
z-index: 0; // 0 以上
Γํ
Slide 15
Slide 15 text
// 擬似要素に skew をかける
:before {
background: white;
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1; // -1 以下
transform: skewY(-7deg);
}
Γํ
Slide 16
Slide 16 text
Demo: https://ixkaito.github.io/skew-with-different-colors/
Source: https://github.com/ixkaito/skew-with-different-colors
σϞʗιʔε
Slide 17
Slide 17 text
มଶɿ্ڃ
Slide 18
Slide 18 text
ಛघͳܩઢ
Slide 19
Slide 19 text
༷
Slide 20
Slide 20 text
ߟ͑ํ
ͦΕͧΕͷܩઢΛ͜ͷܗʹͰ͖Ε0,
Slide 21
Slide 21 text
// まずは普通にボーダーをつける
border: 1px solid;
position: relative;
z-index: 0; // 0 以下
Γํ
Slide 22
Slide 22 text
Γํ
// ボーダーを重ねる
margin: 0 -1px -1px 0;
Slide 23
Slide 23 text
Γํ
// ボーダーを重ねる
margin: 0 -1px -1px 0;
ॏͶͨɺίϯςϯπ෯͕ॖΉ
Slide 24
Slide 24 text
// 親要素に対して
// ボーダー幅✕間のボーダー数分のネガティ
ブマージン
margin-right: -2px;
Γํ
͜ΕͰϐολϦʂ
Slide 25
Slide 25 text
:before,
:after {
// 背景色と同じ色を付ける
background: white;
content: "";
position: absolute;
z-index: -1; // -1 以下
}
:before {
top: 20px; // 十字の大きさ
bottom: 20px; // 十字の大きさ
left: -1px; // ボーダー幅
right: -1px; // ボーダー幅
}
:after {
top: -1px; // ボーダー幅
bottom: -1px; // ボーダー幅
left: 20px; // 十字の大きさ
right: 20px; // 十字の大きさ
}
Γํ
Slide 26
Slide 26 text
Demo: https://ixkaito.github.io/unique-border/
Source: https://github.com/ixkaito/unique-border
σϞʗιʔε
Slide 27
Slide 27 text
มଶɿυڃ
Slide 28
Slide 28 text
ಛघͳ০Γ
Slide 29
Slide 29 text
༷
A
A
A
˙
ςΩετͷ͞ʹΑͬͯ"ͷ෦͕৳ͼΔ
˙
ϑΥϯτ৭ʹΑͬͯɺ০Γͷ৭มΘΔ
Slide 30
Slide 30 text
˙
ςΩετͷ͞ʹΑͬͯ"ͷ෦͕৳ͼΔ
ઌɺɺதؒ෦ʹ͚Δ
˙
ϑΥϯτ৭ʹΑͬͯɺ০Γͷ৭มΘΔ
ϑΥϯτͱͯ͠දࣔ͢Δ
ߟ͑ํ
A
A
A
Slide 31
Slide 31 text
Γํ
˙
ϐΫηϧϨϕϧͰͽͬͨΓ߹͏Α͏ʹׂ͢Δ
˙
ΞʔτϘʔυਖ਼ํܗͷํ͕࠷ऴతʹΩϨΠ
˙
০Γ͕ςΩετͷԼͷ߹ɺΞʔτϘʔυʹରͯ͠Լଗ͕͑Φεεϝ
47(Λ࡞Δ
Slide 32
Slide 32 text
Γํ
*DP.PPOͰϑΥϯτԽ
Slide 33
Slide 33 text
Γํ
SPEAKER
SPEAKER )5.-Slide 34
Slide 34 text
Γํ
SPEAKER
.title:before
Slide 35
Slide 35 text
Γํ
.title:after
SPEAKER
Slide 36
Slide 36 text
Γํ
.title-inner:after
SPEAKER
Slide 37
Slide 37 text
Γํ
SPEAKER
͜ΕΛेͳ͞ʹͯ͠ɺoverflow: hidden;͢Ε͍͍Μ͡Όͳ͍ʁ
Slide 38
Slide 38 text
Γํ
SPEAKER
Ͳ͏ͬͯʁ
͜ΕΛेͳ͞ʹͯ͠ɺoverflow: hidden;͢Ε͍͍Μ͡Όͳ͍ʁ
Slide 39
Slide 39 text
SPEAKER
ࣦഊྫ
transform: scaleX(99);
transform-origin: 0;
Slide 40
Slide 40 text
SPEAKER
ࣦഊྫ
transform: scaleX(99);
transform-origin: 0;
೦ͳ͕ΒɺϒϥβʹΑͬͯζϨΔ
Slide 41
Slide 41 text
ࣦഊྫ
47(ͷΦϦδφϧαΠζΛ
େ͖͘͢Δ
Slide 42
Slide 42 text
ࣦഊྫ
47(ͷΦϦδφϧαΠζΛ
େ͖͘͢Δ
೦ͳ͕Βɺ০Γͷܗ่͕ΕΔ
Slide 43
Slide 43 text
SPEAKER
݁
content: "\e901\e901\e901\e901\e901\e901\e901\e901\e901\e901\e901\e901";
DPOUFOUʹෳೖΕͯͭͳ͛Δͷ͕Ұ൪ΩϨΠ
Slide 44
Slide 44 text
Demo: https://ixkaito.github.io/unique-decoration/
Source: https://github.com/ixkaito/unique-decoration
σϞʗιʔε
Slide 45
Slide 45 text
൪֎ฤ
Slide 46
Slide 46 text
$44:matchesΛͬͨ$44ϋοΫ
:-webkit-any( selector ) { /* Chrome */ }
:-moz-any( selector ) { /* Firefox */ }
:matches( selector ) { /* Safari */ }
Slide 47
Slide 47 text
6OSFTFU$44Λ࡞ΔͨΊɺ
֤ϒϥβͷσϑΥϧτελΠϧΛௐͯͨΒ
͖͔͚ͬ
UnresetCSS: https://github.com/ixkaito/unreset-css
Slide 48
Slide 48 text
:matchesͱɺ$44ͷٖࣅΫϥεͷҰͭͰɺ
ෳηϨΫλʔΛ·ͱΊΔ͜ͱ͕Ͱ͖Δɻ
NBUDIFT
Slide 49
Slide 49 text
۩ମྫ
:matches(article, aside, nav, section)
:matches(article, aside, nav, section) h1 {
font-size: 1.17em;
}
͜Ε
Slide 50
Slide 50 text
۩ମྫ
article article h1,
article aside h1,
article nav h1,
article section h1,
aside article h1,
aside aside h1,
aside nav h1,
aside section h1,
nav article h1,
nav aside h1,
nav nav h1,
nav section h1,
section article h1,
section aside h1,
section nav h1,
section section h1 {
font-size: 1.17em;
}
͜Εͱಉ͡
Slide 51
Slide 51 text
۩ମྫ
article, aside, nav, section {
article, aside, nav, section {
h1 {
font-size: 1.17em;
}
}
}
4BTTͳͲͷೖΕࢠʹ͍ۙ
Slide 52
Slide 52 text
ରԠঢ়گ
:matches$44Ͱ:any
:-webkit-any( selector ) { /* Chrome */ }
:-moz-any( selector ) { /* Firefox */ }
:matches( selector ) { /* Safari */ }
֤ϒϥβͷରԠঢ়گ
Slide 53
Slide 53 text
͍ॴ
͜ͷରԠঢ়گΛٯखʹར༻ͯ͠ɺ
$44ͷΈͰϒϥβʹΑͬͯελΠϧΛม͑Δ͜ͱ͕Ͱ͖Δɻ
ྫ͑ɺ4BGBSJ͚ͩQYζϨͯϘʔμʔ͕ফ͑ΔͷͰϘʔμʔΛQYʹ͢Δɻ ࣮ྫ
Slide 54
Slide 54 text
˙
͜ΕΒมଶత$44τϦοΫͷ΄ΜͷҰ෦
˙
͜͜ͰऔΓ্͛ͨΓํΛ֮͑Δඞཁͳ͍ɺॏཁͳͷԼه
˙
$44Ͱϓϩάϥϛϯάతࢥߟྗੑɺղܾྗɺ
உͷϩϚϯ ͜ͷ߹ঁੑͰஉͷϩϚϯ
ඞཁ
˙
ϐΫηϧͷͩ͜ΘΓσβΠϯͷ࠶ݱੑαΠτͷΫΦϦςΟ
Λ֨ஈʹҾ্͖͛Δ
·ͱΊ
Slide 55
Slide 55 text
࠷ޙʹ
Slide 56
Slide 56 text
,*5&3&5;JOD גࣜձࣾΩςϨπ
Ͱɺ
ຐ๏͍ʹͳΓ͍ͨਓΛืू͠·͢ɻ
ϦϞʔτɺύʔτλΠϜܴɻ
αΠτ͔Β
IUUQLJUFSFU[DPN
'BDFCPPLϝοηʔδ͔Β
IUUQGBDFCPPLDPNLJUFLPHB
(JU)VC*TTVF
IUUQTHJUIVCDPNLJUFSFU[