『HTML5感。 ～今使われているHTML5。今知っておきたいHTML5のすごい技術。～』の資料 2016.7.24 2017.05.10 タイトルを更新

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

8. We are startup company!

9. 2

12. html

13. slim

14. css

15. Sass css

16. js

17. ES2015 js

18. not
working

26. →

27. HTML

28. HTML
• html4 html5
•

29. HTML5? HTML4?
• HTML

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

31. HTML5?
•

32. HTML5?
•

33. HTML5?
• PC

34. HTML5?
•
SEO

35. HTML5?
•

36. HTML5?
•

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

38. • html
• html
• html

39. html
• class=“”

40. pug
•

41. pug html

42. pug
• html

45. pug
class, id

46. html

48. A
B pug
rails slim
C html

49. CSS

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

51. CSS
CSS

52. CSS
• CSS

53. A css
B CSS
html

54. CSS
• web
class CSS

55. class ?

56. 2

58. 1

60. CSS

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

62. float

63. .box

64. .clear

66. before → after

67. .wrap-float
• div float
• float
• float .wrap-float

68. web

73. CSS

74. ex)bootstrap! purees! etc…

75. bootstrap
•
•

76. bootstrap class

77. purecss
•
•

78. • class
• class class
style
•

79. CSS

80. A css
B bootstrap
purecss

81. CSS
• CSS
• CSS
•
•

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

85. Sass

86. DEMO

87. Sass

88. web

89. css .css

90. CSS

93. A CSS
B Sass SASS
stylus stylus

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

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

97. The

98. level1

99. flocss

100. A CSS
B FLOCSS css
css html

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

102. javascript
• Web DOM html

103. DOM
•

104. DOM
• id=“boxes”

106. javascript

109. jquery
• DOM

110. DOM
•

111. DOM
• id=“boxes”

114. jquery

115. A jquery
B DOM

116. Ajax
•

117. Google map
•

118. map
•

119. • facebook
etc…etc…etc…

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

121. DOM

122. jquery

123. jquery DOM
DOM

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

125. Web B

126. Web B ajax
ajax html html
Web B

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

128. web B javascript html

129. web B javascript html

130. Web B
web B
web A
web A

131. JS
web A,B

132. JS javascript
html
html
web A,B

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

135. microsoft
Facebook
google

136. microsoft
Facebook
google

137. • javascript jquery html
• html

138. •
•
•

139. ES6 ES2015
• Javascript

140. class
let const var
()
etc…

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

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

143. 2mm

144. web

145. es6 es5

146. es6 es5

147. DEMO

148. A ES6
B JavaScript ES2015
JavaScript class

150. •
•
•
• Sass ES6

153. gulp grunt

154. • ○○ xx
• index.html
•

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

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

157. DEMO

159. A
B gulp Sass
gulp

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

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

163. •
•
•
•
JS