{"id":1186,"date":"2017-01-01T08:33:49","date_gmt":"2016-12-31T23:33:49","guid":{"rendered":"http:\/\/css.programming.jp\/?p=1186"},"modified":"2017-01-01T10:52:54","modified_gmt":"2017-01-01T01:52:54","slug":"%e5%86%86%e9%81%8b%e5%8b%95%e3%82%b5%e3%83%a0%e3%83%8d%e3%82%a4%e3%83%ab%e6%8b%a1%e5%a4%a7%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=1186","title":{"rendered":"\u5186\u904b\u52d5\u30b5\u30e0\u30cd\u30a4\u30eb\u62e1\u5927\u578b\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc"},"content":{"rendered":"<p>\u30b5\u30e0\u30cd\u30a4\u30eb\u753b\u50cf\u304c\u9023\u306a\u3063\u3066\u5186\u904b\u52d5\u3057\u3066\u3044\u308b\u72b6\u614b\u3067\u3001\u6c34\u5e73\u306b\u306a\u3063\u305f\u30b5\u30e0\u30cd\u30a4\u30eb\u753b\u50cf\u3092\u62e1\u5927\u3057\u3066\u3001\u8868\u793a\u67a0\u3044\u3063\u3071\u3044\u306b\u8868\u793a\u3055\u305b\u308b\u30bf\u30a4\u30d7\u306e\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\u3067\u3042\u308b\u3002<br \/>\n\u3053\u306e\u30b5\u30f3\u30d7\u30eb\u3067\u306f\u3001\u5e45600pix\u306e\u5199\u771f\u3092\u8868\u793a\u3055\u305b\u3066\u3044\u308b\u304c\u3001\u4ed6\u306e\u30b5\u30a4\u30ba\u306e\u5199\u771f\u3092\u305d\u308d\u3048\u3066\u3001css\u306emax-width\u3092\u305d\u306e\u30b5\u30a4\u30ba\u306b\u4ee3\u3048\u308c\u3070\u3001\u4ed6\u306e\u30b3\u30fc\u30c9\u306f\u305d\u306e\u307e\u307e\u3067\u3001\u305d\u306e\u30b5\u30a4\u30ba\u306e\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\u306b\u306a\u308b\u3002\u3057\u305f\u304c\u3063\u3066\u3001\u753b\u9762\u30b5\u30a4\u30ba\u306b\u5fdc\u3058\u3066\u8868\u793a\u30b5\u30a4\u30ba\u304c\u5909\u5316\u3059\u308b\u3001\u3044\u308f\u3086\u308b\u3001\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30bf\u30a4\u30d7\u306b\u306a\u3063\u3066\u3044\u308b\u3002<br \/>\n\u307e\u305f\u3001\u679a\u6570\u3092\u5909\u66f4\u3059\u308b\u3068\u304d\u306b\u3069\u306e\u3088\u3046\u306a\u8a18\u8ff0\u306b\u3059\u308c\u3070\u3088\u3044\u304b\u3068\u3044\u3046\u8cea\u554f\u3092\u3088\u304f\u53d7\u3051\u308b\u304c\u3001@keframes\u5185\u306e\u8a18\u8ff0\u304c\u809d\u3067\u3001100% \u00f7 \u679a\u6570\u306e%\u5024\u3067\u30b9\u30e9\u30a4\u30c9\u79fb\u52d5\u306e\u533a\u5207\u308a\u3092\u3064\u3051\u308b\u3088\u3046\u306b\u3059\u308b\u3053\u3068\u3002\u4ed6\u306e\u7a3f\u3067\u4f55\u5ea6\u3082\u8aac\u660e\u3057\u3066\u3044\u308b\u306e\u3067\u3001\u305d\u3061\u3089\u306e\u30b3\u30e1\u30f3\u30c8\u6b04\u3092\u53c2\u8003\u306b\u3057\u3066\u307b\u3057\u3044\u3002<br \/>\n\u306a\u304a\u3001\u3053\u3053\u3067\u306f\u3001\u30b5\u30e0\u30cd\u30a4\u30eb\u3092\u534a\u5186\u3067\u79fb\u52d5\u3055\u305b\u3066\u3044\u308b\u304c\u3001\u30b9\u30e9\u30a4\u30c9\u6570\u304c\u5897\u3048\u308c\u3070\u30d5\u30eb\u306e\u5186\u3067\u79fb\u52d5\u3055\u305b\u308b\u3053\u3068\u3082\u53ef\u80fd\u3067\u3042\u308a\u3001\u307e\u305f\u3001\u5186\u306e\u30c8\u30c3\u30d7\u3067\u3042\u3075\u308c\u305f\u30b9\u30e9\u30a4\u30c9\u3092\u5f85\u6a5f\u3055\u305b\u308b\u3088\u3046\u306b\u3059\u308c\u3070\u3001\u30b9\u30e9\u30a4\u30c9\u6570\u304c\u3082\u3063\u3068\u5897\u3048\u3066\u3082\u4f5c\u6210\u306f\u53ef\u80fd\u3067\u3042\u308b\u3002<\/p>\n<h4>\u30b5\u30f3\u30d7\u30eb\uff08DEMO\uff09<\/h4>\n<p><!-- \u6a19\u793a\u7dcf\u67a0 --><\/p>\n<div id=\"stage\">\n<!-- \u30b5\u30e0\u30cd\u30a4\u30eb\u8868\u793a\u67a0 --><\/p>\n<div id=\"thumbs\">\n<!-- \u8868\u793a\u5199\u771f --><\/p>\n<div id=\"t1\" class=\"thumb\"><img decoding=\"async\" src=\"wp-images\/m1.jpg\"><\/div>\n<div id=\"t2\" class=\"thumb\"><img decoding=\"async\" src=\"wp-images\/m2.jpg\"><\/div>\n<div id=\"t3\" class=\"thumb\"><img decoding=\"async\" src=\"wp-images\/m3.jpg\"><\/div>\n<div id=\"t4\" class=\"thumb\"><img decoding=\"async\" src=\"wp-images\/m4.jpg\"><\/div>\n<div id=\"t5\" class=\"thumb\"><img decoding=\"async\" src=\"wp-images\/m5.jpg\"><\/div>\n<div id=\"t6\" class=\"thumb\"><img decoding=\"async\" src=\"wp-images\/m6.jpg\"><\/div>\n<div id=\"t7\" class=\"thumb\"><img decoding=\"async\" src=\"wp-images\/m7.jpg\"><\/div>\n<div id=\"t8\" class=\"thumb\"><img decoding=\"async\" src=\"wp-images\/m8.jpg\"><\/div>\n<\/p><\/div>\n<p><!-- stage\u306b\u9ad8\u3055\u3092\u8a2d\u3051\u308b\uff08\u9ad8\u3055\/\u5e45*100%\uff09--><\/p>\n<div style=\"padding-top:56.3%;\"><\/div>\n<\/div>\n<style type=\"text\/css\">\n\/* \u8868\u793a\u7dcf\u67a0\uff08max-width\u3092\u5909\u3048\u308b\u3068\u305d\u306e\u30b5\u30a4\u30ba\u3067\u8868\u793a\uff09 *\/\n#stage { max-width:600px;background:#999;position:relative; }\n\/* \u30b5\u30e0\u30cd\u30a4\u30eb\u8868\u793a\u67a0 *\/\n#thumbs { width:100%; }\n\/* \u30b5\u30e0\u30cd\u30a4\u30eb\u753b\u50cf *\/\n.thumb img {\n\twidth:13%;\n\ttransform-origin:-100% 50%;\n\tposition:absolute;\n\ttop:45%;\n\tleft:45%;\n}\n\/* \u30b5\u30e0\u30cd\u30a4\u30eb\u753b\u50cf\u306eaniomation\u8a2d\u5b9a *\/\n#t1 img { animation:thumbRotation 48s linear infinite;animation-delay:-12s; }\n#t2 img { transform:rotate(-90deg);animation:thumbRotation 48s linear infinite;animation-delay:-6s; }\n#t3 img { transform:rotate(-90deg);animation:thumbRotation 48s linear infinite;animation-delay: 0s; }\n#t4 img { transform:rotate(-90deg);animation:thumbRotation 48s linear infinite;animation-delay: 6s; }\n#t5 img { transform:rotate(-90deg);animation:thumbRotation 48s linear infinite;animation-delay:12s; }\n#t6 img { transform:rotate(-90deg);animation:thumbRotation 48s linear infinite;animation-delay:18s; }\n#t7 img { transform:rotate(-90deg);animation:thumbRotation 48s linear infinite;animation-delay:24s; }\n#t8 img { transform:rotate(-90deg);animation:thumbRotation 48s linear infinite;animation-delay:30s; }\n\/* animation *\/\n@keyframes thumbRotation { \n0%    { transform:rotate(-90deg) } \n1%    { transform:rotate(-60deg) } \n12.5% { transform:rotate(-60deg) } \n13.5% { transform:rotate(-30deg) }\n25%   { transform:rotate(-30deg) }\n26%   { transform:rotate( 0deg); }\n27%   { transform:rotate( 0deg);width:10%;top:45%;left:45%;z-index:0; }\n28%   { transform:rotate( 0deg);width:100%;top:0;left:0;z-index:100; }\n36.5% { transform:rotate( 0deg);width:100%;top:0;left:0;z-index:100; }\n37.5% { transform:rotate( 0deg);width:10%;top:45%;left:45%;z-index:0; }\n38.5% { transform:rotate( 30deg) }\n50%   { transform:rotate( 30deg) }\n51%   { transform:rotate( 60deg) }\n62.5% { transform:rotate( 60deg) }\n63.5% { transform:rotate( 90deg) }\n75%   { transform:rotate( 90deg);opacity:1; }\n76%   { transform:rotate( 120deg);opacity:0; }\n87.5% { transform:rotate( 270deg);;opacity:0; }\n88.5% { transform:rotate( 270deg);opacity:1; }\n100%  { transform:rotate( 270deg); opacity:1; }\n}\n<\/style>\n<p><\/p>\n<h4>\u6e96\u5099<\/h4>\n<p>\u3053\u3053\u3067\u306f\u30011000*563\u306e\u5199\u771f\u30928\u679a\u7528\u610f\u3057\u305f\u3002<br \/>\n\u305f\u3060\u3057\u3001\u3053\u3053\u3067\u306e\u8868\u793a\u306f\u3001css\u306emax-width\u3092600px\u306b\u3057\u3066\u3001\u5e45600pix\u3067\u8868\u793a\u3055\u305b\u3066\u3044\u308b\u3002\u3059\u306a\u308f\u3061\u3001max-width\u3067\u8868\u793a\u30b5\u30a4\u30ba\u304c\u6c7a\u5b9a\u3055\u308c\u3001\u4ed6\u306e\u8a18\u8ff0\u306f\u540c\u3058\u3067\u3088\u3044\u3002\u3082\u3061\u308d\u3093\u3001\u8868\u793a\u30b5\u30a4\u30ba\u76f8\u5fdc\u306e\u30b5\u30a4\u30ba\u306e\u5199\u771f\u304c\u7528\u610f\u3055\u308c\u306a\u3051\u308c\u3070\u306a\u3089\u306a\u3044\u304c\u3002<\/p>\n<h4>\u672c\u30b5\u30f3\u30d7\u30eb\u8868\u793a\u7528HTML<\/h4>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;!-- \u6a19\u793a\u7dcf\u67a0 --&gt;\r\n&lt;div id=&quot;stage&quot;&gt;\r\n&lt;!-- \u30b5\u30e0\u30cd\u30a4\u30eb\u8868\u793a\u67a0 --&gt;\r\n  &lt;div id=&quot;thumbs&quot;&gt;\r\n&lt;!-- \u8868\u793a\u5199\u771f --&gt;\r\n\t&lt;div id=&quot;t1&quot; class=&quot;thumb&quot;&gt;&lt;img src=&quot;wp-images\/m1.jpg&quot;&gt;&lt;\/div&gt;\r\n\t&lt;div id=&quot;t2&quot; class=&quot;thumb&quot;&gt;&lt;img src=&quot;wp-images\/m2.jpg&quot;&gt;&lt;\/div&gt;\r\n\t&lt;div id=&quot;t3&quot; class=&quot;thumb&quot;&gt;&lt;img src=&quot;wp-images\/m3.jpg&quot;&gt;&lt;\/div&gt;\r\n\t&lt;div id=&quot;t4&quot; class=&quot;thumb&quot;&gt;&lt;img src=&quot;wp-images\/m4.jpg&quot;&gt;&lt;\/div&gt;\r\n\t&lt;div id=&quot;t5&quot; class=&quot;thumb&quot;&gt;&lt;img src=&quot;wp-images\/m5.jpg&quot;&gt;&lt;\/div&gt;\r\n\t&lt;div id=&quot;t6&quot; class=&quot;thumb&quot;&gt;&lt;img src=&quot;wp-images\/m6.jpg&quot;&gt;&lt;\/div&gt;\r\n\t&lt;div id=&quot;t7&quot; class=&quot;thumb&quot;&gt;&lt;img src=&quot;wp-images\/m7.jpg&quot;&gt;&lt;\/div&gt;\r\n\t&lt;div id=&quot;t8&quot; class=&quot;thumb&quot;&gt;&lt;img src=&quot;wp-images\/m8.jpg&quot;&gt;&lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n&lt;!-- stage\u306b\u9ad8\u3055\u3092\u8a2d\u3051\u308b\uff08\u9ad8\u3055\/\u5e45*100%\uff09--&gt;\r\n  &lt;div style=&quot;padding-top:56.3%;&quot;&gt;&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<h4>\u672c\u30b5\u30f3\u30d7\u30eb\u8868\u793a\u7528CSS<\/h4>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n\/* \u8868\u793a\u7dcf\u67a0\uff08max-width\u3092\u5909\u3048\u308b\u3068\u305d\u306e\u30b5\u30a4\u30ba\u3067\u8868\u793a\uff09 *\/\r\n#stage { max-width:1000px;background:#999;position:relative; }\r\n\/* \u30b5\u30e0\u30cd\u30a4\u30eb\u8868\u793a\u67a0 *\/\r\n#thumbs { width:100%; }\r\n\/* \u30b5\u30e0\u30cd\u30a4\u30eb\u753b\u50cf *\/\r\n.thumb img {\r\n\twidth:12%;\r\n\ttransform-origin:-100% 50%;\r\n\tposition:absolute;\r\n\ttop:45%;\r\n\tleft:45%;\r\n}\r\n\/* \u30b5\u30e0\u30cd\u30a4\u30eb\u753b\u50cf\u306eaniomation\u8a2d\u5b9a *\/\r\n#t1 img { animation:thumbRotation 48s linear infinite;animation-delay:-12s; }\r\n#t2 img { transform:rotate(-90deg);animation:thumbRotation 48s linear infinite;animation-delay:-6s; }\r\n#t3 img { transform:rotate(-90deg);animation:thumbRotation 48s linear infinite;animation-delay: 0s; }\r\n#t4 img { transform:rotate(-90deg);animation:thumbRotation 48s linear infinite;animation-delay: 6s; }\r\n#t5 img { transform:rotate(-90deg);animation:thumbRotation 48s linear infinite;animation-delay:12s; }\r\n#t6 img { transform:rotate(-90deg);animation:thumbRotation 48s linear infinite;animation-delay:18s; }\r\n#t7 img { transform:rotate(-90deg);animation:thumbRotation 48s linear infinite;animation-delay:24s; }\r\n#t8 img { transform:rotate(-90deg);animation:thumbRotation 48s linear infinite;animation-delay:30s; }\r\n\/* animation *\/\r\n@keyframes thumbRotation { \r\n0%    { transform:rotate(-90deg) } \r\n1%    { transform:rotate(-60deg) } \r\n12.5% { transform:rotate(-60deg) } \r\n13.5% { transform:rotate(-30deg) }\r\n25%   { transform:rotate(-30deg) }\r\n26%   { transform:rotate( 0deg); }\r\n27%   { transform:rotate( 0deg);width:10%;top:45%;left:45%;z-index:0; }\r\n28%   { transform:rotate( 0deg);width:100%;top:0;left:0;z-index:100; }\r\n36.5% { transform:rotate( 0deg);width:100%;top:0;left:0;z-index:100; }\r\n37.5% { transform:rotate( 0deg);width:10%;top:45%;left:45%;z-index:0; }\r\n38.5% { transform:rotate( 30deg) }\r\n50%   { transform:rotate( 30deg) }\r\n51%   { transform:rotate( 60deg) }\r\n62.5% { transform:rotate( 60deg) }\r\n63.5% { transform:rotate( 90deg) }\r\n75%   { transform:rotate( 90deg);opacity:1; }\r\n76%   { transform:rotate( 120deg);opacity:0; }\r\n87.5% { transform:rotate( 270deg);;opacity:0; }\r\n88.5% { transform:rotate( 270deg);opacity:1; }\r\n100%  { transform:rotate( 270deg); opacity:1; }\r\n}\r\n<\/pre>\n<h4>CSS\u306e\u30dd\u30a4\u30f3\u30c8\u8aac\u660e<\/h4>\n<p>\u30fb#stage\u306emax-width\u3067\u8868\u793a\u30b5\u30a4\u30ba\u3092\u6c7a\u3081\u3066\u3044\u308b\u3002<br \/>\n\u30fb\u30b5\u30e0\u30cd\u30a4\u30eb\uff08.thumb img\uff09\u306e\u5e45\u306f\u3001\u3053\u3053\u3067\u306f\u7528\u610f\u3057\u305f\u5199\u771f\u306e12%\u3068\u3057\u3066\u3044\u3066\u3001\u62e1\u5927\u8868\u793a\u3059\u308b\u3068\u304d\u306f\u3001\u67a0\u5185100%\u306b\u62e1\u5927\u3059\u308b\u3002<br \/>\n\u30fbtransform\uff08\u56de\u8ee2\uff09\u306e\u4e2d\u5fc3\u3092\u3001transform-origin:-100% 50%;\u3068\u3057\u3066\u3044\u308b\u306e\u3067\u3001\u67a0\u5916\u306e\u70b9\u3092\u4e2d\u5fc3\u306b\u30b5\u30e0\u30cd\u30a4\u30eb\u304c\u5186\u904b\u52d5\u3092\u3059\u308b\u3002<br \/>\n\u30fbanimation\u306f\u540c\u3058@keyframes\u8a18\u8ff0\u3092\u4f7f\u3044\u3001\u958b\u59cb\u306e\u6642\u9593\u306b\u30e9\u30b0\u3092\u3064\u3051\u3066\u3001\u9806\u6b21\u3001\u79fb\u52d5\u30fb\u62e1\u5927\u30fb\u7e2e\u5c0f\u30fb\u79fb\u52d5\u3059\u308b\u3088\u3046\u306b\u3057\u3066\u3044\u308b\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u30b5\u30e0\u30cd\u30a4\u30eb\u753b\u50cf\u304c\u9023\u306a\u3063\u3066\u5186\u904b\u52d5\u3057\u3066\u3044\u308b\u72b6\u614b\u3067\u3001\u6c34\u5e73\u306b\u306a\u3063\u305f\u30b5\u30e0\u30cd\u30a4\u30eb\u753b\u50cf\u3092\u62e1\u5927\u3057\u3066\u3001\u8868\u793a\u67a0\u3044\u3063\u3071\u3044\u306b\u8868\u793a\u3055\u305b\u308b\u30bf\u30a4\u30d7\u306e\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\u3067\u3042\u308b\u3002 \u3053\u306e\u30b5\u30f3\u30d7\u30eb\u3067\u306f\u3001\u5e45600pix\u306e\u5199\u771f\u3092\u8868\u793a\u3055\u305b\u3066\u3044\u308b\u304c\u3001\u4ed6\u306e\u30b5\u30a4\u30ba\u306e\u5199\u771f\u3092\u305d &hellip; <a class=\"more-link\" href=\"https:\/\/css.programming.jp\/?p=1186\">\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-1186","post","type-post","status-publish","format-standard","hentry","category-3"],"_links":{"self":[{"href":"https:\/\/css.programming.jp\/index.php?rest_route=\/wp\/v2\/posts\/1186","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=1186"}],"version-history":[{"count":18,"href":"https:\/\/css.programming.jp\/index.php?rest_route=\/wp\/v2\/posts\/1186\/revisions"}],"predecessor-version":[{"id":1204,"href":"https:\/\/css.programming.jp\/index.php?rest_route=\/wp\/v2\/posts\/1186\/revisions\/1204"}],"wp:attachment":[{"href":"https:\/\/css.programming.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1186"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css.programming.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1186"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css.programming.jp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1186"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}