{"id":4233,"date":"2013-02-08T02:37:36","date_gmt":"2013-02-07T17:37:36","guid":{"rendered":"http:\/\/www.webcyou.com\/?p=4233"},"modified":"2013-02-08T02:37:36","modified_gmt":"2013-02-07T17:37:36","slug":"html5-web%e3%82%b9%e3%83%88%e3%83%ac%e3%83%bc%e3%82%b8%e3%81%a7%e3%83%87%e3%83%bc%e3%82%bf%e3%82%92%e4%bf%9d%e5%ad%98-%e3%81%9d%e3%81%ae3%ef%bc%88%e3%82%af%e3%82%a8%e3%82%b9%e3%83%88%e9%80%b2%e8%a1%8c","status":"publish","type":"post","link":"https:\/\/www.webcyou.com\/?p=4233","title":{"rendered":"HTML5 Web\u30b9\u30c8\u30ec\u30fc\u30b8\u3067\u30c7\u30fc\u30bf\u3092\u4fdd\u5b58 \u305d\u306e3\uff08\u30af\u30a8\u30b9\u30c8\u9032\u884cCSS3\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\uff09"},"content":{"rendered":"<p>\u524d\u56de\u306e<\/p>\n<h3><a href=\"https:\/\/www.webcyou.com\/?p=4173\">HTML5 Web\u30b9\u30c8\u30ec\u30fc\u30b8\u3067\u30c7\u30fc\u30bf\u3092\u4fdd\u5b58 \u305d\u306e\uff12\uff08\u306a\u3093\u3061\u3083\u3063\u3066\u30bd\u30fc\u30b7\u30e3\u30eb\u30b2\u30fc\u30e0\u4f5c\u6210\uff09<\/a><\/h3>\n<p>\u7d9a\u304d\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>\u4eca\u56de\u306f\u3001\u753b\u9762\u4ed5\u69d8\u3067\u3042\u308b<strong>\u300c\u00a0\u80cc\u666f\u304c\u5909\u5316\u3059\u308b\u3002\uff08\u9032\u3093\u3067\u3044\u308b\u611f\u306e\u30a2\u30cb\u30e1\uff09\u300d<\/strong>\u306e\u4f5c\u6210\u3092\u884c\u3044\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n<p>CSS3\u3092\u4f7f\u3046\u3053\u3068\u306b\u3088\u3063\u3066\u8272\u3005\u306a\u8868\u73fe\u304c\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n<p>\u305d\u306e\u306a\u304b\u3067\u3082\u591a\u5f69\u306a\u8868\u73fe\u304c\u53ef\u80fd\u3068\u306a\u308bkeyframe \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u4f7f\u3063\u3066\u30af\u30a8\u30b9\u30c8\u9032\u884c\u306e\u4f5c\u6210\u3092\u884c\u3044\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n<h4>keyframe \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3<\/h4>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n.elm { -webkit-animation: 'anime' 1s ease-in 1; } \r\n@-webkit-keyframes 'anime' { \r\n  0% { opacity:0; } \r\n  100% { opacity:1; } \r\n}\r\n<\/pre>\n<p>\u3053\u306e\u3088\u3046\u306b\u30a2\u30cb\u30e1\u3092\u884c\u3044\u305f\u3044\u5bfe\u8c61\u306e\u8981\u7d20\u306b\u5bfe\u3057\u3066-webkit-animation\u306e\u6307\u5b9a\u3092\u884c\u3044\u3001<\/p>\n<p>@-webkit-keyframes &#8216;\u4efb\u610f\u306e\u540d\u524d&#8217;\u3067\u884c\u3046\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u6307\u5b9a\u3092\u3059\u308b\u3053\u3068\u306b\u3088\u3063\u3066<\/p>\n<p>\u69d8\u3005\u306a\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u884c\u3046\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>\u4e0a\u8a18\u306e\u4f8b\u3067\u306f1\u79d2\u9593\u306e\u9593\u306b\u900f\u904e\u5ea6100%\u304b\u30890%\u306b\u5909\u5316\u3055\u305b\u308b\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u6307\u5b9a\u3092\u884c\u3063\u3066\u304a\u308a\u307e\u3059\u3002<\/p>\n<p>\u4eca\u56de\u306f\u30af\u30a8\u30b9\u30c8\u9032\u884c\u306a\u306e\u3067\u3001\u4eba\u6c17\u306e\u30bd\u30fc\u30b7\u30e3\u30eb\u30b2\u30fc\u30e0\u306b\u3042\u3084\u304b\u308b\u3053\u3068\u306b\u3057\u3066\u3001<\/p>\n<p><strong>\u300c\u30df\u30ea\u30aa\u30f3\u30a2\u30fc\u30b5\u30fc\u98a8\u300d<\/strong>\u306a\u611f\u3058\u3067\u3001\u6b69\u3044\u3066\u3044\u308b\u611f\u3058\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u4f5c\u6210\u3044\u305f\u3057\u307e\u3059\u3002<\/p>\n<p><strong>\u62e1\u6563\u6027\u30df\u30ea\u30aa\u30f3\u30a2\u30fc\u30b5\u30fc<\/strong><\/p>\n<p><a href=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/20121105-032956.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/20121105-032956.jpg\" title=\"20121105-032956.jpg\" width=\"614\" height=\"346\" class=\"alignnone  wp-image-4104\" srcset=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/20121105-032956.jpg 1136w, https:\/\/www.webcyou.com\/wp-content\/uploads\/20121105-032956-300x169.jpg 300w, https:\/\/www.webcyou.com\/wp-content\/uploads\/20121105-032956-1024x576.jpg 1024w\" sizes=\"auto, (max-width: 614px) 100vw, 614px\" \/><\/a><\/p>\n<p><a href=\"https:\/\/itunes.apple.com\/jp\/app\/kuo-san-xingmirionasa\/id497936185?mt=8\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/AppStoreBadge.jpg\" alt=\"\" title=\"AppStoreBadge\" width=\"191\" height=\"80\" \/><\/a><\/p>\n<p>\u8ca9\u58f2\u5143:\u00a0SQUARE ENIX Co., Ltd.<\/p>\n<p>\u00a9 2012 SQUARE ENIX CO., LTD. All Rights Reserved. Developed by Mighty Craft Co.<\/p>\n<p>\u3067\u306f\u3001\u307e\u305a\u80cc\u666f\u306e\u30ba\u30fc\u30e0\u3092\u884c\u3044\u307e\u3059\u3002<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n@-webkit-keyframes questMove {\r\n  0% {\r\n    -webkit-transform: scale(1);\r\n    opacity: 1;\r\n  }\r\n  100% {\r\n    -webkit-transform: scale(2);\r\n    opacity: 0;\r\n  }\r\n}\r\n<\/pre>\n<p>-webkit-transform\u3092\u4f7f\u3044\u3001zoom\u3055\u305b\u3001opacity\u3067\u900f\u904e\u3055\u305b\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n<p>\u3055\u3089\u306b\u6b69\u3044\u3066\u3044\u308b\u611f\u3058\u3092\u51fa\u3059\u305f\u3081\u306b\u3001position\u3067\u64cd\u4f5c\u3057\u307e\u3057\u3087\u3046\u3002 \uff08transform\u3067\u64cd\u4f5c\u3057\u3066\u3082\u826f\u3044\u306e\u3067\u3059\u304c\u3001\u3059\u3067\u306bscale\u306e\u8a2d\u5b9a\u3057\u3066\u304a\u308a\u7d30\u304b\u3044\u8abf\u6574\u304c\u5fc5\u8981\u3068\u306a\u3063\u3066\u304d\u8907\u96d1\u5316\u3057\u3066\u3057\u307e\u3046\u306e\u3067\u5225\u500b\u306b\u8a2d\u5b9a\u3044\u305f\u3057\u307e\u3059\u3002\uff09<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">.questImg img {\r\n  position: absolute;\r\n  -webkit-animation: questMove 1s ease-in;\r\n  z-index: 1;\r\n}\r\n@-webkit-keyframes questMove {\r\n  0% {\r\n    -webkit-transform: scale(1);\r\n    top: -10px;\r\n    opacity: 1;\r\n  }\r\n  20% {\r\n    top: 10px;\r\n  }\r\n  40% {\r\n    top: -15px;\r\n  }\r\n  60% {\r\n    top: 15px;\r\n  }\r\n  80% {\r\n    top: -20px;\r\n    opacity: 0.1;\r\n  }\r\n  100% {\r\n    top: 0px;\r\n    -webkit-transform: scale(2);\r\n    opacity: 0;\r\n  }\r\n}<\/pre>\n<p>position\u306e\u6307\u5b9a\u3092\u3059\u308b\u3053\u3068\u306b\u3088\u3063\u3066\u3001zoom\u3057\u3066\u304f\u308b\u753b\u50cf\u304c\u3044\u308d\u3093\u306a\u8981\u7d20\u306b\u304b\u3076\u3055\u3063\u3066\u3057\u307e\u3046\u305f\u3081\u3001h1\u3001.statusView\u3001.btn\u306bz-index:10;\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002<\/p>\n<p>\u307e\u305f\u3001.mainView\u306b\u306fposition: relative;\u306e\u6307\u5b9a\u3092\u884c\u3044\u3001\u57fa\u6e96\u70b9\u3092\u4f5c\u308a\u307e\u3059\u3002<\/p>\n<p>\u305d\u3093\u306a\u611f\u3058\u3067\u4f5c\u3063\u305f\u306e\u304c\u4ee5\u4e0b\u306e\u30c7\u30e2\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<p><strong><a href=\"http:\/\/webcyou.com\/demo\/js\/webstorage\/index002.html\" target=\"_blank\">\u30c7\u30e2\u30da\u30fc\u30b8<\/a><\/strong><\/p>\n<p><a href=\"http:\/\/webcyou.com\/demo\/js\/webstorage\/index002.html\" target=\"_blank\">http:\/\/webcyou.com\/demo\/js\/webstorage\/index002.html<\/a><\/p>\n<p>\u306a\u3001\u306a\u3093\u3068\u306a\u304f\u305d\u308c\u3063\u307d\u3044\u3067\u3059\u3088\u306d\u3002\u3002\u3002<\/p>\n<p>\u7d9a\u3044\u3066\u3001\u30dc\u30bf\u30f3\u3092\u62bc\u3059\u3068CSS3\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u304c\u52d5\u304f\u3088\u3046\u306b\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n<h4>\u30af\u30a8\u30b9\u30c8\u9032\u884cCSS3\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3<\/h4>\n<p>\u80cc\u666f\u753b\u50cf\u306f\u300c\u901a\u5e38\u306f\u56fa\u5b9a\u300d\u300c\u30dc\u30bf\u30f3\u3092\u62bc\u3059\u3068\u52d5\u304f\u300d\u3068\u3044\u3046\u6d41\u308c\u3092\u4f5c\u308a\u307e\u3059\u3002<\/p>\n<p>\u5148\u307b\u3069\u4f5c\u3063\u305fCSS\u3082\u4e00\u90e8\u4fee\u6b63\u3057\u307e\u3059\u3002<\/p>\n<p><strong>CSS3<\/strong><\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">.questImg img {\r\n  position: absolute;\r\n  z-index: 1;\r\n}\r\n.questImg.move img { -webkit-animation: questMove 1s ease-in; }\r\n<\/pre>\n<p>\u3053\u306e\u3088\u3046\u306b\u3001.questImg\u306b.move\u304c\u4ed8\u4e0e\u3055\u308c\u308b\u3068\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u304c\u59cb\u307e\u308b\u3088\u3046\u306b\u4fee\u6b63\u3057\u307e\u3059\u3002<\/p>\n<p>\u305d\u308c\u3067\u306f\u3001\u30dc\u30bf\u30f3\u304c\u62bc\u3055\u308c\u308b\u3068\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u304c\u59cb\u307e\u308b\u3088\u3046\u306b\u3001JavaScript\u3067\u8a2d\u5b9a\u3092\u884c\u3044\u307e\u3059\u3002<\/p>\n<p><strong>JavaScript<\/strong><\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\nfunction game(){\r\n  var btn = document.querySelector('.btn'),\r\n      questImg = document.querySelector('.questImg'),\r\n      img = questImg.querySelector('img');\r\n  \r\n img.addEventListener('webkitAnimationEnd', function(){\r\n      questImg.classList.remove('move');\r\n  }, false);\r\n \r\n btn.addEventListener(\"click\", function(){\r\n    questImg.classList.add('move');  \r\n  }, false);\r\n}\r\nwindow.addEventListener(\"DOMContentLoaded\", game, false);\r\n<\/pre>\n<p>\u3068\u308a\u3042\u3048\u305a\u3001\u5fc5\u8981\u6700\u4f4e\u9650\u306b\u8a18\u8ff0\u3057\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n<p>DOMContentLoaded\u3067DOM\u304c\u8aad\u307f\u8fbc\u307f\u5b8c\u4e86\u3057\u305f\u3089\u3001game\u95a2\u6570\u3092\u5b9f\u884c\u3055\u305b\u307e\u3059\u3002<\/p>\n<p>querySelector\u3092\u4f7f\u3044btn \u3068 p\u8981\u7d20\u3067\u3042\u308bquestImg\u3068\u80cc\u666f\u753b\u50cf\u3067\u3042\u308bimg\u3092\u53d6\u5f97\u3057\u3001\u5909\u6570\u306b\u683c\u7d0d\u3002<\/p>\n<p><strong>\uff08querySelector\u306b\u95a2\u3057\u3066\u306f\u3053\u3061\u3089\u3092\u53c2\u7167\u306b\uff09<\/strong><\/p>\n<p><a href=\"https:\/\/www.webcyou.com\/?p=4239\">Javascript querySelector\u3001querySelectorAll<\/a><\/p>\n<p>img\u306b\u5bfe\u3057\u3066addEventListener \u3001webkitAnimationEnd \u3067img\uff08\u80cc\u666f\u753b\u50cf\uff09\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u304c\u7d42\u4e86\u3059\u308b\u3068\u3001\u89aa\u8981\u7d20\u306ep\u3067\u3042\u308bquestImg\u306b\u4ed8\u4e0e\u3055\u308c\u3066\u3044\u308bclass\u201dmove\u201d\u3092\u524a\u9664\u3059\u308b\u3088\u3046\u306b\u8a18\u8ff0\u3057\u3066\u304a\u308a\u307e\u3059\u3002<\/p>\n<p><strong>\uff08webkitAnimationEnd\u306b\u95a2\u3057\u3066\u306f\u3053\u3061\u3089\u3092\u53c2\u7167\u306b\uff09<\/strong><\/p>\n<p><a href=\"https:\/\/www.webcyou.com\/?p=4125\">css3\u3068javascript\u3092\u5229\u7528\u3059\u308b\u969b\u306b\u983b\u7e41\u4f7f\u7528 webkitAnimationEnd\u3068webkitTransitionEnd<\/a><\/p>\n<p>\u307e\u305f\u3001btn\u306b\u5bfe\u3057\u3066addEventListener\u3001click\u3067btn\u304c\u30af\u30ea\u30c3\u30af\u3055\u308c\u308b\u3068p\u8981\u7d20\u3067\u3042\u308bquestImg\u306bclass\u201dmove\u201d\u3092\u4ed8\u4e0e\u3059\u308b\u3088\u3046\u306b\u8a18\u8ff0\u3057\u3066\u304a\u308a\u307e\u3059\u3002<\/p>\n<p>\u3067\u3001\u4f5c\u6210\u3057\u305f\u30c7\u30e2\u306f\u4ee5\u4e0b\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<p><strong><a href=\"http:\/\/webcyou.com\/demo\/js\/webstorage\/index003.html\" target=\"_blank\">\u30c7\u30e2\u30da\u30fc\u30b8<\/a><\/strong><\/p>\n<p><a href=\"http:\/\/webcyou.com\/demo\/js\/webstorage\/index003.html\" target=\"_blank\">http:\/\/webcyou.com\/demo\/js\/webstorage\/index003.html<\/a><\/p>\n<p>\u306a\u3093\u3068\u306a\u304f\u96f0\u56f2\u6c17\u304c\u51fa\u3066\u304d\u307e\u3057\u305f\u306d\uff01<\/p>\n<p>\u3067\u306f\u4eca\u56de\u306f\u3053\u3053\u307e\u3067\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u524d\u56de\u306e HTML5 Web\u30b9\u30c8\u30ec\u30fc\u30b8\u3067\u30c7\u30fc\u30bf\u3092\u4fdd\u5b58 \u305d\u306e\uff12\uff08\u306a\u3093\u3061\u3083\u3063\u3066\u30bd\u30fc\u30b7\u30e3\u30eb\u30b2\u30fc\u30e0\u4f5c\u6210\uff09 \u7d9a\u304d\u306b\u306a\u308a\u307e\u3059\u3002 \u4eca\u56de\u306f\u3001\u753b\u9762\u4ed5\u69d8\u3067\u3042\u308b\u300c\u00a0\u80cc\u666f\u304c\u5909\u5316\u3059\u308b\u3002\uff08\u9032\u3093\u3067\u3044\u308b\u611f\u306e\u30a2\u30cb\u30e1\uff09\u300d\u306e\u4f5c\u6210\u3092\u884c\u3044\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002 CSS3 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[30],"tags":[172,171,59,167,177,176,166,37,47,179,46,120,119,95,39,178],"class_list":["post-4233","post","type-post","status-publish","format-standard","hentry","category-html5","tag-actionscript","tag-android","tag-android-sdk","tag-css","tag-css3","tag-html5","tag-iphone","tag-iphone-","tag-javascript-2","tag-jquery","tag-js","tag-sass","tag-scss","tag-95","tag-39","tag-178"],"_links":{"self":[{"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/posts\/4233","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4233"}],"version-history":[{"count":7,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/posts\/4233\/revisions"}],"predecessor-version":[{"id":4249,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/posts\/4233\/revisions\/4249"}],"wp:attachment":[{"href":"https:\/\/www.webcyou.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4233"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4233"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4233"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}