≠   ≠   ≠   ≠   ≠
7   8   9
7   8   9
<script type="text/javascript" href="modernizr.js"></script><html lang="ja" class="js flexbox no-touch rgba hsla multiplebg...
<!DOCTYPE html><html lang="ja">!   <head>!   !   <meta charset="UTF-8" />!   !   <script src="prettyprint.js"></script>!  ...
.button {!!   background-image: url("images/button.png");}.cssgradients .button { ! background-image: -webkit-gradient(lin...
.button {! !   background-image: -webkit-gradient(linear,!    !   center top,!    !   center bottom,!    !   from(#555),! ...
if (Modernizr.canvas) {!    // canvas}if (Modernizr.indexeddb) {!    // indexedDB}
var evt = {};if (Modernizr.touch) {!    evt.down = "touchstart";!    evt.move = "touchmove";!    evt.up = "touchend";} els...
var src = null;if (Modernizr.audio.ogg) {!     src = "sample.ogg";} else if (Modernizr.audio.mp3) {!     src = "sample.mp3...
var eventEndName = {!   "WebkitTransition": "webkitTransitionEnd",!   "MozTransition": "transitionend",!   "transition": "...
Modernizerを用いたHTML5Webサイトの構築
Modernizerを用いたHTML5Webサイトの構築
Modernizerを用いたHTML5Webサイトの構築
Modernizerを用いたHTML5Webサイトの構築
Modernizerを用いたHTML5Webサイトの構築
Modernizerを用いたHTML5Webサイトの構築
Modernizerを用いたHTML5Webサイトの構築
Modernizerを用いたHTML5Webサイトの構築
Modernizerを用いたHTML5Webサイトの構築
Modernizerを用いたHTML5Webサイトの構築
Modernizerを用いたHTML5Webサイトの構築
Modernizerを用いたHTML5Webサイトの構築
Modernizerを用いたHTML5Webサイトの構築
Modernizerを用いたHTML5Webサイトの構築
Modernizerを用いたHTML5Webサイトの構築
Modernizerを用いたHTML5Webサイトの構築
Modernizerを用いたHTML5Webサイトの構築
Modernizerを用いたHTML5Webサイトの構築
Upcoming SlideShare
Loading in …5
×

Modernizerを用いたHTML5Webサイトの構築

3,861 views

Published on

Published in: Technology, Spiritual
1 Comment
10 Likes
Statistics
Notes
No Downloads
Views
Total views
3,861
On SlideShare
0
From Embeds
0
Number of Embeds
181
Actions
Shares
0
Downloads
1
Comments
1
Likes
10
Embeds 0
No embeds

No notes for slide

Modernizerを用いたHTML5Webサイトの構築

  1. 1. ≠ ≠ ≠ ≠ ≠
  2. 2. 7 8 9
  3. 3. 7 8 9
  4. 4. <script type="text/javascript" href="modernizr.js"></script><html lang="ja" class="js flexbox no-touch rgba hsla multiplebgsbackgroundsize borderimage borderradius boxshadow textshadowopacity cssanimations csscolumns cssgradients cssreflectionscsstransforms csstransforms3d csstransitions fontface">
  5. 5. <!DOCTYPE html><html lang="ja">! <head>! ! <meta charset="UTF-8" />! ! <script src="prettyprint.js"></script>! ! <script src="modernizr.js"></script>! </head>! <body>! ! <div id="debug"></div>! ! <script>! ! ! var info = prettyPrint(Modernizr);! ! ! document.getElementById("debug").appendChild(info);! ! </script>! </body></html>
  6. 6. .button {!! background-image: url("images/button.png");}.cssgradients .button { ! background-image: -webkit-gradient(linear,! ! center top,! ! center bottom,! ! from(#555),! ! to(#333)); ! background-image: -moz-linear-gradient(top, #555, #333); ! background-image: linear-gradient(top, #555, #333);}
  7. 7. .button {! ! background-image: -webkit-gradient(linear,! ! center top,! ! center bottom,! ! from(#555),! ! to(#333)); ! background-image: -moz-linear-gradient(top, #555, #333); ! background-image: linear-gradient(top, #555, #333);}.no-cssgradients .button {! background-image: url("images/button.png");}
  8. 8. if (Modernizr.canvas) {! // canvas}if (Modernizr.indexeddb) {! // indexedDB}
  9. 9. var evt = {};if (Modernizr.touch) {! evt.down = "touchstart";! evt.move = "touchmove";! evt.up = "touchend";} else {! evt.down = "mousedown";! evt.move = "mousemove";! evt.up = "mouseup";}document.getElementById("hogehoge").addEventListener(evt.up, function(e) {! alert(" ");}, false);
  10. 10. var src = null;if (Modernizr.audio.ogg) {! src = "sample.ogg";} else if (Modernizr.audio.mp3) {! src = "sample.mp3";} else if (Modernizr.audio.m4a) {! src = "sample.m4a";}if (src) {! var audio = new Audio();! audio.src = src;! audio.play();} else {! //}
  11. 11. var eventEndName = {! "WebkitTransition": "webkitTransitionEnd",! "MozTransition": "transitionend",! "transition": "transitionEnd"};document.getElementById("hogehoge").addEventListener(eventEndName[Modernizr.prefixed("transition")], function(e) {! // transition}, false);

×