PowerPoint Presentation

Size: px

Start display at page:

Download "PowerPoint Presentation"

ぎんともてぎ
7 years ago
Views:

2 2

3 3

4 4

5 HTML 5 Level.1 Markup Professional HTML 5 Level.2 Application Development Professional 5

6 6

7 7

8 8

9 9

11 11

12 12

13 <table> <tr><th> </th><th> </th><th> </th></tr> <template id="row"> <tr><td></td><td></td><td></td></tr> </template> </table> 13

14 14

15 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title> </title> </head> <body> </body> </html> 15

16 <link rel="stylesheet" href="style.css"> <style> </style> <script> </script> type="text/css" type="text/javascript" 16

17 17

18 18

19 19

20 20

21 21

22 22

23 23

24 24

25 25

26 26

27 27

28 28

29 29

30 <ruby> <rb> </rb> <rt> </rt> </ruby> 30

31 <ruby> <rb> </rb><rb> </rb> <rt> </rt><rt> </rt><rt> </rt> </ruby> 31

32 <ruby> <rb> </rb><rb> </rb> <rt> </rt><rt> </rt><rt> </rt> <rtc> <rt>me</rt><rt>man</rt><rt>betsu</rt> </rtc> </ruby> 32

33 <ruby> <rb> </rb> <rp> </rp><rt> </rt><rp> </rp> </ruby> 33

34 34

35 35

36 36

37 37

38 38

39 39

40 40

41 41

42 42

43 <ol> <li data-length="11m32s"> </li> <li data-length="08m55s"> </li> <li data-length="22m04s"> </li> <li data-length="13m46s"> </li> <li data-length="30m00s"> </li> </ol> 43

44 44

45 45

46 46

47 47

48 48

49 49

50 50

51 51

52 52

53 53

54 54

55 55

56 56

57 57

58 58

59 59

60 div.inner div.inner

61 #logo div#logo body div#logo

62 62

63 rgb( Red, Green, Blue ) rgba( Red, Green, Blue, Alpha ) 63

64 color: rgba( 255, 255, 255, 0.0 ); color: rgba( 255, 255, 255, 0.2 ); color: rgba( 255, 255, 255, 0.4 ); color: rgba( 255, 255, 255, 0.6 ); color: rgba( 255, 255, 255, 0.8 ); color: rgba( 255, 255, 255, 1.0 ); The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; 64

65 hsla( Hue, Saturation, Lightness, Alpha ) 0 0% 0% % 100%

67 #box01{ opacity: 0.1 }; #box02{ opacity: 0.2 }; #box03{ opacity: 0.3 }; #box04{ opacity: 0.4 }; #box05{ opacity: 0.5 }; #box06{ opacity: 0.6 }; #box07{ opacity: 0.7 }; #box08{ opacity: 0.8 }; #box09{ opacity: 0.9 }; #box10{ opacity: 1.0 }; The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; 67

68 68

69 transform: rotate(45deg); transform: translate(50px); transform: scale(1.5); 69

70 transform: rotate(45deg); 70

71 transform: translate(100px, 50px); 71

72 transform: translate(100px, 50px); = position: relative; left: 100px; top: 50px; 71

73 transform: scale(2.0); 72

74 transform: scale(2) rotate(45deg); 73

75 74

76 Demo 75

77 76

78 Demo 77

79 78

80 79

81 <link media="screen" > <style media="screen" > screen { } 80

82 <link media="screen " > <style media="screen " > screen { } 81

83 82

84 83

85 84

86 dpi dots per inch dpcm dots per centimeter 85

87 <link media="screen and (max-width: 1000px)" > <link media="only screen and (min-width: 500px) and (max-width: 1000px)" > 86

88 87

89 88

90 89

91 CACHE MANIFEST CACHE: styles/default.css images/background.png NETWORK: comm.cgi FALLBACK: offline.html SETTINGS: fast 90

92 CACHE MANIFEST # styles/default.css images/background.png NETWORK: * SETTINGS: prefer-online FALLBACK: offline.html 91

93 <!DOCTYPE html> <html lang="ja" manifest=".appcache"> </html>.appcache text/cache-manifest UTF-8 92

94 Open the Future with HTML5. 93

PowerPoint Presentation

PowerPoint Presentation HTML5 Level.1 Markup Professional HTML5 Level.2 Application Development Professional http://www.html5exam.jp/ @html5cert https://www.facebook.com/html5exam