CSSNiteLP51-s7-kubo.key

Size: px

Start display at page:

Download "CSSNiteLP51-s7-kubo.key"

おきみちたかひ
7 years ago
Views:

2 CSS Nite LP51 Reboot Dreamweaver Dreamweaver

5 10th

10 .foo width: 980px margin: auto p margin: 1em 0 a color: #000 text-decoration: none

11 .foo { width: 980px; margin: auto; p { margin: 1em 0; a { color: #000; text-decoration: none;

13 .about.text-area { width: 600px; margin: (max-width: 640px) {.about.text-area { width: auto; margin: 20px;.about a { color: #aaa;.about a:hover { text-decoration: underline;

14 .about {.text-area { width: 600px; margin: (max-width: 640px) { width: auto; margin: 20px; a { color: #aaa; &:hover { text-decoration: underline;

15 .foo { color: #000;.bar { color: #fb2234;.button { color: #fb2234;.button-large { color: #fb2234;

16 $black: #000; $red: #fb2234;.foo { color: $black;.bar { color: $red;.button { color: $red;.button-large { color: $red;

17 .hero item--1 { animation-name: hero item--1; opacity: hero item--1 { 0% {opacity: 1; 22% {opacity: 1; 25% {opacity: 0;.hero item--2 { animation-name: hero hero item--2 { 22% {opacity: 0; 25% {opacity: 1; 47% {opacity: 1; 50% {opacity: 0;.hero item--3 { animation-name: hero hero item--3 { 47% {opacity: 0; 50% {opacity: 1; 72% {opacity: 1; 75% {opacity: 0;.hero item--4 { animation-name: hero hero item--4 { 72% {opacity: 0; 72% {opacity: 0; 75% {opacity: 1; 97% {opacity: 1;

18 @mixin fade($classes) { $length: length($classes); $persent: percentage(1 / $class in $classes { $index: index($classes, $class); $step1: ($persent * $index) - $persent; $step2: ($persent * $index) - 3; $step3: $persent * $index; $step0: $step1-3;.#{$class { animation-name: $index == 1 { opacity: #{$class $index == $length { #{$step0 { opacity: $index > 1 { #{$step0 { opacity: 0; #{$step1 { opacity: 1; #{$step2 { opacity: $index!= $length { #{$step3 { opacity: 0;

19 $fade-duration: 10s; $fade-classes: ( hero item--1, hero item--2, hero item--3, hero item--4 fade($fade-classes);

20 .foo { width: 20%; color: rgba(0, 0, 0, 0.5);.modal { position: absolute; z-index: 3;

21 $z: ( header, nav, modal );.foo { width: percentage(1 / 5); color: rgba(#000, 0.5);.modal { position: absolute; z-index: index($z, modal);

51 Neat

52 Neat

53 Neat

56 B Neat

72 $screen-xs: 480px; $screen-sm: 768px;

73 $screen-xs: 480px; $screen-sm: mq($screen) (max-width: #{$screen)

74 $screen-xs: 480px; $screen-sm: mq($screen) (max-width: #{$screen) { color: #000;

75 $screen-xs: 480px; $screen-sm: mq($screen) (max-width: #{$screen) { color: mq($screen-xs) { color: #f00;

76 .style { color: (max-width: 480px) {.style { color: #f00;

77 $screen-xs: 480px; $screen-sm: mq($screen) (max-width: #{$screen) { color: mq($screen-xs) { color: #f00;

78 $screen: ( xs: 480px, sm: 768px mq($size, $width: max) { $result: == number) { $result: $key, $value in $screen == $size) { $result: == min) { $result: $result - (#{$width-width: #{$result)

79 .style { color: mq(xs) { (max-width: 480px) color: #f00;

80 .style { color: mq(xs) { (max-width: 480px) color: mq(xs, min) { (min-width: 479px) color: mq(sm) { (max-width: 768px) color: mq(360px, min) { (min-width: 359px) color: #f00;

84 $color-base: #000; $color-accent: #f00; $color-text: #333; $color-base: #fff; $colors: ( base: #000, accent: #f00, text: #333, base: #fff );.style { color: $color-text;

85 $color-base: #000; $color-accent: #f00; $color-text: #333; $color-base: #fff; $colors: ( base: #000, accent: #f00, text: #333, base: #fff );.style { color: $color-text;

_勉強会_丸山さつき_v3

_勉強会_丸山さつき_v3 CSS 2019/6/21 1 CSS CSS CSS!2 CSS Web!3 CSS HTML CSS CSS!4 CSS!5 !6 Id class id class CSS!7 !8 body 16px p 16px px, rem, em, %!9 !10 body 16px p 16px 1 CSS!11 !12 CSS CSS!13 CSS 4 CSS 1. OOCSS 2. SMACSS