1.
~ 2016.08
taskey

2.
•
•
• 25
• @Taskey.inc
• html, css, javascript, ruby, node, google app script,,

3.
2
• twitter: @fukamiiiiinmin i 5
•
GO !!!!!
!!!!

4.
taskey

5.
html zine

6.
html5
html css

7.
We are startup company!

8.
2

9.
html

10.
slim

11.
css

12.
Sass css

13.
js

14.
ES2015 js

15.
not
working

16.
→

17.
HTML

18.
HTML
• html4 html5
•

19.
HTML5? HTML4?
• HTML

20.
HTML5?
• HTML
• HTML5
• header, main, footer…

21.
HTML5?
•

22.
HTML5?
•

23.
HTML5?
• PC

24.
HTML5?
•
SEO

25.
HTML5?
•

26.
HTML5?
•

27.
A html5
B
class=“header”
<header>

28.
• html
• html
• html

29.
html
• class=“”

30.
pug
•

31.
pug html

32.
pug
• html

33.
pug
class, id

34.
html

35.
A
B pug
rails slim
C html

36.
CSS

37.
CSS
• CSS
• CSS bootstrap, purecss
• Sass SASS, SCSS , Less, Stylus
• CSS BEM, OOCSS, FLOCSS

38.
CSS
CSS

39.
CSS
• CSS

40.
A css
B CSS
html

41.
CSS
• web
class CSS

42.
class ?

43.
2

44.
1

45.
CSS

46.
float
box-wrap div float
box , padding class
clear html box-wrap
clear

47.
float

48.
.box

49.
.clear

50.
before → after

51.
.wrap-float
• div float
• float
• float .wrap-float

52.
web

53.
CSS

54.
ex)bootstrap! purees! etc…

55.
bootstrap
•
•

56.
bootstrap class

57.
purecss
•
•

58.
• class
• class class
style
•

59.
CSS

60.
A css
B bootstrap
purecss

61.
CSS
• CSS
• CSS
•
•

62.
Sass
• Sass 2
• SASS .sass
• SCSS .scss
• CSS Sass SASS

63.
Sass

64.
DEMO

65.
Sass

66.
web

67.
css .css

68.
CSS

69.
A CSS
B Sass SASS
stylus stylus

70.
CSS
BEM, SMACSS, OOCSS, FLOCSS
• CSS
•

71.
CSS
.header{}
.header-logo{}
.header-menus{}
.header-menus .header-menu{}

72.
The

73.
level1

74.
flocss

75.
A CSS
B FLOCSS css
css html

76.
javascript
• javascript
• jquery
• ajax
• JS
• ECMAScript2015(ES6)

77.
javascript
• Web DOM html

78.
DOM
•

79.
DOM
• id=“boxes”

80.
javascript

81.
jquery
• DOM

82.
DOM
•

83.
DOM
• id=“boxes”

84.
jquery

85.
A jquery
B DOM

86.
Ajax
•

87.
Google map
•

88.
map
•

89.
• facebook
etc…etc…etc…

90.
Ajax
• SPA Single Page Application
• DOM html
•

91.
DOM

92.
jquery

93.
jquery DOM
DOM

94.
Web A Ajax
html .html()
Web B 1 1 10
Web A
Web B javascript
html
Web A

95.
Web B

96.
Web B ajax
ajax html html
Web B

97.
Web A
Web B div js html html
js
Web B sex
div
div
Web B

98.
web B javascript html

99.
web B javascript html

100.
Web B
web B
web A
web A

101.
JS
web A,B

102.
JS javascript
html
html
web A,B

103.
JS
• DOM
• knockout
• react, angular vue

104.
microsoft
Facebook
google

105.
microsoft
Facebook
google

106.
• javascript jquery html
• html

107.
•
•
•

108.
ES6 ES2015
• Javascript

109.
class
let const var
()
etc…

110.
function ()
var say = function(){
console.log(‘hello!’)
}
var say = () => {
console.log(‘hello!’)
}
say() // hello!

111.
var say = function(greeting){
if(greeting == undefined){
greeting = ‘hello!’
}
console.log(greeting);
}
var say = (greeting = ‘hello!’) => {
console.log(greeging)
}
say() // hello!

112.
2mm

113.
web

114.
es6 es5

115.
es6 es5

116.
DEMO

117.
A ES6
B JavaScript ES2015
JavaScript class

118.
•
•
•
• Sass ES6

119.
gulp grunt

120.
• ○○ xx
• index.html
•

121.
2,3
index.scss index.css
→Sass CSS
index.es6 index.js
→ES6 ES5

122.
• index.scss, index.es6
index.css, index.js
• index.css, index.js

123.
DEMO

124.
A
B gulp Sass
gulp

125.
A
B html pug css sass
FLOCSS js es6
react
gulp

126.
A
A
B html pug css sass
FLOCSS js es6
react
gulp

127.
•
•
•
•
JS