{"id":826,"date":"2015-03-03T14:45:36","date_gmt":"2015-03-03T05:45:36","guid":{"rendered":"http:\/\/css.programming.jp\/?p=826"},"modified":"2015-03-04T09:01:11","modified_gmt":"2015-03-04T00:01:11","slug":"%e3%82%b5%e3%83%a0%e3%83%8d%e3%82%a4%e3%83%ab%e7%94%a8%e3%83%ad%e3%83%bc%e3%83%ab%e3%82%aa%e3%83%bc%e3%83%90%e3%83%bc%e5%8a%b9%e6%9e%9c%ef%bc%88%ef%bc%92%ef%bc%89","status":"publish","type":"post","link":"https:\/\/css.programming.jp\/?p=826","title":{"rendered":"\u30b5\u30e0\u30cd\u30a4\u30eb\u7528\u30ed\u30fc\u30eb\u30aa\u30fc\u30d0\u30fc\u52b9\u679c\uff08\uff12\uff09"},"content":{"rendered":"<p>\u3000\u524d\u56de\u306e\u6295\u7a3f\u306b\u7d9a\u304d\u3001\u30b5\u30e0\u30cd\u30a4\u30eb\u7528\u30de\u30a6\u30b9\u30aa\u30fc\u30d0\u30fc\u52b9\u679c\u3067\u3042\u308b\u304c\u3001\u30de\u30a6\u30b9\u30aa\u30fc\u30d0\u30fc\u3067\u56f3\u4e0a\u306b\u30c6\u30ad\u30b9\u30c8\u3092\u8868\u793a\u3055\u305b\u308b\u3088\u3046\u306b\u3057\u305f\u306e\u3067\u3001\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u7528\u306b\u3082\u9069\u7528\u3067\u304d\u308b\u3002\u3059\u306a\u308f\u3061\u3001\u62e1\u5927\u753b\u50cf\u8868\u793a\u306e\u305f\u3081\u306e\u30b5\u30e0\u30cd\u30a4\u30eb\u306b\u3082\u5fdc\u7528\u3067\u304d\u308b\u3057\u3001\u30ea\u30f3\u30af\u30da\u30fc\u30b8\u30b8\u30e3\u30f3\u30d7\u7528\u306e\u30b5\u30e0\u30cd\u30a4\u30eb\u306b\u3082\u5fdc\u7528\u3067\u304d\u308b\u3082\u306e\u3067\u3042\u308b\u3002<br \/>\n\u3000\u30b5\u30f3\u30d7\u30eb\u306f\u3001\u30de\u30a6\u30b9\u30aa\u30fc\u30d0\u30fc\u3067\u51fa\u73fe\u3059\u308b\u30b9\u30af\u30ea\u30fc\u30f3\u306e\u51fa\u73fe\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u4e8c\u901a\u308a\u3092\u3001\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306a\u3057\u3068\u4e26\u3079\u3066\u8868\u793a\u3057\u305f\u3002<\/p>\n<h4>\u30b5\u30f3\u30d7\u30eb(DEMO)<\/h4>\n<p><a href=\"#\"><\/p>\n<div class=\"frame\"><img decoding=\"async\" src=\"wp-images\/img3\/yari.jpg\" \/><\/p>\n<div class=\"screen\"><\/div>\n<p>  <span class=\"title\">\u69cd\u30f6\u5cb3<\/span><br \/>\n  <span class=\"note\">2008\u5e74\u32c6\u672b\u3001\u4e2d\u623f\u6e29\u6cc9\uff0d\u71d5\u5c71\u8358\uff0d\u5927\u5929\u4e95\u5cb3\uff0d\u69cd\u30f6\u5cb3<\/span>\n<\/div>\n<p><\/a><br \/>\n<a href=\"#\"><\/p>\n<div class=\"frame\"><img decoding=\"async\" src=\"wp-images\/img3\/turugi.jpg\" \/><\/p>\n<div class=\"screen2\"><\/div>\n<p>  <span class=\"title\">\u5263\u3000\u5cb3<\/span><br \/>\n  <span class=\"note\">2011\u5e74\u32c622\u65e5\u3001\u5ba4\u5802\uff0d\u5225\u5c71\u4e57\u8d8a\uff0d\u5263\u5c71\u58ee\uff0d\u5263\u5cb3\u5f80\u5fa9<\/span>\n<\/div>\n<p><\/a><br \/>\n<a href=\"#\"><\/p>\n<div class=\"frame\"><img decoding=\"async\" src=\"wp-images\/img3\/sirouma.jpg\" \/><\/p>\n<div class=\"screen3\"><\/div>\n<p>  <span class=\"title\">\u767d\u99ac\u5cb3<\/span><br \/>\n  <span class=\"note\">2012\u5e74\u32c6\u672b\u3001\u6802\u6c60\u9ad8\u539f\uff0d\u767d\u99ac\u5927\u6c60\uff0d\u767d\u99ac\u5cb3<\/span>\n<\/div>\n<p><\/a><\/p>\n<div style=\"clear:left;\"><\/div>\n<style type=\"text\/css\">\nbody {\n\tfont-family:\"\u30d2\u30e9\u30ae\u30ce\u89d2\u30b4 Pro W3\", \"Hiragino Kaku Gothic Pro\", \"\u30e1\u30a4\u30ea\u30aa\", Meiryo, Osaka, \"\uff2d\uff33 \uff30\u30b4\u30b7\u30c3\u30af\", \"MS PGothic\", sans-serif;\n}\na {\n\ttext-decoration:none;\n}\n.frame {\n\tposition:relative;\n\tfloat:left;\n}\n.frame img {\n\tborder:0;\n}\n.frame:hover > .title {\n\tdisplay:block;\n}\n.frame:hover > .note {\n\tdisplay:block;\n}\n.title {\n\tposition:absolute;\n\ttop:15px;left:20px;\n\tcolor:#FFF;\n\tfont-weight:bold;\n\tfont-size:24px;\n\tdisplay:none;\n}\n.note {\n\tposition:absolute;\n\ttop:150px;left:10px;\n\tcolor:#FFF;\n\tfont-size:12px;\n\tdisplay:none;\n}\n.screen {\n\tbackground-color:rgba(204,51,51,0);\n\tposition:absolute;\n\ttop:0;left:0;\n\twidth:200px;\n\theight:200px;\n}\n.frame:hover > .screen {\n\tbackground-color:rgba(204,51,51,0.5);\n\tbox-shadow: 0 0 0 5px #930 inset;\n\t-webkit-box-shadow: 0 0 0 5px #930 inset;\n}\n.screen2 {\n\tbackground-color:rgba(204,51,51,0);\n\tposition:absolute;\n\ttop:0;left:0;\n\twidth:200px;\n\theight:200px;\n\ttransition:all ease-in 0.3s;\n\t-webkit-transition:all ease-in 0.3s;\n}\n.frame:hover > .screen2 {\n\tbackground-color:rgba(204,51,51,0.5);\n\tbox-shadow: 0 0 0 5px #930 inset;\n\t-webkit-box-shadow: 0 0 0 5px #930 inset;\n}\n.frame:hover > .screen3 {\n\ttop:0;left:0;\n\twidth:190px;\n\theight:190px;\n\tbackground-color:rgba(204,51,51,0.4);\n\tborder-color:#930;\n}\n.frame:hover > .title3 {\n\topacity:1;\n}\n.frame:hover > .note3 {\n\topacity:1;\n}\n.title3 {\n\tposition:absolute;\n\ttop:15px;left:20px;\n\tcolor:#FFF;\n\tfont-weight:bold;\n\tfont-size:24px;\n\topacity:0;\n\ttransition:all ease-in 0.3s;\n\t-webkit-transition:all ease-in 0.3s;\n}\n.note3 {\n\tposition:absolute;\n\ttop:150px;left:10px;\n\tcolor:#FFF;\n\tfont-size:12px;\n\topacity:0;\n\ttransition:all ease-in 0.3s;\n\t-webkit-transition:all ease-in 0.3s;\n}\n.screen3 {\n\tposition:absolute;\n\ttop:100px;left:100px;\n\twidth:0;height:0;\n\tbackground-color:rgba(204,51,51,0);\n\tborder:#930 5px solid;\n\tborder-color:transparent;\n\ttransition:all ease-in 0.3s;\n\t-webkit-transition:all ease-in 0.3s;\n}\n<\/style>\n<p><\/p>\n<h4>\u672c\u30b5\u30f3\u30d7\u30eb\u8868\u793a\u7528\uff28\uff34\uff2d\uff2c<\/h4>\n<pre>\r\n&lt;a href=\"#\"&gt;\r\n&lt;div class=\"frame\"&gt;&lt;img src=\"images\/yari.jpg\" \/&gt;\r\n  &lt;div class=\"screen\"&gt;&lt;\/div&gt;\r\n  &lt;span class=\"title\"&gt;\u69cd\u30f6\u5cb3&lt;\/span&gt;\r\n  &lt;span class=\"note\"&gt;2008\u5e74?\u672b\u3001\u4e2d\u623f\u6e29\u6cc9\uff0d\u71d5\u5c71\u8358\uff0d\u5927\u5929\u4e95\u5cb3\uff0d\u69cd\u30f6\u5cb3&lt;\/span&gt;\r\n&lt;\/div&gt;&lt;\/a&gt;\r\n&lt;a href=\"#\"&gt;\r\n&lt;div class=\"frame\"&gt;&lt;img src=\"images\/turugi.jpg\" \/&gt;\r\n  &lt;div class=\"screen2\"&gt;&lt;\/div&gt;\r\n  &lt;span class=\"title\"&gt;\u5263\u3000\u5cb3&lt;\/span&gt;\r\n  &lt;span class=\"note\"&gt;2011\u5e74?22\u65e5\u3001\u5ba4\u5802\uff0d\u5225\u5c71\u4e57\u8d8a\uff0d\u5263\u5c71\u58ee\uff0d\u5263\u5cb3\u5f80\u5fa9&lt;\/span&gt;\r\n&lt;\/div&gt;&lt;\/a&gt;\r\n&lt;a href=\"#\"&gt;\r\n&lt;div class=\"frame\"&gt;&lt;img src=\"images\/sirouma.jpg\" \/&gt;\r\n  &lt;div class=\"screen3\"&gt;&lt;\/div&gt;\r\n  &lt;span class=\"title3\"&gt;\u767d\u99ac\u5cb3&lt;\/span&gt;\r\n  &lt;span class=\"note3\"&gt;2012\u5e74?\u672b\u3001\u6802\u6c60\u9ad8\u539f\uff0d\u767d\u99ac\u5927\u6c60\uff0d\u767d\u99ac\u5cb3&lt;\/span&gt;\r\n&lt;\/div&gt;&lt;\/a&gt;\r\n<\/pre>\n<h4>\u300c\u69cd\u30f6\u5cb3\u300d\u30b5\u30f3\u30d7\u30eb\u8868\u793a\u7528\uff23\uff33\uff33<\/h4>\n<pre>\r\nbody {\r\n\tfont-family:\"\u30d2\u30e9\u30ae\u30ce\u89d2\u30b4 Pro W3\", \"Hiragino Kaku Gothic Pro\", \"\u30e1\u30a4\u30ea\u30aa\", Meiryo, Osaka, \"\uff2d\uff33 \uff30\u30b4\u30b7\u30c3\u30af\", \"MS PGothic\", sans-serif;\r\n}\r\na {\r\n\ttext-decoration:none;\r\n}\r\n.frame {\r\n\tposition:relative;\r\n\tfloat:left;\r\n}\r\n.frame img {\r\n\tborder:0;\r\n}\r\n.frame:hover > .screen {\r\n\tbackground-color:rgba(204,51,51,0.5);\r\n\tbox-shadow: 0 0 0 5px #930 inset;\r\n}\r\n.frame:hover > .title {\r\n\tdisplay:block;\r\n}\r\n.frame:hover > .note {\r\n\tdisplay:block;\r\n}\r\n.title {\r\n\tposition:absolute;\r\n\ttop:15px;left:20px;\r\n\tcolor:#FFF;\r\n\tfont-weight:bold;\r\n\tfont-size:24px;\r\n\tdisplay:none;\r\n}\r\n.note {\r\n\tposition:absolute;\r\n\ttop:150px;left:10px;\r\n\tcolor:#FFF;\r\n\tfont-size:12px;\r\n\tdisplay:none;\r\n}\r\n.screen {\r\n\tbackground-color:rgba(204,51,51,0);\r\n\tposition:absolute;\r\n\ttop:0;left:0;\r\n\twidth:200px;\r\n\theight:200px;\r\n}\r\n<\/pre>\n<h4>\u300c\u5263\u5cb3\u300d\u30b5\u30f3\u30d7\u30eb\u8868\u793a\u7528\uff23\uff33\uff33<\/h4>\n<pre>\r\nbody {\r\n\tfont-family:\"\u30d2\u30e9\u30ae\u30ce\u89d2\u30b4 Pro W3\", \"Hiragino Kaku Gothic Pro\", \"\u30e1\u30a4\u30ea\u30aa\", Meiryo, Osaka, \"\uff2d\uff33 \uff30\u30b4\u30b7\u30c3\u30af\", \"MS PGothic\", sans-serif;\r\n}\r\na {\r\n\ttext-decoration:none;\r\n}\r\n.frame {\r\n\tposition:relative;\r\n\tfloat:left;\r\n}\r\n.frame img {\r\n\tborder:0;\r\n}\r\n.frame:hover > .screen {\r\n\tbackground-color:rgba(204,51,51,0.5);\r\n\tbox-shadow: 0 0 0 5px #930 inset;\r\n}\r\n.frame:hover > .title {\r\n\tdisplay:block;\r\n}\r\n.frame:hover > .note {\r\n\tdisplay:block;\r\n}\r\n.title {\r\n\tposition:absolute;\r\n\ttop:15px;left:20px;\r\n\tcolor:#FFF;\r\n\tfont-weight:bold;\r\n\tfont-size:24px;\r\n\tdisplay:none;\r\n}\r\n.note {\r\n\tposition:absolute;\r\n\ttop:150px;left:10px;\r\n\tcolor:#FFF;\r\n\tfont-size:12px;\r\n\tdisplay:none;\r\n}\r\n.screen {\r\n\tbackground-color:rgba(204,51,51,0);\r\n\tposition:absolute;\r\n\ttop:0;left:0;\r\n\twidth:200px;\r\n\theight:200px;\r\n\ttransition:all ease-in 0.3s;\r\n\t-webkit-transition:all ease-in 0.3s;\r\n}\r\n<\/pre>\n<h4>\u300c\u767d\u99ac\u5cb3\u300d\u30b5\u30f3\u30d7\u30eb\u8868\u793a\u7528\uff23\uff33\uff33<\/h4>\n<pre>\r\nbody {\r\n\tfont-family:\"\u30d2\u30e9\u30ae\u30ce\u89d2\u30b4 Pro W3\", \"Hiragino Kaku Gothic Pro\", \"\u30e1\u30a4\u30ea\u30aa\", Meiryo, Osaka, \"\uff2d\uff33 \uff30\u30b4\u30b7\u30c3\u30af\", \"MS PGothic\", sans-serif;\r\n}\r\na {\r\n\ttext-decoration:none;\r\n}\r\n.frame {\r\n\tposition:relative;\r\n\tfloat:left;\r\n}\r\n.frame img {\r\n\tborder:0;\r\n}\r\n.frame:hover > .screen {\r\n\ttop:0;left:0;\r\n\twidth:200px;height:200px;\r\n\tbackground-color:rgba(204,51,51,0.4);\r\n\tbox-shadow: 0 0 0 5px #930 inset;\r\n}\r\n.frame:hover > .title {\r\n\topacity:1;\r\n}\r\n.frame:hover > .note {\r\n\topacity:1;\r\n}\r\n.title {\r\n\tposition:absolute;\r\n\ttop:15px;left:20px;\r\n\tcolor:#FFF;\r\n\tfont-weight:bold;\r\n\tfont-size:24px;\r\n\topacity:0;\r\n\ttransition:all ease-in 0.3s;\r\n\t-webkit-transition:all ease-in 0.3s;\r\n}\r\n.note {\r\n\tposition:absolute;\r\n\ttop:150px;left:10px;\r\n\tcolor:#FFF;\r\n\tfont-size:12px;\r\n\topacity:0;\r\n\ttransition:all ease-in 0.3s;\r\n\t-webkit-transition:all ease-in 0.3s;\r\n}\r\n.screen {\r\n\tposition:absolute;\r\n\ttop:100px;left:100px;\r\n\twidth:0;height:0;\r\n\tbackground-color:rgba(204,51,51,0);\r\n\ttransition:all ease-in 0.3s;\r\n\t-webkit-transition:all ease-in 0.3s;\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\u3000\u524d\u56de\u306e\u6295\u7a3f\u306b\u7d9a\u304d\u3001\u30b5\u30e0\u30cd\u30a4\u30eb\u7528\u30de\u30a6\u30b9\u30aa\u30fc\u30d0\u30fc\u52b9\u679c\u3067\u3042\u308b\u304c\u3001\u30de\u30a6\u30b9\u30aa\u30fc\u30d0\u30fc\u3067\u56f3\u4e0a\u306b\u30c6\u30ad\u30b9\u30c8\u3092\u8868\u793a\u3055\u305b\u308b\u3088\u3046\u306b\u3057\u305f\u306e\u3067\u3001\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u7528\u306b\u3082\u9069\u7528\u3067\u304d\u308b\u3002\u3059\u306a\u308f\u3061\u3001\u62e1\u5927\u753b\u50cf\u8868\u793a\u306e\u305f\u3081\u306e\u30b5\u30e0\u30cd\u30a4\u30eb\u306b\u3082\u5fdc\u7528\u3067\u304d\u308b\u3057\u3001\u30ea\u30f3\u30af\u30da\u30fc\u30b8 &hellip; <a class=\"more-link\" href=\"https:\/\/css.programming.jp\/?p=826\">\u7d9a\u304d\u3092\u8aad\u3080 <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-826","post","type-post","status-publish","format-standard","hentry","category-7"],"_links":{"self":[{"href":"https:\/\/css.programming.jp\/index.php?rest_route=\/wp\/v2\/posts\/826","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/css.programming.jp\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css.programming.jp\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css.programming.jp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/css.programming.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=826"}],"version-history":[{"count":14,"href":"https:\/\/css.programming.jp\/index.php?rest_route=\/wp\/v2\/posts\/826\/revisions"}],"predecessor-version":[{"id":840,"href":"https:\/\/css.programming.jp\/index.php?rest_route=\/wp\/v2\/posts\/826\/revisions\/840"}],"wp:attachment":[{"href":"https:\/\/css.programming.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=826"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css.programming.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=826"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css.programming.jp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=826"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}