DIST.26 「Webサービスの個性を支えるデザイン」LT
໋໊ฤΧϥʔύϨοτΛͱΊͯཧͷDIST.26 | WebαʔϏεͷݸੑΛࢧ͑ΔσβΠϯ 2019.04.26
View Slide
UXΤϯδχΞαΠόʔΤʔδΣϯτ୩ थCyberAgent Advanced Technology Studio
https://ameblo.jp/shiba-mamehiko/
90͕͖͔Ͳ͏͔sec%90৭͚ͩʹجͮ͘
Ѝ㗯㗙㗹㗦㗮COLORS SPEAK ALL LANGUAGES.Joseph Addison | English EessayistԊႧ㘒༑㗙
Θ͔Γ໊͍͢લΛఆٛ͢ΔίϯτϥετΛߟྀ͢Δඞཁͳ৭ΛߜΓࠐΉ
blue_500
blue_500blue_400blue_600
azure_500azure_400azure_600
primary_baseprimary_lightprimary_heavy
primary_baseprimary_lighter_15primary_darker_10
button_primary_basebutton_primary_hoverbutton_primary_active
button_primary_basebutton_primary_hoverbutton_primary_activebutton_primary_textbutton_primary_textbutton_primary_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
@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
.button {@include button_primary_color;}Sass
.button {background-color: #155AEE;color: #FCFDFD;}.button:hover {background-color: #4D82F3;}.button:active {background-color: #114CCA;}CSS
ίϯτϥετൺΛอͭΛ͢Δڞ௨ݴޠͱͯ͠ѻ໊͍͍͢લʹ͢ΔύϨοτͰఆٛͨ͠৭Ҏ֎Θͳ͍
Thank you@hiloki@shiba_mamehiko
Special Guest SpeakerFelix Riesebergand more Speakers!https://inside-frontend.com/