{"id":1319,"date":"2018-04-03T08:38:07","date_gmt":"2018-04-02T23:38:07","guid":{"rendered":"http:\/\/css.programming.jp\/?p=1319"},"modified":"2018-04-03T08:38:52","modified_gmt":"2018-04-02T23:38:52","slug":"%e3%82%b9%e3%83%a9%e3%82%a4%e3%82%b9%e7%94%bb%e5%83%8f%e9%81%b7%e7%a7%bb%e5%9e%8b%e3%82%b9%e3%83%a9%e3%82%a4%e3%83%89%e3%82%b7%e3%83%a7%e3%83%bc","status":"publish","type":"post","link":"https:\/\/css.programming.jp\/?p=1319","title":{"rendered":"\u30b9\u30e9\u30a4\u30b9\u753b\u50cf\u9077\u79fb\u578b\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc"},"content":{"rendered":"<p>\u3000\u5168\u30b9\u30e9\u30a4\u30c9\u679a\u6570\u3067\u7b49\u5206\u3057\u305f\u30b9\u30e9\u30a4\u30b9\u753b\u50cf\uff08\u3053\u306e\u30c7\u30e2\u3067\u306f\u30b9\u30e9\u30a4\u30c9\u679a\u6570\u304c5\u679a\u306a\u306e\u3067\u30015\u7b49\u5206\u3057\u305f\u753b\u50cf\uff09\u3092\u3001\u4e00\u679a\u5206\u306e\u30b9\u30e9\u30a4\u30c9\u306b\u306a\u308b\u3088\u3046\u306b\u6c34\u5e73\u306b\u4e26\u3079\u3001\u3053\u308c\u3092\u3001\u30b9\u30e9\u30a4\u30c9\u306e\u5207\u308a\u66ff\u3048\u6642\u306b\u8868\u793a\u3059\u308b\u30bf\u30a4\u30d7\u306e\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\u3067\u3042\u308b\u3002\u6587\u7ae0\u3067\u8aad\u3080\u3068\u3088\u304f\u308f\u304b\u3089\u306a\u3044\u3068\u601d\u3046\u306e\u3067\u3001\u30b5\u30f3\u30d7\u30eb\uff08DEMO\uff09\u3067\u3054\u89a7\u3044\u305f\u3060\u304d\u305f\u3044\u3002\u306a\u304a\u3001\u5404\u30b9\u30e9\u30a4\u30c9\u306e\u30b9\u30e9\u30a4\u30b9\u753b\u50cf\u306f\u3001\u305d\u306e\u30b9\u30e9\u30a4\u30c9\u304c\u51fa\u73fe\u3059\u308b\u756a\u624b\u306e\u30b9\u30e9\u30a4\u30b9\u3092\u4f7f\u3046\u3088\u3046\u306b\u3059\u308b\u3002<\/p>\n<h4>\u30b5\u30f3\u30d7\u30eb\uff08DEMO\uff09<\/h4>\n<p><!-- \u3053\u3053\u304b\u3089HTML --><\/p>\n<div id=\"stage\">\n<div id=\"photos\">\n<ul>\n<li><img decoding=\"async\" src=\"wp-images\/img9\/1.jpg\"><\/li>\n<li><img decoding=\"async\" src=\"wp-images\/img9\/2.jpg\"><\/li>\n<li><img decoding=\"async\" src=\"wp-images\/img9\/3.jpg\"><\/li>\n<li><img decoding=\"async\" src=\"wp-images\/img9\/4.jpg\"><\/li>\n<li><img decoding=\"async\" src=\"wp-images\/img9\/5.jpg\"><\/li>\n<\/ul><\/div>\n<div id=\"slices\">\n<ul>\n<li><img decoding=\"async\" src=\"wp-images\/img9\/1s.jpg\">\n<div><\/div>\n<\/li>\n<li><img decoding=\"async\" src=\"wp-images\/img9\/2s.jpg\">\n<div><\/div>\n<\/li>\n<li><img decoding=\"async\" src=\"wp-images\/img9\/3s.jpg\">\n<div><\/div>\n<\/li>\n<li><img decoding=\"async\" src=\"wp-images\/img9\/4s.jpg\">\n<div><\/div>\n<\/li>\n<li><img decoding=\"async\" src=\"wp-images\/img9\/5s.jpg\">\n<div><\/div>\n<\/li>\n<\/ul><\/div>\n<\/div>\n<div style=\"padding-top:68%\"><\/div>\n<p><!-- \u3053\u3053\u304b\u3089CSS --><\/p>\n<style type=\"text\/css\">\n<p>#stage { position:relative;max-width:600px; }\nli { list-style:none; }\nli img { display:block; }\n#photos li {\n\tposition:absolute; top:0; left:0;background:#000;\n}\n#photos li img { width:100%; }\n#photos li:nth-child(1) { animation:switchPhotos 30s ease infinite; animation-delay:-0s; }\n#photos li:nth-child(2) { animation:switchPhotos 30s ease infinite; animation-delay:-24s; }\n#photos li:nth-child(3) { animation:switchPhotos 30s ease infinite; animation-delay:-18s; }\n#photos li:nth-child(4) { animation:switchPhotos 30s ease infinite; animation-delay:-12s; }\n#photos li:nth-child(5) { animation:switchPhotos 30s ease infinite; animation-delay:-6s; }<\/p>\n<p>@keyframes switchPhotos { \n\t0% { opacity:0; }\n\t5% { opacity:1; }\n\t20% { opacity:1; }\n\t25% { opacity:0; }\n\t100% { opacity:0; }\n}<\/p>\n<p>#slices li {\n\tposition:absolute; top:0;\n\twidth:20%;\n}\n#slices li img { width:100%; }\n#slices li div { width:100%;height:100%;background:#000; position:absolute; top:0; }\n#slices li:nth-child(1) { left:0%; }\n#slices li:nth-child(2) { left:20%; }\n#slices li:nth-child(3) { left:40%; }\n#slices li:nth-child(4) { left:60%; }\n#slices li:nth-child(5) { left:80%; }<\/p>\n<p>#slices li:nth-child(1) > img { animation:switchSlices 30s ease infinite; }\n#slices li:nth-child(2) > img { animation:switchSlices 30s ease infinite; animation-delay:-24s; }\n#slices li:nth-child(3) > img { animation:switchSlices 30s ease infinite; animation-delay:-18s; }\n#slices li:nth-child(4) > img { animation:switchSlices 30s ease infinite; animation-delay:-12s; }\n#slices li:nth-child(5) > img { animation:switchSlices 30s ease infinite; animation-delay:-36s; }<\/p>\n<p>#slices li:nth-child(1) > div { animation:switchScreen 30s ease infinite; }\n#slices li:nth-child(2) > div { animation:switchScreen 30s ease infinite; animation-delay:-24s; }\n#slices li:nth-child(3) > div { animation:switchScreen 30s ease infinite; animation-delay:-18s; }\n#slices li:nth-child(4) > div { animation:switchScreen 30s ease infinite; animation-delay:-12s; }\n#slices li:nth-child(5) > div { animation:switchScreen 30s ease infinite; animation-delay:-36s; }<\/p>\n<p>@keyframes switchSlices {\n\t0% { opacity:0;  }\n\t5% { opacity:1; }\n\t15% { opacity:1; }\n\t20% { opacity:1; }\n\t25% { opacity:1; }\n\t30% { opacity:0; }\n\t40% { opacity:0; }\n\t45% { opacity:1; }\n\t50% { opacity:0; }\n\t60% { opacity:0; }\n\t65% { opacity:1; }\n\t70% { opacity:0; }\n\t80% { opacity:0; }\n\t85% { opacity:1; }\n\t90% { opacity:0; }\n\t100% { opacity:0; }\n}<\/p>\n<p>@keyframes switchScreen {\n\t0% { opacity:0;  }\n\t5% { opacity:0; }\n\t15% { opacity:0; }\n\t20% { opacity:0; }\n\t25% { opacity:0.4; }\n\t30% { opacity:0; }\n\t40% { opacity:0; }\n\t45% { opacity:0.4; }\n\t50% { opacity:0; }\n\t60% { opacity:0; }\n\t65% { opacity:0.4; }\n\t70% { opacity:0; }\n\t80% { opacity:0; }\n\t85% { opacity:0.4; }\n\t90% { opacity:0; }\n\t100% { opacity:0; }\n}\n<\/style>\n<h4>\u7528\u610f\u3059\u308b\u753b\u50cf\uff08\u3053\u306e\u30b5\u30f3\u30d7\u30eb\u306e\u5834\u5408\uff09<\/h4>\n<p>\u30fb600*400px\u306e\u30b9\u30e9\u30a4\u30c95\u679a<br \/>\n\u30fb120*400px\u306e\u30b9\u30e9\u30a4\u30b9\u753b\u50cf\u54041\u679a\uff08\u5404\u30b9\u30e9\u30a4\u30c9\u306e\u767b\u5834\u756a\u624b\u306b\u76f8\u5f53\u3059\u308b\u30b9\u30e9\u30a4\u30b9\uff09<\/p>\n<h4>\u672c\u30b5\u30f3\u30d7\u30eb\u8868\u793a\u7528HTML<\/h4>\n<p><code><\/p>\n<pre>\r\n&lt;div id=\"stage\"&gt;\r\n    &lt;div id=\"photos\"&gt;\r\n        &lt;ul&gt;\r\n            &lt;li&gt;&lt;img src=\"img9\/1.jpg\"&gt;&lt;\/li&gt;\r\n            &lt;li&gt;&lt;img src=\"img9\/2.jpg\"&gt;&lt;\/li&gt;\r\n            &lt;li&gt;&lt;img src=\"img9\/3.jpg\"&gt;&lt;\/li&gt;\r\n            &lt;li&gt;&lt;img src=\"img9\/4.jpg\"&gt;&lt;\/li&gt;\r\n            &lt;li&gt;&lt;img src=\"img9\/5.jpg\"&gt;&lt;\/li&gt;    \r\n        &lt;\/ul&gt;\r\n    &lt;\/div&gt;\r\n    &lt;div id=\"slices\"&gt;    \t\r\n        &lt;ul&gt;\r\n            &lt;li&gt;&lt;img src=\"img9\/1s.jpg\"&gt;&lt;div&gt;&lt;\/div&gt;&lt;\/li&gt;\r\n            &lt;li&gt;&lt;img src=\"img9\/2s.jpg\"&gt;&lt;div&gt;&lt;\/div&gt;&lt;\/li&gt;\r\n            &lt;li&gt;&lt;img src=\"img9\/3s.jpg\"&gt;&lt;div&gt;&lt;\/div&gt;&lt;\/li&gt;\r\n            &lt;li&gt;&lt;img src=\"img9\/4s.jpg\"&gt;&lt;div&gt;&lt;\/div&gt;&lt;\/li&gt;\r\n            &lt;li&gt;&lt;img src=\"img9\/5s.jpg\"&gt;&lt;div&gt;&lt;\/div&gt;&lt;\/li&gt;\r\n        &lt;\/ul&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;!-- \u4ee5\u4e0b\u306e\u8a18\u8ff0\u306f\u8868\u793a\u67a0\u306e\u9ad8\u3055\u4fdd\u6301\u306e\u305f\u3081\u306768%\u306e\u5024\u306f\u8981\u8abf\u6574 --&gt;\r\n&lt;div style=\"padding-top:68%\"&gt;&lt;\/div&gt;\r\n<\/pre>\n<p><\/code><\/p>\n<h4>\u672c\u30b5\u30f3\u30d7\u30eb\u8868\u793a\u7528CSS<\/h4>\n<pre>\r\n\/* \u8868\u793a\u67a0 *\/\r\n#stage { position:relative;max-width:600px; }\r\n\/* li\u5c5e\u6027\u3001\u753b\u50cf\u4e0b\u306b\u751f\u6210\u3059\u308b\u30b9\u30da\u30fc\u30b9\u9664\u53bb *\/\r\nli { list-style:none; }\r\nli img { display:block; }\r\n\/* \u30b9\u30e9\u30a4\u30c9\u3092\u5168\u3066\u540c\u3058\u4f4d\u7f6e\u306b *\/\r\n#photos li {\r\n\tposition:absolute; top:0; left:0;\r\n}\r\n\/* \u30b9\u30e9\u30a4\u30c9\u753b\u50cf\u3092\u4f38\u7e2e\u53ef\u306b *\/\r\n#photos li img { width:100%; }\r\n\/* \u5404\u30b9\u30e9\u30a4\u30c9\u306eanimation *\/\r\n#photos li:nth-child(1) { animation:switchPhotos 30s ease infinite; animation-delay:-0s; }\r\n#photos li:nth-child(2) { animation:switchPhotos 30s ease infinite; animation-delay:-24s; }\r\n#photos li:nth-child(3) { animation:switchPhotos 30s ease infinite; animation-delay:-18s; }\r\n#photos li:nth-child(4) { animation:switchPhotos 30s ease infinite; animation-delay:-12s; }\r\n#photos li:nth-child(5) { animation:switchPhotos 30s ease infinite; animation-delay:-6s; }\r\n\r\n@keyframes switchPhotos { \r\n\t0% { opacity:0; }\r\n\t5% { opacity:1; }\r\n\t20% { opacity:1; }\r\n\t25% { opacity:0; }\r\n\t100% { opacity:0; }\r\n}\r\n\r\n\/* \u5404\u30b9\u30e9\u30a4\u30c9\u3092\u4e0a\u4ed8\u304d\u306b\u3001\u5e45\u30921\/5\u306b *\/\r\n#slices li {\r\n\tposition:absolute; top:0;\r\n\twidth:20%;\r\n}\r\n\/* \u30b9\u30e9\u30a4\u30b9\u753b\u50cf\u3092\u4f38\u7e2e\u53ef\u306b *\/\r\n#slices li img { width:100%; }\r\n\/* \u5404\u30b9\u30e9\u30a4\u30b9\u753b\u50cf\u306e\u4e0a\u306b\u540c\u3058\u30b5\u30a4\u30ba\u3067\u9ed2\u3044\u30b9\u30af\u30ea\u30fc\u30f3\uff08\u8868\u793a\u6642\u306fopacity:0.4\uff09\u3092\u7f6e\u304f *\/\r\n#slices li div { width:100%;height:100%;background:#000; position:absolute; top:0; }\r\n\/* \u5404\u30b9\u30e9\u30a4\u30b9\u753b\u50cf\u306e\u4f4d\u7f6e\u6c7a\u3081 *\/\r\n#slices li:nth-child(1) { left:0%; }\r\n#slices li:nth-child(2) { left:20%; }\r\n#slices li:nth-child(3) { left:40%; }\r\n#slices li:nth-child(4) { left:60%; }\r\n#slices li:nth-child(5) { left:80%; }\r\n\/* \u5404\u30b9\u30e9\u30a4\u30b9\u753b\u50cf\u306eanimation *\/\r\n#slices li:nth-child(1) > img { animation:switchSlices 30s ease infinite; }\r\n#slices li:nth-child(2) > img { animation:switchSlices 30s ease infinite; animation-delay:-24s; }\r\n#slices li:nth-child(3) > img { animation:switchSlices 30s ease infinite; animation-delay:-18s; }\r\n#slices li:nth-child(4) > img { animation:switchSlices 30s ease infinite; animation-delay:-12s; }\r\n#slices li:nth-child(5) > img { animation:switchSlices 30s ease infinite; animation-delay:-36s; }\r\n\/* \u30b9\u30e9\u30a4\u30b9\u753b\u50cf\u306b\u30bf\u30a4\u30df\u30f3\u30b0\u3092\u5408\u308f\u305b\u3066\u5404\u30b9\u30af\u30ea\u30fc\u30f3\u3092animate\u3055\u305b\u308b *\/\r\n#slices li:nth-child(1) > div { animation:switchScreen 30s ease infinite; }\r\n#slices li:nth-child(2) > div { animation:switchScreen 30s ease infinite; animation-delay:-24s; }\r\n#slices li:nth-child(3) > div { animation:switchScreen 30s ease infinite; animation-delay:-18s; }\r\n#slices li:nth-child(4) > div { animation:switchScreen 30s ease infinite; animation-delay:-12s; }\r\n#slices li:nth-child(5) > div { animation:switchScreen 30s ease infinite; animation-delay:-36s; }\r\n\r\n@keyframes switchSlices {\r\n\t0% { opacity:0;  }\r\n\t5% { opacity:1; }\r\n\t15% { opacity:1; }\r\n\t20% { opacity:1; }\r\n\t25% { opacity:1; }\r\n\t30% { opacity:0; }\r\n\t40% { opacity:0; }\r\n\t45% { opacity:1; }\r\n\t50% { opacity:0; }\r\n\t60% { opacity:0; }\r\n\t65% { opacity:1; }\r\n\t70% { opacity:0; }\r\n\t80% { opacity:0; }\r\n\t85% { opacity:1; }\r\n\t90% { opacity:0; }\r\n\t100% { opacity:0; }\r\n}\r\n\r\n@keyframes switchScreen {\r\n\t0% { opacity:0;  }\r\n\t5% { opacity:0; }\r\n\t15% { opacity:0; }\r\n\t20% { opacity:0; }\r\n\t25% { opacity:0.4; }\r\n\t30% { opacity:0; }\r\n\t40% { opacity:0; }\r\n\t45% { opacity:0.4; }\r\n\t50% { opacity:0; }\r\n\t60% { opacity:0; }\r\n\t65% { opacity:0.4; }\r\n\t70% { opacity:0; }\r\n\t80% { opacity:0; }\r\n\t85% { opacity:0.4; }\r\n\t90% { opacity:0; }\r\n\t100% { opacity:0; }\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\u3000\u5168\u30b9\u30e9\u30a4\u30c9\u679a\u6570\u3067\u7b49\u5206\u3057\u305f\u30b9\u30e9\u30a4\u30b9\u753b\u50cf\uff08\u3053\u306e\u30c7\u30e2\u3067\u306f\u30b9\u30e9\u30a4\u30c9\u679a\u6570\u304c5\u679a\u306a\u306e\u3067\u30015\u7b49\u5206\u3057\u305f\u753b\u50cf\uff09\u3092\u3001\u4e00\u679a\u5206\u306e\u30b9\u30e9\u30a4\u30c9\u306b\u306a\u308b\u3088\u3046\u306b\u6c34\u5e73\u306b\u4e26\u3079\u3001\u3053\u308c\u3092\u3001\u30b9\u30e9\u30a4\u30c9\u306e\u5207\u308a\u66ff\u3048\u6642\u306b\u8868\u793a\u3059\u308b\u30bf\u30a4\u30d7\u306e\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\u3067\u3042\u308b\u3002\u6587\u7ae0\u3067\u8aad\u3080\u3068\u3088 &hellip; <a class=\"more-link\" href=\"https:\/\/css.programming.jp\/?p=1319\">\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":[3],"tags":[],"class_list":["post-1319","post","type-post","status-publish","format-standard","hentry","category-3"],"_links":{"self":[{"href":"https:\/\/css.programming.jp\/index.php?rest_route=\/wp\/v2\/posts\/1319","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=1319"}],"version-history":[{"count":18,"href":"https:\/\/css.programming.jp\/index.php?rest_route=\/wp\/v2\/posts\/1319\/revisions"}],"predecessor-version":[{"id":1337,"href":"https:\/\/css.programming.jp\/index.php?rest_route=\/wp\/v2\/posts\/1319\/revisions\/1337"}],"wp:attachment":[{"href":"https:\/\/css.programming.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1319"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css.programming.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1319"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css.programming.jp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1319"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}