{"id":489,"date":"2014-04-08T11:38:21","date_gmt":"2014-04-08T02:38:21","guid":{"rendered":"http:\/\/css.programming.jp\/?p=489"},"modified":"2016-12-11T15:42:50","modified_gmt":"2016-12-11T06:42:50","slug":"%e3%82%b5%e3%83%a0%e3%83%8d%e3%82%a4%e3%83%ab%e3%81%ae%e3%83%a1%e3%83%88%e3%83%ad%e7%94%bb%e9%9d%a2%e9%a2%a8%e9%85%8d%e7%bd%ae","status":"publish","type":"post","link":"https:\/\/css.programming.jp\/?p=489","title":{"rendered":"\u30b5\u30e0\u30cd\u30a4\u30eb\u306e\u30e1\u30c8\u30ed\u753b\u9762\u98a8\u914d\u7f6e"},"content":{"rendered":"<p>\u3000\u30b5\u30e0\u30cd\u30a4\u30eb\u3092Metro\u753b\u9762\u98a8\u306e\u30bf\u30a4\u30eb\u306e\u88cf\u306b\u914d\u7f6e\u3057\u3066\u304a\u304d\u3001\u30de\u30a6\u30b9\u30aa\u30fc\u30d0\u30fc\u3067\u56de\u8ee2\u3057\u306a\u304c\u3089\u767b\u5834\u3057\u3001\u305d\u306e\u30af\u30ea\u30c3\u30af\u3067\u62e1\u5927\u5199\u771f\u304c\u8868\u793a\u3055\u308c\u308b\u30bf\u30a4\u30d7\u306e\u30d5\u30a9\u30c8\u30ae\u30e3\u30e9\u30ea\u30fc\u3067\u3042\u308b\u3002\u3053\u3053\u3067\u306f\u5199\u771f\u8868\u793a\u7528\u3068\u306a\u3063\u3066\u3044\u308b\u304c\u3001\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u306b\u3082\u4f7f\u3048\u308b\u3057\u3001\u3080\u3057\u308d\u305d\u3061\u3089\u306b\u5411\u3044\u3066\u3044\u308b\u304b\u3082\u3057\u308c\u306a\u3044\u3002<br \/>\n\u3000\u30bf\u30a4\u30c8\u30eb\u306e\u8a18\u8ff0\u3055\u308c\u305f\u30bf\u30a4\u30eb\u304c\u8868\u306b\u306a\u3063\u3066\u3044\u3066\u3001\u88cf\u306b\u63a7\u3048\u3066\u3044\u308b\u30b5\u30e0\u30cd\u30a4\u30eb\u5199\u771f\u3092\u3001rotateY\u3067\u56de\u8ee2\u3055\u305b\u306a\u304c\u3089\u88cf\u304b\u3089\u767b\u5834\u3055\u305b\u3066\u3044\u308b\uff08\u56de\u8ee2\u89d290\u5ea6\u3067\u5207\u66ff\uff09\u3002\u3053\u306e\u6642\u3001skewY\u3067\u50be\u659c\u3092\u3064\u3051\u3066\u3001\uff13D\u98a8\u306e\u8da3\u3092\u51fa\u3057\u3066\u3044\u308b\uff08\u3064\u3082\u308a\uff09\u3002<br \/>\n\u3000\u306a\u304a\u3001\u672c\u30b5\u30f3\u30d7\u30eb\u306b\u304a\u3044\u3066\u306f\u3001\u3068\u304d\u305f\u307e chrome \u3067\u82e5\u5e72\u52d5\u4f5c\u304c\u4e0d\u5b89\u5b9a\u306b\u306a\u308b\u306e\u304c\u6c17\u306b\u306a\u308b\u3068\u3053\u308d\u3067\u3042\u308b\u3002<\/p>\n<h4>\u30b5\u30f3\u30d7\u30eb\uff08DEMO\uff09<\/h4>\n<div id=\"stage\">\n<div id=\"box1\">\n<div id=\"thumb1\"><a href=\"#p1\"><img loading=\"lazy\" decoding=\"async\" src=\"wp-images\/img2\/yari.jpg\" width=\"200\" height=\"112\"><\/a><\/div>\n<div id=\"title1\"><img loading=\"lazy\" decoding=\"async\" src=\"wp-images\/img2\/yari_t.jpg\" width=\"200\" height=\"112\"><\/div>\n<\/div>\n<div id=\"box2\">\n<div id=\"thumb2\"><a href=\"#p2\"><img loading=\"lazy\" decoding=\"async\" src=\"wp-images\/img2\/hodaka.jpg\" width=\"200\" height=\"112\"><\/a><\/div>\n<div id=\"title2\"><img loading=\"lazy\" decoding=\"async\" src=\"wp-images\/img2\/hodaka_t.jpg\" width=\"200\" height=\"112\"><\/div>\n<\/div>\n<div id=\"box3\">\n<div id=\"thumb3\"><a href=\"#p3\"><img loading=\"lazy\" decoding=\"async\" src=\"wp-images\/img2\/shirouma.jpg\" width=\"200\" height=\"112\"><\/a><\/div>\n<div id=\"title3\"><img loading=\"lazy\" decoding=\"async\" src=\"wp-images\/img2\/shirouma_t.jpg\" width=\"200\" height=\"112\"><\/div>\n<\/div>\n<div id=\"box4\">\n<div id=\"thumb4\"><a href=\"#p4\"><img loading=\"lazy\" decoding=\"async\" src=\"wp-images\/img2\/kasa.jpg\" width=\"200\" height=\"112\"><\/a><\/div>\n<div id=\"title4\"><img loading=\"lazy\" decoding=\"async\" src=\"wp-images\/img2\/kasa_t.jpg\" width=\"200\" height=\"112\"><\/div>\n<\/div>\n<div id=\"box5\">\n<div id=\"thumb5\"><a href=\"#p5\"><img loading=\"lazy\" decoding=\"async\" src=\"wp-images\/img2\/turugi.jpg\" width=\"200\" height=\"112\"><\/a><\/div>\n<div id=\"title5\"><img loading=\"lazy\" decoding=\"async\" src=\"wp-images\/img2\/turugi_t.jpg\" width=\"200\" height=\"112\"><\/div>\n<\/div>\n<div id=\"box6\">\n<div id=\"thumb6\"><a href=\"#p6\"><img loading=\"lazy\" decoding=\"async\" src=\"wp-images\/img2\/harinoki.jpg\" width=\"200\" height=\"112\"><\/a><\/div>\n<div id=\"title6\"><img loading=\"lazy\" decoding=\"async\" src=\"wp-images\/img2\/harinoki_t.jpg\" width=\"200\" height=\"112\"><\/div>\n<\/div>\n<div id=\"p1\" class=\"photo\"><img decoding=\"async\" src=\"wp-images\/img2\/yari_l.jpg\"><span class=\"cls\"><a href=\"#p11\">\u2613 \u9589\u3058\u308b<\/span><\/a><\/div>\n<div id=\"p2\" class=\"photo\"><img decoding=\"async\" src=\"wp-images\/img2\/hodaka_l.jpg\"><span class=\"cls\"><a href=\"#p11\">\u2613 \u9589\u3058\u308b<\/span><\/a><\/div>\n<div id=\"p3\" class=\"photo\"><img decoding=\"async\" src=\"wp-images\/img2\/shirouma_l.jpg\"><span class=\"cls\"><a href=\"#p11\">\u2613 \u9589\u3058\u308b<\/span><\/a><\/div>\n<div id=\"p4\" class=\"photo\"><img decoding=\"async\" src=\"wp-images\/img2\/kasa_l.jpg\"><span class=\"cls\"><a href=\"#p11\">\u2613 \u9589\u3058\u308b<\/span><\/a><\/div>\n<div id=\"p5\" class=\"photo\"><img decoding=\"async\" src=\"wp-images\/img2\/turugi_l.jpg\"><span class=\"cls\"><a href=\"#p11\">\u2613 \u9589\u3058\u308b<\/span><\/a><\/div>\n<div id=\"p6\" class=\"photo\"><img decoding=\"async\" src=\"wp-images\/img2\/harinoki_l.jpg\"><span class=\"cls\"><a href=\"#p11\">\u2613 \u9589\u3058\u308b<\/span><\/a><\/div>\n<\/div>\n<style type=\"text\/css\">\n#stage {\n\tposition:relative;\n\twidth:630Px;\n\theight:390px;\n\tbackground:#333;\n}\n#box1,#box2,#box3,#box4,#box5,#box6 {\n\twidth:200px;\n\theight:112px;\n}\n#box1 {\n\tposition:absolute !important;\n\tleft:5px; top:10px;\n}\n#box2 {\n\tposition:absolute;\n\tleft:215px; top:10px;\n}\n#box3 {\n\tposition:absolute;\n\tleft:425px; top:10px;\n}\n#box4 {\n\tposition:absolute;\n\tleft:5px; top:132px;\n}\n#box5 {\n\tposition:absolute;\n\tleft:215px; top:132px;\n}\n#box6 {\n\tposition:absolute;\n\tleft:425px; top:132px;\n}\n#box1 img,#box2 img,#box3 img,#box4 img,#box5 img,#box6 img {\n\tposition:absolute;\n\tleft:0;top:0;\n}\n#box1:hover #thumb1 img,#box2:hover #thumb2 img,#box3:hover #thumb3 img,#box4:hover #thumb4 img,#box5:hover #thumb5 img,#box6:hover #thumb6 img{\n\tcursor:pointer;\n\t-webkit-transform-origin:50% 50%;\n\t-webkit-animation:rot1 0.5s linear;\n\t-webkit-animation-fill-mode: forwards;\n\ttransform-origin:50% 50%;\n\tanimation:rot1 0.5s linear;\n\tanimation-fill-mode: forwards;\t\n}\n#box1:hover #title1 img,#box2:hover #title2 img,#box3:hover #title3 img,#box4:hover #title4 img,#box5:hover #title5 img,#box6:hover #title6 img {\n\tcursor:pointer;\n\t-webkit-transform-origin:50% 50%;\n\t-webkit-animation:rot2 0.5s linear;\n\t-webkit-animation-fill-mode: forwards;\t\n\ttransform-origin:50% 50%;\n\tanimation:rot2 0.5s linear;\n\tanimation-fill-mode: forwards;\n}\n@-webkit-keyframes rot1 {\n\t0%  {-webkit-transform:rotateY(-180deg) skewY(0deg); z-index:10;}\n\t50% {-webkit-transform:rotateY(-90deg) skewY(20deg); z-index:11;}\n\t100%{-webkit-transform:rotateY(0deg) skewY(0deg); z-index:11;}\n}\n@-webkit-keyframes rot2 {\n\t0%  {-webkit-transform:rotateY(0deg) skewY(0deg); z-index:11;}\n\t50% {-webkit-transform:rotateY(90deg) skewY(-20deg); z-index:10;}\n\t100%{-webkit-transform:rotateY(180deg) skewY(0deg); z-index:10;}\n}\n@keyframes rot1 {\n\t0%  {transform:rotateY(-180deg) skewY(0deg); z-index:10;}\n\t50% {transform:rotateY(-90deg) skewY(20deg); z-index:11;}\n\t100%{transform:rotateY(0deg) skewY(0deg); z-index:11;}\n}\n@keyframes rot2 {\n\t0%  {transform:rotateY(0deg) skewY(0deg); z-index:11;}\n\t50% {transform:rotateY(90deg) skewY(-20deg); z-index:10;}\n\t100%{transform:rotateY(180deg) skewY(0deg); z-index:10;}\n}\n\/* \u62e1\u5927\u5199\u771f\u306e\u914d\u7f6e\u3068transition\u3092\u30bb\u30c3\u30c8 *\/\n.photo {\n    position:absolute;\n    top:5px;left:5px;\n    z-index:-1;\n    opacity:0;\n    transition: opacity 1s ease;\n}\n\/* \u30af\u30ea\u30c3\u30af\u3055\u308c\u305f\u30b5\u30e0\u30cd\u30a4\u30eb\u306b\u8a72\u5f53\u3059\u308b\u62e1\u5927\u5199\u771f\u306e\u4e0d\u900f\u660e\u5ea6\u30921\u306b *\/\n.photo:target {\n    z-index:100;\n    opacity:1;\n}\n.cls {\n    position:absolute;\n    top:360px;\n    left:550px;\n}\n.cls a {\n    text-decoration:none;\n    color:#fff;\n    font-weight:bold;   \n}\n<\/style>\n<p><\/p>\n<h4>\u672c\u30b5\u30f3\u30d7\u30eb\u8868\u793a\u7528HTML<\/h4>\n<pre>\r\n&lt;div id=\"stage\"&gt;\r\n&lt;div id=\"box1\"&gt;\r\n\t&lt;div id=\"thumb1\"&gt;&lt;a href=\"#p1\"&gt;&lt;img src=\"img\/yari.jpg\" width=\"200\" height=\"112\"&gt;&lt;\/a&gt;&lt;\/div&gt;\r\n\t&lt;div id=\"title1\"&gt;&lt;img src=\"img6\/yari_t.jpg\" width=\"200\" height=\"112\"&gt;&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;div id=\"box2\"&gt;\r\n\t&lt;div id=\"thumb2\"&gt;&lt;a href=\"#p2\"&gt;&lt;img src=\"img\/hodaka.jpg\" width=\"200\" height=\"112\"&gt;&lt;\/a&gt;&lt;\/div&gt;\r\n\t&lt;div id=\"title2\"&gt;&lt;img src=\"img6\/hodaka_t.jpg\" width=\"200\" height=\"112\"&gt;&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;div id=\"box3\"&gt;\r\n\t&lt;div id=\"thumb3\"&gt;&lt;a href=\"#p3\"&gt;&lt;img src=\"img\/shirouma.jpg\" width=\"200\" height=\"112\"&gt;&lt;\/a&gt;&lt;\/div&gt;\r\n\t&lt;div id=\"title3\"&gt;&lt;img src=\"img6\/shirouma_t.jpg\" width=\"200\" height=\"112\"&gt;&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;div id=\"box4\"&gt;\r\n\t&lt;div id=\"thumb4\"&gt;&lt;a href=\"#p4\"&gt;&lt;img src=\"img\/kasa.jpg\" width=\"200\" height=\"112\"&gt;&lt;\/a&gt;&lt;\/div&gt;\r\n\t&lt;div id=\"title4\"&gt;&lt;img src=\"img6\/kasa_t.jpg\" width=\"200\" height=\"112\"&gt;&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;div id=\"box5\"&gt;\r\n\t&lt;div id=\"thumb5\"&gt;&lt;a href=\"#p5\"&gt;&lt;img src=\"img\/turugi.jpg\" width=\"200\" height=\"112\"&gt;&lt;\/a&gt;&lt;\/div&gt;\r\n\t&lt;div id=\"title5\"&gt;&lt;img src=\"img6\/turugi_t.jpg\" width=\"200\" height=\"112\"&gt;&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;div id=\"box6\"&gt;\r\n\t&lt;div id=\"thumb6\"&gt;&lt;a href=\"#p6\"&gt;&lt;img src=\"img\/harinoki.jpg\" width=\"200\" height=\"112\"&gt;&lt;\/a&gt;&lt;\/div&gt;\r\n\t&lt;div id=\"title6\"&gt;&lt;img src=\"img6\/harinoki_t.jpg\" width=\"200\" height=\"112\"&gt;&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;div id=\"p1\" class=\"photo\"&gt;&lt;img src=\"img6\/yari_l.jpg\"&gt;&lt;span class=\"cls\"&gt;&lt;a href=\"#p11\"&gt;X \u9589\u3058\u308b&lt;\/span&gt;&lt;\/a&gt;&lt;\/div&gt;\r\n&lt;div id=\"p2\" class=\"photo\"&gt;&lt;img src=\"img6\/hodaka_l.jpg\"&gt;&lt;span class=\"cls\"&gt;&lt;a href=\"#p11\"&gt;X \u9589\u3058\u308b&lt;\/span&gt;&lt;\/a&gt;&lt;\/div&gt;\r\n&lt;div id=\"p3\" class=\"photo\"&gt;&lt;img src=\"img6\/shirouma_l.jpg\"&gt;&lt;span class=\"cls\"&gt;&lt;a href=\"#p11\"&gt;X \u9589\u3058\u308b&lt;\/span&gt;&lt;\/a&gt;&lt;\/div&gt;\r\n&lt;div id=\"p4\" class=\"photo\"&gt;&lt;img src=\"img6\/kasa_l.jpg\"&gt;&lt;span class=\"cls\"&gt;&lt;a href=\"#p11\"&gt;X \u9589\u3058\u308b&lt;\/span&gt;&lt;\/a&gt;&lt;\/div&gt;\r\n&lt;div id=\"p5\" class=\"photo\"&gt;&lt;img src=\"img6\/turugi_l.jpg\"&gt;&lt;span class=\"cls\"&gt;&lt;a href=\"#p11\"&gt;X \u9589\u3058\u308b&lt;\/span&gt;&lt;\/a&gt;&lt;\/div&gt;\r\n&lt;div id=\"p6\" class=\"photo\"&gt;&lt;img src=\"img6\/harinoki_l.jpg\"&gt;&lt;span class=\"cls\"&gt;&lt;a href=\"#p11\"&gt;X \u9589\u3058\u308b&lt;\/span&gt;&lt;\/a&gt;&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<h4>HTML\u306e\u30b9\u30dd\u30c3\u30c8\u8aac\u660e<\/h4>\n<p>\u30fb&lt;div id=&#8221;thumb1&#8243;&gt;&lt;a href=&#8221;#p1&gt;&lt;img src=&#8221;img\/yari.jpg&#8221; width=&#8221;200&#8243; height=&#8221;112&#8243;&gt;&lt;\/a&gt;&lt;\/div&gt;\u3000\u3068\u3001<br \/>\n\u3000&lt;div id=&#8221;p1&#8243; class=&#8221;photo&#8221;&gt;&lt;img src=&#8221;img\/yari_l.jpg&#8221;&gt;&lt;span class=&#8221;cls&#8221;&gt;&lt;a href=&#8221;#p11&#8243;&gt;\u2613 \u9589\u3058\u308b&lt;\/span&gt;&lt;\/a&gt;&lt;\/div&gt;\u3000\u3067\u3001<br \/>\n\u3000\u8a18\u8ff0\u5185\u30ea\u30f3\u30af\u3092\u8cbc\u308a\u3001css \u306e target \u64ec\u4f3c\u30af\u30e9\u30b9\u3092\u4f7f\u3063\u3066\u30af\u30ea\u30c3\u30af\u306b\u8a72\u5f53\u3059\u308b\u5199\u771f\u306e transition \u3092\u4f5c\u52d5\u3055\u305b\u3066\u3044\u308b\u3002<\/p>\n<h4>\u672c\u30b5\u30f3\u30d7\u30eb\u8868\u793a\u7528CSS<\/h4>\n<pre>\r\n\/* \u8868\u793a\u67a0 *\/\r\n#stage {\r\n\tposition:relative;\r\n\twidth:630Px;\r\n\theight:390px;\r\n\tbackground:#333;\r\n}\r\n\/* \u30bf\u30a4\u30c8\u30eb\u30dc\u30c3\u30af\u30b9\u306e\u30b5\u30a4\u30ba\u3068\u914d\u7f6e *\/\r\n#box1,#box2,#box3,#box4,#box5,#box6 {\r\n\twidth:200px;\r\n\theight:112px;\r\n}\r\n#box1 {\r\n\tposition:absolute;\r\n\tleft:5px; top:10px;\r\n}\r\n#box2 {\r\n\tposition:absolute;\r\n\tleft:215px; top:10px;\r\n}\r\n#box3 {\r\n\tposition:absolute;\r\n\tleft:425px; top:10px;\r\n}\r\n#box4 {\r\n\tposition:absolute;\r\n\tleft:5px; top:132px;\r\n}\r\n#box5 {\r\n\tposition:absolute;\r\n\tleft:215px; top:132px;\r\n}\r\n#box6 {\r\n\tposition:absolute;\r\n\tleft:425px; top:132px;\r\n}\r\n#box1 img,#box2 img,#box3 img,#box4 img,#box5 img,#box6 img {\r\n\tposition:absolute;\r\n\tleft:0;top:0;\r\n}\r\n\/* \u30bf\u30a4\u30c8\u30eb\u30dc\u30c3\u30af\u30b9\u306ehover\u3067animation\u958b\u59cb *\/\r\n\/* \u88cf\u9762\u914d\u7f6e\u30b5\u30e0\u30cd\u30a4\u30eb\u306eanimation\u8a2d\u5b9a *\/\r\n#box1:hover #thumb1 img,#box2:hover #thumb2 img,#box3:hover #thumb3 img,#box4:hover #thumb4 img,#box5:hover #thumb5 img,#box6:hover #thumb6 img{\r\n\tcursor:pointer;\r\n\t-webkit-transform-origin:50% 50%;\r\n\t-webkit-animation:rot1 0.5s linear;\r\n\t-webkit-animation-fill-mode: forwards;\r\n\ttransform-origin:50% 50%;\r\n\tanimation:rot1 0.5s linear;\r\n\tanimation-fill-mode: forwards;\t\r\n}\r\n\/* \u88cf\u9762\u914d\u7f6e\u30bf\u30a4\u30c8\u30eb\u30dc\u30c3\u30af\u30b9\u306eanimation\u8a2d\u5b9a *\/\r\n#box1:hover #title1 img,#box2:hover #title2 img,#box3:hover #title3 img,#box4:hover #title4 img,#box5:hover #title5 img,#box6:hover #title6 img {\r\n\tcursor:pointer;\r\n\t-webkit-transform-origin:50% 50%;\r\n\t-webkit-animation:rot2 0.5s linear;\r\n\t-webkit-animation-fill-mode: forwards;\t\r\n\ttransform-origin:50% 50%;\r\n\tanimation:rot2 0.5s linear;\r\n\tanimation-fill-mode: forwards;\r\n}\r\n@-webkit-keyframes rot1 {\r\n\t0%  {-webkit-transform:rotateY(-180deg) skewY(0deg); z-index:10;}\r\n\t50% {-webkit-transform:rotateY(-90deg) skewY(20deg); z-index:10;}\r\n\t100%{-webkit-transform:rotateY(0deg) skewY(0deg); z-index:11;}\r\n}\r\n@-webkit-keyframes rot2 {\r\n\t0%  {-webkit-transform:rotateY(0deg) skewY(0deg); z-index:11;}\r\n\t50% {-webkit-transform:rotateY(90deg) skewY(-20deg); z-index:10;}\r\n\t100%{-webkit-transform:rotateY(180deg) skewY(0deg); z-index:10;}\r\n}\r\n@keyframes rot1 {\r\n\t0%  {transform:rotateY(-180deg) skewY(0deg); z-index:10;}\r\n\t50% {transform:rotateY(-90deg) skewY(20deg); z-index:11;}\r\n\t100%{transform:rotateY(0deg) skewY(0deg); z-index:11;}\r\n}\r\n@keyframes rot2 {\r\n\t0%  {transform:rotateY(0deg) skewY(0deg); z-index:11;}\r\n\t50% {transform:rotateY(90deg) skewY(-20deg); z-index:10;}\r\n\t100%{transform:rotateY(180deg) skewY(0deg); z-index:10;}\r\n}\r\n\/* \u62e1\u5927\u5199\u771f\u306e\u914d\u7f6e\u3068transition\u3092\u30bb\u30c3\u30c8 *\/\r\n.photo {\r\n    position:absolute;\r\n    top:5px;left:5px;\r\n\tz-index:-1;\r\n    opacity:0;\r\n    transition: opacity 1s ease;\r\n}\r\n\/* \u30af\u30ea\u30c3\u30af\u3055\u308c\u305f\u30b5\u30e0\u30cd\u30a4\u30eb\u306b\u8a72\u5f53\u3059\u308b\u62e1\u5927\u5199\u771f\u306e\u4e0d\u900f\u660e\u5ea6\u30921\u306b *\/\r\n.photo:target {\r\n    z-index:100;\r\n    opacity:1;\r\n}\r\n.cls {\r\n    position:absolute;\r\n    top:360px;\r\n    left:550px;\r\n}\r\n.cls a {\r\n    text-decoration:none;\r\n    color:#fff;\r\n    font-weight:bold;   \r\n}\r\n<\/pre>\n<h4>CSS\u306e\u30b9\u30dd\u30c3\u30c8\u8aac\u660e<\/h4>\n<p>\u30fb#box1 &#8211; #box6 \u306e\u30b5\u30a4\u30ba\u3092\u6307\u5b9a\u3057\u3066\u3001\u3053\u306ediv\u306ehover\u3067animation\u304c\u4f5c\u52d5\u3059\u308b\u3088\u3046\u306b\u3057\u3066\u3044\u308b\u3002img\u306bhover\u3092\u6307\u5b9a\u3059\u308b\u3068\u3001\u56de\u8ee2\u3059\u308b\u306e\u3067hover\u72b6\u614b\u304c\u4e0d\u5b89\u5b9a\u306b\u306a\u308b\u3002<br \/>\n\u30fb\u30b5\u30e0\u30cd\u30a4\u30eb\u53ce\u5bb9div\uff08thumb1\u306a\u3069\uff09\u3068\u30bf\u30a4\u30c8\u30eb\u30bf\u30a4\u30ebdiv\uff08title1\u306a\u3069\uff09\u306f\u3001\u91cd\u306d\u3066\u914d\u7f6e\u3057\u3066\u304a\u304d\u3001rotateY\u56de\u8ee2\u89d2\u3092180\u00b0\u305a\u3089\u3057\u305f animation \u3092\u8a2d\u5b9a\u3057\u300190\u00b0\u56de\u8ee2\u3057\u3066\u4e21\u65b9\u304c\u7dda\u72b6\u614b\u306b\u306a\u3063\u305f\u3068\u3053\u308d\u3067\u3001z-index\u3092\u5207\u308a\u66ff\u3048\u3066\u3001\u88cf\u306b\u96a0\u308c\u3066\u3044\u305f\u30b5\u30e0\u30cd\u30a4\u30eb\u3092\u8868\u793a\u3055\u305b\u3066\u3044\u308b\u3002<br \/>\n\u30fb\u56de\u8ee2\u3068\u540c\u6642\u306b\u3001Y\u8ef8\u65b9\u5411\u306bskew\u3092\u4f7f\u3063\u3066\u50be\u659c\u3092\u3064\u3051\u3001\u56de\u8ee2\u3057\u3066\u3044\u308b\u3068\u3044\u3046\u5b9f\u611f\u3092\u8868\u73fe\u3057\u305f\u3002<br \/>\n\u30fb\u62e1\u5927\u5199\u771f\u306f\u3001\u5168\u3066\u753b\u9762\u4e2d\u592e\u3044\u3063\u3071\u3044\u306b\u91cd\u306d\u3066\u914d\u7f6e\u3057\u3001opacity\u3092\uff10\u306b\u3057\u3066\u898b\u3048\u306a\u3044\u3088\u3046\u306b\u3057\u3066\u304a\u304d\u3001\u30af\u30ea\u30c3\u30af\u3055\u308c\u305f\u30b5\u30e0\u30cd\u30a4\u30eb\u3092target\u3067\u611f\u77e5\u3057\u3001\u8a72\u5f53\u3059\u308b\u62e1\u5927\u5199\u771f\u306eopacity\u3092\uff11\u306b\u3059\u308b\u3053\u3068\u3067\u3001transition\u306b\u3088\u3063\u3066FadeIn\u3055\u305b\u3066\u3044\u308b\u3002<br \/>\n\u30fb\u9589\u3058\u308b\u30dc\u30bf\u30f3\u306f\u3001\u5b9a\u7fa9\u306e\u306a\u3044#p11\u306b\u30ea\u30f3\u30af\u3055\u305b\u3001\u521d\u671f\u753b\u9762\u306b\u623b\u308b\u3088\u3046\u306b\u3057\u305f\u3002<\/p>\n<div class=\"ninja_onebutton\">\n<script type=\"text\/javascript\">\n\/\/<![CDATA[\n(function(d){\nif(typeof(window.NINJA_CO_JP_ONETAG_BUTTON_63425606c23ff308dc3d676e4f432981)=='undefined'){\n    document.write(\"<sc\"+\"ript type='text\\\/javascript' src='http:\\\/\\\/omt.shinobi.jp\\\/b\\\/63425606c23ff308dc3d676e4f432981'><\\\/sc\"+\"ript>\");\n}else{\n    window.NINJA_CO_JP_ONETAG_BUTTON_63425606c23ff308dc3d676e4f432981.ONETAGButton_Load();}\n})(document);\n\/\/]]>\n<\/script><span class=\"ninja_onebutton_hidden\" style=\"display:none;\"><?php the_permalink(); ?><\/span><span style=\"display:none;\" class=\"ninja_onebutton_hidden\"><?php the_title(); ?><\/span>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u3000\u30b5\u30e0\u30cd\u30a4\u30eb\u3092Metro\u753b\u9762\u98a8\u306e\u30bf\u30a4\u30eb\u306e\u88cf\u306b\u914d\u7f6e\u3057\u3066\u304a\u304d\u3001\u30de\u30a6\u30b9\u30aa\u30fc\u30d0\u30fc\u3067\u56de\u8ee2\u3057\u306a\u304c\u3089\u767b\u5834\u3057\u3001\u305d\u306e\u30af\u30ea\u30c3\u30af\u3067\u62e1\u5927\u5199\u771f\u304c\u8868\u793a\u3055\u308c\u308b\u30bf\u30a4\u30d7\u306e\u30d5\u30a9\u30c8\u30ae\u30e3\u30e9\u30ea\u30fc\u3067\u3042\u308b\u3002\u3053\u3053\u3067\u306f\u5199\u771f\u8868\u793a\u7528\u3068\u306a\u3063\u3066\u3044\u308b\u304c\u3001\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u306b\u3082\u4f7f\u3048\u308b\u3057 &hellip; <a class=\"more-link\" href=\"https:\/\/css.programming.jp\/?p=489\">\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":[4],"tags":[],"class_list":["post-489","post","type-post","status-publish","format-standard","hentry","category-4"],"_links":{"self":[{"href":"https:\/\/css.programming.jp\/index.php?rest_route=\/wp\/v2\/posts\/489","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=489"}],"version-history":[{"count":23,"href":"https:\/\/css.programming.jp\/index.php?rest_route=\/wp\/v2\/posts\/489\/revisions"}],"predecessor-version":[{"id":1173,"href":"https:\/\/css.programming.jp\/index.php?rest_route=\/wp\/v2\/posts\/489\/revisions\/1173"}],"wp:attachment":[{"href":"https:\/\/css.programming.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=489"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css.programming.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=489"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css.programming.jp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=489"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}