{"id":1232,"date":"2014-10-05T15:05:35","date_gmt":"2014-10-05T06:05:35","guid":{"rendered":"http:\/\/www.dream-net.org\/blog\/?p=1232"},"modified":"2014-10-05T15:05:35","modified_gmt":"2014-10-05T06:05:35","slug":"%e3%80%90javascript%e3%80%91css3%e3%81%ab%e8%87%aa%e5%8b%95%e3%81%a7%e3%80%81%e5%bf%85%e8%a6%81%e6%9c%80%e4%bd%8e%e9%99%90%e3%81%ae%e3%83%99%e3%83%b3%e3%83%80%e3%83%bc%e3%83%97%e3%83%ac%e3%83%95","status":"publish","type":"post","link":"https:\/\/dream-net.org\/blog\/?p=1232","title":{"rendered":"\u3010Javascript\u3011CSS3\u306b\u81ea\u52d5\u3067\u3001\u5fc5\u8981\u6700\u4f4e\u9650\u306e\u30d9\u30f3\u30c0\u30fc\u30d7\u30ec\u30d5\u30a3\u30c3\u30af\u30b9\u3092\u4ed8\u3051\u3066\u304f\u308c\u308b\u30d7\u30e9\u30b0\u30a4\u30f3\u300ccssFX\u300d"},"content":{"rendered":"<div id=\"toc_container\" class=\"no_bullets\"><p class=\"toc_title\">Contents<\/p><ul class=\"toc_list\"><li><a href=\"#JavascriptCSS3cssFX\"><span class=\"toc_number toc_depth_1\">1<\/span> \u3010Javascript\u3011CSS3\u306b\u81ea\u52d5\u3067\u3001\u5fc5\u8981\u6700\u4f4e\u9650\u306e\u30d9\u30f3\u30c0\u30fc\u30d7\u30ec\u30d5\u30a3\u30c3\u30af\u30b9\u3092\u4ed8\u3051\u3066\u304f\u308c\u308b\u30d7\u30e9\u30b0\u30a4\u30f3\u300ccssFX\u300d<\/a><\/li><li><a href=\"#cssFX\"><span class=\"toc_number toc_depth_1\">2<\/span> cssFX<\/a><\/li><li><a href=\"#HEAD\"><span class=\"toc_number toc_depth_1\">3<\/span> \u25c6HEAD\u5185<\/a><\/li><\/ul><\/div>\n<h2 style=\"color: #0083b9; background: #fffd73;\"><span id=\"JavascriptCSS3cssFX\">\u3010Javascript\u3011CSS3\u306b\u81ea\u52d5\u3067\u3001\u5fc5\u8981\u6700\u4f4e\u9650\u306e\u30d9\u30f3\u30c0\u30fc\u30d7\u30ec\u30d5\u30a3\u30c3\u30af\u30b9\u3092\u4ed8\u3051\u3066\u304f\u308c\u308b\u30d7\u30e9\u30b0\u30a4\u30f3\u300ccssFX\u300d<\/span><\/h2>\n<p>\u30d9\u30f3\u30c0\u30fc\u30d7\u30ec\u30d5\u30a3\u30c3\u30af\u30b9\u5bfe\u5fdc\u304c\u9762\u5012\u306acss3\u306egradients\u3084box-shadow\u306a\u3069\u3001\u3069\u306e\u3088\u3046\u306b\u8a18\u8ff0\u3057\u3066\u3044\u307e\u3059\u304b\uff1f<br \/>\n\u5168\u90e8\u624b\u6253\u3061\u3067\u3001\u3068\u3044\u3046\u65b9\u306f\u3055\u3059\u304c\u306b\u3044\u306a\u3044\u306e\u3067\u306f\u306a\u3044\u304b\u3068\u601d\u3044\u307e\u3059\u304c\u3001\u3069\u3053\u304b\u306e\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30da\u3057\u305f\u308a\u3001\u30b8\u30a7\u30cd\u30ec\u30fc\u30bf\u30fc\u3067\u751f\u6210\u3057\u305f\u308a\u3001\u3068\u3044\u3046\u624b\u9593\u3092\u304b\u3051\u3066\u3044\u308b\u306a\u3089\u3001\u3053\u306ecssFX\u304c\u304b\u306a\u308a\u30aa\u30b9\u30b9\u30e1\u3067\u3059\u3002<\/p>\n<h2 style=\"color: #0083b9;\"><span id=\"cssFX\">cssFX<\/span><\/h2>\n<p><a href=\"http:\/\/imsky.github.io\/cssFx\/\" target=\"_blank\">http:\/\/imsky.github.io\/cssFx\/<\/a><br \/>\n<img decoding=\"async\" src=\"http:\/\/www.dream-net.org\/blog\/wp-content\/uploads\/2014\/10\/012.jpg\" \/><\/p>\n<p>\u5bfe\u5fdc\u30d6\u30e9\u30a6\u30b6<br \/>\n\u2022\tFirefox 3+<br \/>\n\u2022\tChrome 1+<br \/>\n\u2022\tInternet Explorer 6+<br \/>\n\u2022\tSafari 3+<br \/>\n\u2022\tOpera 9+<\/p>\n<p>\u3053\u306ecssFX\u306e\u30b9\u30b4\u3044\u6240\u306f\u3001\u5404\u30d6\u30e9\u30a6\u30b6\u306b\u5bfe\u3057\u3001\u5fc5\u8981\u306a\u30d7\u30ec\u30d5\u30a3\u30c3\u30af\u30b9\u306e\u307f\u3092\u4ed8\u4e0e\u3057\u3066\u304f\u308c\u308b\u3068\u3044\u3046\u3068\u3053\u308d\u3002<br \/>\n\u5b9f\u969b\u306e\u3068\u3053\u308d\u3001\u30d7\u30ec\u30d5\u30a3\u30c3\u30af\u30b9\u3092\u4ed8\u4e0e\u3057\u306a\u304f\u3082\u3044\u3044\u30d7\u30ed\u30d1\u30c6\u30a3\u306b\u5bfe\u3057\u3066\u3082\u3001\u5168\u3066\u306e\u30d7\u30ec\u30d5\u30a3\u30c3\u30af\u30b9\u3092\u4ed8\u3051\u3066\u3057\u307e\u3063\u3066\u3044\u308b\u30b1\u30fc\u30b9\u3082\u3042\u308b\u306e\u3067\u306f\u306a\u3044\u3067\u3057\u3087\u3046\u304b\u3002<br \/>\n\u305d\u308c\u3067\u306f\u3001\u3053\u306ecssFX\u304c\u5404\u30d6\u30e9\u30a6\u30b6\u4e0a\u3067\u3069\u306e\u3088\u3046\u306b\u52d5\u304f\u306e\u304b\u3001\u30c6\u30b9\u30c8\u3092\u3057\u3066\u307f\u307e\u3059\u3002<\/p>\n<p>\u307e\u305a\u306fcssFX\u306e\u30b5\u30a4\u30c8\u304b\u3089\u30d5\u30a1\u30a4\u30eb\u3092\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3002<\/p>\n<p>\u30d5\u30a1\u30a4\u30eb\u3092\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3057\u3001css\u306e\u76f4\u4e0b\u3067\u8aad\u307f\u8fbc\u307f\u307e\u3059\u3002<br \/>\n\u307e\u305f\u3001css\u306b\u306fclass=&#8221;cssfx&#8221;\u3092\u4ed8\u4e0e\u3057\u307e\u3059\u3002<\/p>\n<h2 style=\"color: #0083b9;\"><span id=\"HEAD\">\u25c6HEAD\u5185<\/span><\/h2>\n<link rel=\"stylesheet\" href=\"sample.css\" class=\"cssfx\" \/>\n<script type=\"text\/javascript\" src=\"cssfx.js\"><\/script> <\/p>\n<p>\u5143\u3068\u306a\u308bcss\u306f\u3001\u4e0b\u8a18\u306e\u3088\u3046\u306b\u8a18\u8ff0\u3057\u307e\u3057\u305f\u3002<\/p>\n<pre >\r\n\/*css*\/\r\n.box{ \t\r\nwidth:300px; \t\r\nheight:300px; \t\r\nmargin: 0 auto 0 auto; \t\r\ntransition:all 0.5s ease-out; \t\r\nopacity:0.5; \t\r\nborder-radius:6px; \t\r\nbackground: #f9f9f9;     \r\nbackground: linear-gradient(to bottom, #ffffff 0%, #f2f2f2 100%); \r\n}\r\n<\/pre>\n<p>\u5404\u7a2e\u30d6\u30e9\u30a6\u30b6\u3067\u3001\u30c4\u30fc\u30eb\u3092\u4f7f\u7528\u3057\u3066\u78ba\u8a8d\u3057\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n<p>\u30fbfirefox<br \/>\n<img decoding=\"async\" src=\"http:\/\/www.dream-net.org\/blog\/wp-content\/uploads\/2014\/10\/023.jpg\" \/><\/p>\n<p>\u30fbchrome<br \/>\n<img decoding=\"async\" src=\"http:\/\/www.dream-net.org\/blog\/wp-content\/uploads\/2014\/10\/032.jpg\" \/><\/p>\n<p>\u30fbIE9<br \/>\n<img decoding=\"async\" src=\"http:\/\/www.dream-net.org\/blog\/wp-content\/uploads\/2014\/10\/042.jpg\" \/><\/p>\n<p>\u4ed8\u4e0e\u3055\u308c\u3066\u3044\u308b\u30d7\u30ec\u30d5\u30a3\u30c3\u30af\u30b9\u304c\u305d\u308c\u305e\u308c\u9055\u3046\u306e\u304c\u5206\u304b\u308a\u307e\u3059\u3002<br \/>\n\u3055\u3089\u306b\u3001\u30d6\u30e9\u30a6\u30b6\u306e\u30d0\u30fc\u30b8\u30e7\u30f3\u3067\u3082\u4ed8\u4e0e\u3055\u308c\u308b\u30d7\u30ed\u30d1\u30c6\u30a3\u306f\u7570\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>IE9\u3067\u306f\u3001\u4e0b\u8a18\u306e\u90e8\u5206\u304c\u8ffd\u52a0\u3055\u308c\u3066\u3044\u308b\u306e\u307f\u3067\u3057\u305f\u3002<br \/>\nprogid:DXImageTransform.Microsoft.gradient(startColorstr=&#8217;#ffffff&#8217;, endColorstr=&#8217;#f2f2f2&#8242;,GradientType=0)<\/p>\n<p>\u3053\u308c\u3092IE8\u3067\u78ba\u8a8d\u3057\u3066\u307f\u308b\u3068\u30fb\u30fb\u30fb<\/p>\n<p>\u30fbIE8<br \/>\n<img decoding=\"async\" src=\"http:\/\/www.dream-net.org\/blog\/wp-content\/uploads\/2014\/10\/052.jpg\" \/><\/p>\n<p>gradients\u306e\u4ed6\u306b\u3001<br \/>\n\u30fbopacity<br \/>\n\u30fbborder-radius<br \/>\n\u30fbtransition<br \/>\n\u306a\u3069\u304c\u8ffd\u52a0\u3055\u308c\u3066\u3044\u308b\u306e\u304c\u5206\u304b\u308a\u307e\u3059\u3002<\/p>\n<p>\u5fc5\u8981\u306a\u30d6\u30e9\u30a6\u30b6\u306b\u5fc5\u8981\u306a\u30d7\u30ec\u30d5\u30a3\u30c3\u30af\u30b9\u306e\u307f\u3092\u4ed8\u4e0e\u3067\u304d\u3001\u4e0d\u8981\u306b\u306a\u308c\u3070JS\u306e\u8aad\u307f\u8fbc\u307f\u3092\u524a\u9664\u3059\u308c\u3070OK\u3002<br \/>\n\u30b7\u30f3\u30d7\u30eb\u3067\u7121\u99c4\u304c\u3042\u308a\u307e\u305b\u3093\u3002<br \/>\n\u6a5f\u4f1a\u304c\u3042\u308c\u3070\u3001\u305c\u3072\u4f7f\u3063\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Contents1 \u3010Javascript\u3011CSS3\u306b\u81ea\u52d5\u3067\u3001\u5fc5\u8981\u6700\u4f4e\u9650\u306e\u30d9\u30f3\u30c0\u30fc\u30d7\u30ec\u30d5\u30a3\u30c3\u30af\u30b9\u3092\u4ed8\u3051\u3066\u304f\u308c\u308b\u30d7\u30e9\u30b0\u30a4\u30f3\u300ccssFX\u300d2 cssFX3 \u25c6HEAD\u5185 \u3010Javascript\u3011CSS3\u306b\u81ea\u52d5\u3067\u3001\u5fc5\u8981\u6700\u4f4e\u9650\u306e [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1227,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[50,49,45],"tags":[],"class_list":["post-1232","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-jquery","category-web"],"_links":{"self":[{"href":"https:\/\/dream-net.org\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1232","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dream-net.org\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dream-net.org\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dream-net.org\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dream-net.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1232"}],"version-history":[{"count":1,"href":"https:\/\/dream-net.org\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1232\/revisions"}],"predecessor-version":[{"id":1233,"href":"https:\/\/dream-net.org\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1232\/revisions\/1233"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dream-net.org\/blog\/index.php?rest_route=\/wp\/v2\/media\/1227"}],"wp:attachment":[{"href":"https:\/\/dream-net.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1232"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dream-net.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1232"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dream-net.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1232"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}