{"id":4173,"date":"2013-01-22T07:38:22","date_gmt":"2013-01-21T22:38:22","guid":{"rendered":"http:\/\/www.webcyou.com\/?p=4173"},"modified":"2013-01-22T07:38:22","modified_gmt":"2013-01-21T22:38:22","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%ae%ef%bc%92%ef%bc%88%e3%81%aa%e3%82%93%e3%81%a1%e3%82%83%e3%81%a3","status":"publish","type":"post","link":"https:\/\/www.webcyou.com\/?p=4173","title":{"rendered":"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"},"content":{"rendered":"

\u305d\u308c\u3067\u306f\u524d\u56de\u306e<\/p>\n

HTML5 Web\u30b9\u30c8\u30ec\u30fc\u30b8\u3067\u30c7\u30fc\u30bf\u3092\u4fdd\u5b58<\/a><\/h3>\n

\u306e\u7d9a\u304d\u3067\u3001Web\u30b9\u30c8\u30ec\u30fc\u30b8\u3092\u4f7f\u3063\u3066\u300c\u306a\u3093\u3061\u3083\u3063\u3066\u30bd\u30fc\u30b7\u30e3\u30eb\u30b2\u30fc\u30e0\u300d\u3092\u4f5c\u3063\u3066\u307f\u305f\u3044\u3068\u601d\u3044\u307e\u3059\uff01<\/p>\n

\u30ef\u30a4\u30e4\u30fc\u30d5\u30ec\u30fc\u30e0\u4f5c\u6210<\/h4>\n

\u307e\u305a\u306f\u3001\u30ef\u30a4\u30e4\u30fc\u30d5\u30ec\u30fc\u30e0\u4f5c\u6210\u3002\u30ef\u30a4\u30e4\u30fc\u30d5\u30ec\u30fc\u30e0\u306f\u4ee5\u4e0b\u306e\u30b5\u30a4\u30c8\u3092\u5229\u7528\u3057\u3066\u4f5c\u308a\u307e\u3057\u305f\u3002<\/p>\n

\u3068\u3066\u3082\u6271\u3044\u3084\u3059\u304f\u30015\u5206\u307b\u3069\u3067\u4f5c\u6210\u3067\u304d\u307e\u3057\u305f\u3002<\/p>\n

moqups<\/strong><\/p>\n

https:\/\/moqups.com\/<\/a><\/p>\n

<\/a><\/p>\n

\u4f5c\u6210\u3057\u305f\u30ef\u30a4\u30e4\u30fc\u30d5\u30ec\u30fc\u30e0\u306f\u4ee5\u4e0b\u306e\u901a\u308a\u3067\u3059\u3002<\/p>\n

001-\u30af\u30a8\u30b9\u30c8\u9032\u884c\u753b\u9762<\/strong><\/p>\n

\"\"<\/p>\n

\u753b\u9762\u4ed5\u69d8<\/h4>\n

\u6982\u8981\u3068\u3057\u307e\u3057\u3066\u3001<\/p>\n

\u203b \u4e00\u756a\u4e0a\u306b\u306f\u30b2\u30fc\u30e0\u306e\u30bf\u30a4\u30c8\u30ebh\u8981\u7d20\u3092\u914d\u7f6e\u3002<\/p>\n

\u203b \u73fe\u5728\u306e\u30d7\u30ec\u30fc\u30e4\u30fcLv\u306e\u8868\u8a18<\/p>\n

\u203b Quest\u9032\u6357\u3092\u30b2\u30fc\u30b8\u3067\u8868\u793a\u3002<\/p>\n

\u203b Ex\u3092\u30b2\u30fc\u30b8\u3067\u8868\u8a18\u3002Ex\u304cMax\u306b\u306a\u308b\u3068Lv\u304cUP\u3057\u307e\u3059\u3002<\/p>\n

\u203b Gold\u306e\u8868\u8a18\u3002<\/p>\n

\u203b \u30af\u30a8\u30b9\u30c8\u306e\u80cc\u666f\u3002\u30af\u30a8\u30b9\u30c8\u306b\u3088\u3063\u3066\u5165\u308c\u66ff\u3048\u308b\u3002<\/p>\n

\u203b \u30dd\u30c1\u30dd\u30c1\u3059\u308b\u30dc\u30bf\u30f3\u3092\u914d\u7f6e\u3002<\/p>\n

— \u30dc\u30bf\u30f3\u3092\u62bc\u3059\u3053\u3068\u306b\u3088\u3063\u3066\u8d77\u304d\u308b\u51e6\u7406 —<\/strong><\/p>\n

\u203b Quest\u9032\u6357\u306e\u30b2\u30fc\u30b8\u304c\u5897\u3048\u308b<\/p>\n

\u203b Ex\u306e\u30b2\u30fc\u30b8\u304c\u5897\u3048\u308b\u3002\uff08\u3044\u3063\u3071\u3044\u306b\u306a\u308b\u3068Lv\u304cUP\u3002\u30b2\u30fc\u30b8\u306f\u5143\u306b\u623b\u308b\u3002\uff09<\/p>\n

\u203b \u305f\u307e\u306bGold\u304c\u624b\u306b\u5165\u308b\u3002<\/p>\n

\u203b \u80cc\u666f\u304c\u5909\u5316\u3059\u308b\u3002\uff08\u9032\u3093\u3067\u3044\u308b\u611f\u306e\u30a2\u30cb\u30e1\uff09<\/p>\n

— Web\u30b9\u30c8\u30ec\u30fc\u30b8\u3092\u5229\u7528\u3057\u3066\u30d6\u30e9\u30a6\u30b6\u3092\u9589\u3058\u3066\u3082\u6b8b\u308b\u30c7\u30fc\u30bf —<\/strong><\/p>\n

\u203b Lv<\/p>\n

\u203b \u30af\u30a8\u30b9\u30c8\u9032\u6357<\/p>\n

\u203b Ex<\/p>\n

\u203b Gold<\/p>\n

— \u5236\u4f5c\u3059\u308b\u6280\u8853 —<\/strong><\/p>\n

\u203b HTML5<\/p>\n

\u203b CSS3<\/p>\n

\u203b JavaScript<\/p>\n

\u203b \u6c17\u5408<\/p>\n

\u306e\u3088\u3046\u306a\u611f\u3058\u3067\u4f5c\u3063\u3066\u884c\u304d\u305f\u3044\u3068\u601d\u3044\u307e\u3059\uff01<\/p>\n

\u3067\u306f\u65e9\u901fHTML\u306e\u6e96\u5099\u3092<\/p>\n

HTML<\/h4>\n
\r\n<section class="quest001">\r\n  <div class="container">\r\n    <h1>\u306a\u3093\u3061\u3083\u3063\u3066\u30bd\u30fc\u30b7\u30e3\u30eb\u30b2\u30fc\u30e0<\/h1>\r\n    <div class="statusView">\r\n      <ul class="statusLi">\r\n        <li class="lv">Lv:<span class="val">1<\/span><\/li>\r\n        <li class="quest">Quest\u9032\u6357:<span class="Gauge"><b style="width:10%;"><\/b><\/span><span class="val">10<\/span><\/li>\r\n        <li class="ex">Ex:<span class="Gauge"><b style="width:20%;"><\/b><\/span><span class="val">10<\/span><\/li>\r\n        <li class="gold"><span class="val">100<\/span>Gold<\/li>\r\n      <\/ul>  \r\n    <\/div>\r\n    <div class="mainView">\r\n      <p class="questImg"><img src="quest001.png"><\/p>\r\n      <p class="btn"><a href="#">\u9032\u3080<\/a><\/p>\r\n    <\/div>\r\n<\/section>\r\n<\/pre>\n
\u3053\u306e\u3088\u3046\u306a\u611f\u3058\u3067\u7528\u610f\u3002\u30b5\u30af\u3063\u30685\u5206\u7a0b\u3067\u4f5c\u6210\u3002<\/p>\n
\u7d9a\u3044\u3066CSS\u306e\u6e96\u5099\u3092<\/p>\n
\u3056\u3063\u3068Fireworks\u3067\u30c7\u30b6\u30a4\u30f3\u3092\u8d77\u3053\u3057\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n
\"\"<\/a><\/p>\n
\u3053\u3093\u306a\u611f\u3058\u3067\u30b9\u30bf\u30a4\u30ea\u30f3\u30b0\u3057\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n
CSS<\/h4>\n
\r\nsection {\r\n  width: 320px;\r\n  margin: 0 auto;\r\n  overflow: hidden;\r\n}\r\nh1 {\r\n  height: 30px;\r\n  line-height: 30px;\r\n  border-top: #000 1px solid;\r\n  border-bottom: #000 1px solid;\r\n  background: -webkit-gradient(linear, left top, left bottom,from(#969696) ,color-stop(50%, #BDBDBD), to(#969696)); \r\n  font-size: 16px;\r\n  color: #fff;\r\n  text-shadow: #000 0 0 2px,#000 0 0 2px;\r\n  text-align: center;\r\n}\r\n.statusView {\r\n  height: 68px;\r\n  padding: 6px 10px;\r\n  border: #C89A00 1px solid;\r\n  background: #F4F4F4;\r\n}\r\n.statusLi li{\r\n  position: relative;\r\n  clear: both;\r\n  margin-bottom: 6px;\r\n  font-size: 12px;\r\n  font-weight: bold;\r\n}\r\n.Gauge {\r\n  display:inline-block;\r\n  width:175px;\r\n  height:10px;\r\n  border: #c89a00 2px solid;\r\n  -webkit-border-radius: 2px;\r\n  background:-webkit-gradient(linear, left top, left bottom, from(#1f7b00), color-stop(5%, #1a1a1a),color-stop(90%, #1a1a1a), to(#171718));\r\n  overflow:hidden;\r\n  text-align:left;\r\n  white-space:nowrap;\r\n}\r\n.Gauge b{\r\n  display:inline-block;\r\n  height:100%;\r\n  vertical-align:top;\r\n  background:-webkit-gradient(linear, left top, left bottom,from(#537609), color-stop(10%, #37b50b),color-stop(50%, #3abb00),color-stop(95%, #49ac01), to(#4bae03));\r\n}\r\n.ex .Gauge b{\r\n  background:-webkit-gradient(linear, left top, left bottom,from(#2493b1), color-stop(10%, #2493b1),color-stop(50%, #029cd2),color-stop(95%, #0e95b5), to(#0e95b5));\r\n}\r\n.statusLi li.gold { text-align: right; }\r\n.statusLi li.gold .val { padding-right: 6px; }\r\n.statusLi li.quest .Gauge,\r\n.statusLi li.ex .Gauge { \r\n  position: absolute;\r\n  left: 75px;\r\n}\r\n.statusLi li.quest .val,\r\n.statusLi li.ex .val {\r\n  float: right;\r\n  padding-right: 1em;\r\n}\r\n.statusLi li.quest .val::before,\r\n.statusLi li.ex .val::before {\r\n  position: absolute;\r\n  content: \"%\";\r\n  display: block;\r\n  right: 0;\r\n}\r\n.mainView {\r\n  position: relative;\r\n  height: 270px;\r\n}\r\n.btn {\r\n  position: absolute;\r\n  bottom: 10px;\r\n  left: 50%;\r\n  height: 86px;\r\n  width: 86px;\r\n  margin-left: -43px;\r\n  border: #fff 4px solid;\r\n  -webkit-border-radius: 45px;\r\n  background:-webkit-gradient(linear, left top, left bottom,from(#E7414F), color-stop(49.9%, #E7414F),color-stop(50%, #A5000C),to(#A5000C));\r\n  -webkit-box-shadow: rgba(0,0,0,0.6) 0 2px 4px 2px;\r\n}\r\n.btn a{\r\n  display: block;\r\n  font-size: 16px;\r\n  font-weight: bold;\r\n  line-height: 90px;\r\n  text-align: center;\r\n  text-shadow: #000 0 0 2px,#000 0 0 2px;\r\n  text-decoration: none;\r\n  color: #fff;\r\n}\r\n<\/pre>\n
\u3056\u3063\u3068\u3053\u3093\u306a\u611f\u3058\u3067\u3001\u51fa\u6765\u305f\u30da\u30fc\u30b8\u306f\u3053\u306e\u3088\u3046\u306a\u611f\u3058\u3067\u3059\u3002<\/p>\n
\"\"<\/a><\/p>\n
\u30c7\u30e2\u30da\u30fc\u30b8<\/strong><\/p>\n
http:\/\/webcyou.com\/demo\/js\/webstorage\/index001.html<\/a><\/p>\n
\u6b21\u56de\u306fJavaScript\u3092\u8a18\u8ff0\u3057\u3066\u3044\u304d\u307e\u3059\u30fc\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
\u305d\u308c\u3067\u306f\u524d\u56de\u306e HTML5 Web\u30b9\u30c8\u30ec\u30fc\u30b8\u3067\u30c7\u30fc\u30bf\u3092\u4fdd\u5b58 \u306e\u7d9a\u304d\u3067\u3001Web\u30b9\u30c8\u30ec\u30fc\u30b8\u3092\u4f7f\u3063\u3066\u300c\u306a\u3093\u3061\u3083\u3063\u3066\u30bd\u30fc\u30b7\u30e3\u30eb\u30b2\u30fc\u30e0\u300d\u3092\u4f5c\u3063\u3066\u307f\u305f\u3044\u3068\u601d\u3044\u307e\u3059\uff01 \u30ef\u30a4\u30e4\u30fc\u30d5\u30ec\u30fc\u30e0\u4f5c\u6210 \u307e\u305a\u306f\u3001\u30ef\u30a4\u30e4\u30fc\u30d5\u30ec\u30fc\u30e0\u4f5c\u6210\u3002\u30ef\u30a4\u30e4\u30fc\u30d5\u30ec\u30fc […]<\/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":[171,59,177,168,176,40,166,37,95,178],"class_list":["post-4173","post","type-post","status-publish","format-standard","hentry","category-html5","tag-android","tag-android-sdk","tag-css3","tag-html","tag-html5","tag-ios-sdk","tag-iphone","tag-iphone-","tag-95","tag-178"],"_links":{"self":[{"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/posts\/4173","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=4173"}],"version-history":[{"count":5,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/posts\/4173\/revisions"}],"predecessor-version":[{"id":4182,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/posts\/4173\/revisions\/4182"}],"wp:attachment":[{"href":"https:\/\/www.webcyou.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4173"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4173"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4173"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}