Slide 1
Slide 1 text
໋໊ฤ
ΧϥʔύϨοτΛͱΊͯ
ཧͷ
DIST.26 | WebαʔϏεͷݸੑΛࢧ͑ΔσβΠϯ 2019.04.26
Slide 2
Slide 2 text
UXΤϯδχΞ
αΠόʔΤʔδΣϯτ
୩ थ
CyberAgent Advanced Technology Studio
Slide 3
Slide 3 text
https://ameblo.jp/shiba-mamehiko/
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
90
͕͖͔Ͳ͏͔
sec
%
90
৭͚ͩʹجͮ͘
Slide 6
Slide 6 text
Ѝ㗯㗙㗹㗦㗮
COLORS SPEAK ALL LANGUAGES.
Joseph Addison | English Eessayist
ԊႧ㘒༑㗙
Slide 7
Slide 7 text
Θ͔Γ໊͍͢લΛఆٛ͢Δ
ίϯτϥετΛߟྀ͢Δ
ඞཁͳ৭ΛߜΓࠐΉ
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
blue_500
Slide 10
Slide 10 text
blue_500
blue_400
blue_600
Slide 11
Slide 11 text
azure_500
azure_400
azure_600
Slide 12
Slide 12 text
primary_base
primary_light
primary_heavy
Slide 13
Slide 13 text
primary_base
primary_lighter_15
primary_darker_10
Slide 14
Slide 14 text
button_primary_base
button_primary_hover
button_primary_active
Slide 15
Slide 15 text
button_primary_base
button_primary_hover
button_primary_active
button_primary_text
button_primary_text
button_primary_text
Slide 16
Slide 16 text
$color_primary: #155AEE;
$color_primary_light: #4D82F3;
$color_primary_heavy: #114CCA;
$button_primary: $color_primary;
$button_primary_hover: $color_primary_light;
$button_primary_active: $color_primary_heavy;
$button_primary_text: #FCFDFD;
Sass
Slide 17
Slide 17 text
@mixin button_primary_color {
background-color: $button_primary;
color: $button_primary_text; &:hover {
background-color: $button_primary_hover;
}
&:active {
background-color: $button_primary_active;
}
}
Sass
Slide 18
Slide 18 text
.button {
@include button_primary_color;
}
Sass
Slide 19
Slide 19 text
.button {
background-color: #155AEE;
color: #FCFDFD;
}
.button:hover {
background-color: #4D82F3;
}
.button:active {
background-color: #114CCA;
}
CSS
Slide 20
Slide 20 text
ίϯτϥετൺΛอͭΛ͢Δ
ڞ௨ݴޠͱͯ͠ѻ໊͍͍͢લʹ͢Δ
ύϨοτͰఆٛͨ͠৭Ҏ֎Θͳ͍
Slide 21
Slide 21 text
Thank you
@hiloki
@shiba_mamehiko
Slide 22
Slide 22 text
Special Guest Speaker
Felix Rieseberg
and more Speakers!
https://inside-frontend.com/