Suche senden
Hochladen
Modernizerを用いたHTML5Webサイトの構築
•
10 gefällt mir
•
2,594 views
Hiroaki Wakamatsu
Folgen
Technologie
Seele & Geist
Melden
Teilen
Melden
Teilen
1 von 29
Empfohlen
Paginas web
Paginas web
Lupiz Esquivel Garcia
JS for Rails developers
JS for Rails developers
Timur Vafin
JavaScriptの動かし方
JavaScriptの動かし方
Tatsuya Tobioka
jQueryでつくる、動きのあるWebページ - 多摩美 メディアリテラシー
jQueryでつくる、動きのあるWebページ - 多摩美 メディアリテラシー
Atsushi Tadokoro
jQuery入門 - 芸大 Webデザイン演習B
jQuery入門 - 芸大 Webデザイン演習B
Atsushi Tadokoro
Enlace de prezy
Enlace de prezy
Carlos Nazario
jQuery - Write less, do more!
jQuery - Write less, do more!
Johannes Weber
Practica Rss.
Practica Rss.
Nones Pomposo
Empfohlen
Paginas web
Paginas web
Lupiz Esquivel Garcia
JS for Rails developers
JS for Rails developers
Timur Vafin
JavaScriptの動かし方
JavaScriptの動かし方
Tatsuya Tobioka
jQueryでつくる、動きのあるWebページ - 多摩美 メディアリテラシー
jQueryでつくる、動きのあるWebページ - 多摩美 メディアリテラシー
Atsushi Tadokoro
jQuery入門 - 芸大 Webデザイン演習B
jQuery入門 - 芸大 Webデザイン演習B
Atsushi Tadokoro
Enlace de prezy
Enlace de prezy
Carlos Nazario
jQuery - Write less, do more!
jQuery - Write less, do more!
Johannes Weber
Practica Rss.
Practica Rss.
Nones Pomposo
Critical Path Rendering - Rwdconf94
Critical Path Rendering - Rwdconf94
Arash Manteghi
jQuery入門 - 千葉商科大 Web動画表現
jQuery入門 - 千葉商科大 Web動画表現
Atsushi Tadokoro
すだちハッカソン発表資料
すだちハッカソン発表資料
Eigoro Yamamura
CáC CấU LựA ChọN
CáC CấU LựA ChọN
Le Van Huynh
Web App Mvc
Web App Mvc
Will Gunn
CSS Components
CSS Components
拓樹 谷
jQuery 2 イベントを理解する - 芸大Webデザイン演習B
jQuery 2 イベントを理解する - 芸大Webデザイン演習B
Atsushi Tadokoro
jQuery入門2 - イベント:千葉商科大学 Web動画表現
jQuery入門2 - イベント:千葉商科大学 Web動画表現
Atsushi Tadokoro
JSplash swf to javascript converter(2008/9/30)
JSplash swf to javascript converter(2008/9/30)
gyuque
Macdom html preprocesor
Macdom html preprocesor
Vladimír Macháček
How to Win the Heart of CSS Boys
How to Win the Heart of CSS Boys
拓樹 谷
Presentation1
Presentation1
tseegiimi
문돌이가 가르치는 웹 프론트엔드 기초 2차시
문돌이가 가르치는 웹 프론트엔드 기초 2차시
동현 조
Zamyakin
Zamyakin
kuchinskaya
Freddy,teto,chino,jhovany
Freddy,teto,chino,jhovany
Arturo Morales Ruiz
The Tab widget
The Tab widget
muhammadahmad0
Middleman 一小時完成你的專案原形
Middleman 一小時完成你的專案原形
Even Wu
Test4
Test4
SamQuiDaiBo
Web scale backups for MySQL, Алексей Копытов (Percona)
Web scale backups for MySQL, Алексей Копытов (Percona)
Ontico
Amourassura 170209210050
Amourassura 170209210050
Aztexain
スマートフォン対応 2012年の振り返りと2013年の展望
スマートフォン対応 2012年の振り返りと2013年の展望
Hiroaki Wakamatsu
スマートフォン対応、気をつけたいトラブル JavaScript編
スマートフォン対応、気をつけたいトラブル JavaScript編
Hiroaki Wakamatsu
Weitere ähnliche Inhalte
Was ist angesagt?
Critical Path Rendering - Rwdconf94
Critical Path Rendering - Rwdconf94
Arash Manteghi
jQuery入門 - 千葉商科大 Web動画表現
jQuery入門 - 千葉商科大 Web動画表現
Atsushi Tadokoro
すだちハッカソン発表資料
すだちハッカソン発表資料
Eigoro Yamamura
CáC CấU LựA ChọN
CáC CấU LựA ChọN
Le Van Huynh
Web App Mvc
Web App Mvc
Will Gunn
CSS Components
CSS Components
拓樹 谷
jQuery 2 イベントを理解する - 芸大Webデザイン演習B
jQuery 2 イベントを理解する - 芸大Webデザイン演習B
Atsushi Tadokoro
jQuery入門2 - イベント:千葉商科大学 Web動画表現
jQuery入門2 - イベント:千葉商科大学 Web動画表現
Atsushi Tadokoro
JSplash swf to javascript converter(2008/9/30)
JSplash swf to javascript converter(2008/9/30)
gyuque
Macdom html preprocesor
Macdom html preprocesor
Vladimír Macháček
How to Win the Heart of CSS Boys
How to Win the Heart of CSS Boys
拓樹 谷
Presentation1
Presentation1
tseegiimi
문돌이가 가르치는 웹 프론트엔드 기초 2차시
문돌이가 가르치는 웹 프론트엔드 기초 2차시
동현 조
Zamyakin
Zamyakin
kuchinskaya
Freddy,teto,chino,jhovany
Freddy,teto,chino,jhovany
Arturo Morales Ruiz
The Tab widget
The Tab widget
muhammadahmad0
Middleman 一小時完成你的專案原形
Middleman 一小時完成你的專案原形
Even Wu
Test4
Test4
SamQuiDaiBo
Web scale backups for MySQL, Алексей Копытов (Percona)
Web scale backups for MySQL, Алексей Копытов (Percona)
Ontico
Amourassura 170209210050
Amourassura 170209210050
Aztexain
Was ist angesagt?
(20)
Critical Path Rendering - Rwdconf94
Critical Path Rendering - Rwdconf94
jQuery入門 - 千葉商科大 Web動画表現
jQuery入門 - 千葉商科大 Web動画表現
すだちハッカソン発表資料
すだちハッカソン発表資料
CáC CấU LựA ChọN
CáC CấU LựA ChọN
Web App Mvc
Web App Mvc
CSS Components
CSS Components
jQuery 2 イベントを理解する - 芸大Webデザイン演習B
jQuery 2 イベントを理解する - 芸大Webデザイン演習B
jQuery入門2 - イベント:千葉商科大学 Web動画表現
jQuery入門2 - イベント:千葉商科大学 Web動画表現
JSplash swf to javascript converter(2008/9/30)
JSplash swf to javascript converter(2008/9/30)
Macdom html preprocesor
Macdom html preprocesor
How to Win the Heart of CSS Boys
How to Win the Heart of CSS Boys
Presentation1
Presentation1
문돌이가 가르치는 웹 프론트엔드 기초 2차시
문돌이가 가르치는 웹 프론트엔드 기초 2차시
Zamyakin
Zamyakin
Freddy,teto,chino,jhovany
Freddy,teto,chino,jhovany
The Tab widget
The Tab widget
Middleman 一小時完成你的專案原形
Middleman 一小時完成你的專案原形
Test4
Test4
Web scale backups for MySQL, Алексей Копытов (Percona)
Web scale backups for MySQL, Алексей Копытов (Percona)
Amourassura 170209210050
Amourassura 170209210050
Mehr von Hiroaki Wakamatsu
スマートフォン対応 2012年の振り返りと2013年の展望
スマートフォン対応 2012年の振り返りと2013年の展望
Hiroaki Wakamatsu
スマートフォン対応、気をつけたいトラブル JavaScript編
スマートフォン対応、気をつけたいトラブル JavaScript編
Hiroaki Wakamatsu
スマートフォン対応、気をつけたいトラブル
スマートフォン対応、気をつけたいトラブル
Hiroaki Wakamatsu
スマートフォンブラウザ不具合特集
スマートフォンブラウザ不具合特集
Hiroaki Wakamatsu
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
Hiroaki Wakamatsu
スマートフォン対応 ー クリエイター/ディレクターが知っておくべきポイント
スマートフォン対応 ー クリエイター/ディレクターが知っておくべきポイント
Hiroaki Wakamatsu
Mehr von Hiroaki Wakamatsu
(6)
スマートフォン対応 2012年の振り返りと2013年の展望
スマートフォン対応 2012年の振り返りと2013年の展望
スマートフォン対応、気をつけたいトラブル JavaScript編
スマートフォン対応、気をつけたいトラブル JavaScript編
スマートフォン対応、気をつけたいトラブル
スマートフォン対応、気をつけたいトラブル
スマートフォンブラウザ不具合特集
スマートフォンブラウザ不具合特集
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
スマートフォン対応 ー クリエイター/ディレクターが知っておくべきポイント
スマートフォン対応 ー クリエイター/ディレクターが知っておくべきポイント
Modernizerを用いたHTML5Webサイトの構築
1.
2.
3.
4.
5.
6.
7.
≠
≠ ≠ ≠ ≠
8.
7
8 9
9.
7
8 9
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
<script type="text/javascript" href="modernizr.js"></script> <html
lang="ja" class="js flexbox no-touch rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface">
20.
<!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>
21.
.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); }
22.
.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"); }
23.
if (Modernizr.canvas) { !
// canvas } if (Modernizr.indexeddb) { ! // indexedDB }
24.
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);
25.
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 { ! // }
26.
var eventEndName =
{ ! "WebkitTransition": "webkitTransitionEnd", ! "MozTransition": "transitionend", ! "transition": "transitionEnd" }; document.getElementById("hogehoge").addEventListener( eventEndName[Modernizr.prefixed("transition")], function(e) { ! // transition }, false);