{"id":844,"date":"2015-04-07T17:15:38","date_gmt":"2015-04-07T08:15:38","guid":{"rendered":"http:\/\/css.programming.jp\/?p=844"},"modified":"2015-04-07T17:16:20","modified_gmt":"2015-04-07T08:16:20","slug":"%e3%83%95%e3%82%a9%e3%83%88%e3%82%ae%e3%83%a3%e3%83%a9%e3%83%aa%e3%83%bc%e3%83%bb%e3%82%b9%e3%83%a9%e3%82%a4%e3%83%89%e3%82%b7%e3%83%a7%e3%83%bc%e4%b8%a1%e7%94%a8%e5%9e%8b%ef%bc%88%e3%83%95%e3%82%a7","status":"publish","type":"post","link":"https:\/\/css.programming.jp\/?p=844","title":{"rendered":"\u30d5\u30a9\u30c8\u30ae\u30e3\u30e9\u30ea\u30fc\u30fb\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\u4e21\u7528\u578b\uff08\u30d5\u30a7\u30a4\u30c9\u30a4\u30f3\u30fb\u30a2\u30a6\u30c8\u578b\uff09"},"content":{"rendered":"<p>\u3000\u30b5\u30e0\u30cd\u30a4\u30eb\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u30b9\u30c6\u30fc\u30b8\u306b\u8a72\u5f53\u3059\u308b\u62e1\u5927\u5199\u771f\u304c\u767b\u5834\u3059\u308b\u30bf\u30a4\u30d7\u306e\u30d5\u30a9\u30c8\u30ae\u30e3\u30e9\u30ea\u30fc\u306b\u3001\u300cSlide Show\u300d\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\u304c\u958b\u59cb\u3055\u308c\u308b\u6a5f\u80fd\u3092\u52a0\u3048\u305f\u3082\u306e\u3067\u3042\u308b\u3002<br \/>\n\u3000\u5199\u771f\u306e\u767b\u5834\u30fb\u9000\u5834\u306b\u306f\u3001\u30d5\u30a7\u30a4\u30c9\u30a4\u30f3\u30fb\u30a2\u30a6\u30c8\u52b9\u679c\u3092\u4f7f\u3063\u3066\u3044\u308b\u3002<\/p>\n<div id=\"stage\">\n  <input type=\"radio\" id=\"r1\" name=\"gal\"><br \/>\n  <input type=\"radio\" id=\"r2\" name=\"gal\"><br \/>\n  <input type=\"radio\" id=\"r3\" name=\"gal\"><br \/>\n  <input type=\"radio\" id=\"r4\" name=\"gal\"><br \/>\n  <input type=\"radio\" id=\"r5\" name=\"gal\"><br \/>\n  <input type=\"radio\" id=\"sson\" name=\"gal\"><\/p>\n<div id=\"thumbs\">\n    <label for=\"r1\"><img decoding=\"async\" src=\"wp-images\/s1.jpg\" width=\"115\"><\/label><br \/>\n    <label for=\"r2\"><img decoding=\"async\" src=\"wp-images\/s2.jpg\" width=\"115\"><\/label><br \/>\n    <label for=\"r3\"><img decoding=\"async\" src=\"wp-images\/s3.jpg\" width=\"115\"><\/label><br \/>\n    <label for=\"r4\"><img decoding=\"async\" src=\"wp-images\/s4.jpg\" width=\"115\"><\/label><br \/>\n    <label for=\"r5\"><img decoding=\"async\" src=\"wp-images\/s5.jpg\" width=\"115\"><\/label>\n  <\/div>\n<div id=\"screen\"><span id=\"title\">\u91dd\u30ce\u6728\u5cb3\u304b\u3089\u723a\u30f6\u5cb3\u3078\u306e\u7e26\u8d70\u8def\u306b\u3066<\/span><\/div>\n<div id=\"photos\">\n<div id=\"photo1\" class=\"photo\"><img decoding=\"async\" src=\"wp-images\/1.jpg\"><\/div>\n<div id=\"photo2\" class=\"photo\"><img decoding=\"async\" src=\"wp-images\/2.jpg\"><\/div>\n<div id=\"photo3\" class=\"photo\"><img decoding=\"async\" src=\"wp-images\/3.jpg\"><\/div>\n<div id=\"photo4\" class=\"photo\"><img decoding=\"async\" src=\"wp-images\/4.jpg\"><\/div>\n<div id=\"photo5\" class=\"photo\"><img decoding=\"async\" src=\"wp-images\/5.jpg\"><\/div>\n<\/p><\/div>\n<p>  <label for=\"sson\"><span>>> Slide Show >><\/span><\/label><\/div>\n<\/div>\n<style type=\"text\/css\">\n\/*\u30ae\u30e3\u30e9\u30ea\u30fc\u5168\u4f53\u306e\u30b3\u30f3\u30c6\u30ca\u30fc*\/\n#stage {\n\tposition: relative;\n\twidth: 600px;\n\theight: 455px;\n\toverflow: hidden;\n\tmargin-top: 0;\n\tmargin-right: auto;\n\tmargin-bottom: 0;\n\tmargin-left: auto;\n\tbackground-color:#000;\n}\n\/*\u5168\u30b5\u30e0\u30cd\u30a4\u30eb\u306e\u30b3\u30f3\u30c6\u30ca\u30fc*\/\n#thumbs {\n\tposition: absolute;\n\t width: 630px;\t\n\ttop: 380px;\n\tleft: 5px;\n}\n\/*\u30b5\u30e0\u30cd\u30a4\u30eb\u306e\u30de\u30a6\u30b9\u30aa\u30fc\u30d0\u30fc\u3067\u30dd\u30a4\u30f3\u30bf\u30fc\u3092\u624b\u306e\u3072\u3089*\/\n#thumbs label img {\n\tcursor: pointer;\n        float:left;\n        margin-right:4px;\n}\n\/*\u521d\u671f\u753b\u9762*\/\n#screen {\n\tposition: absolute;\n\ttop: 10px;\n\twidth: 600px;\n\theight: 338px;\n\tbackground-color: #CCC;\n\tz-indes:-10;\n}\n\/*\u521d\u671f\u753b\u9762\u4e0a\u306e\u6587\u5b57*\/\n#screen span {\n\tposition:absolute;\n\ttop:130px;\n\tleft:50px;\n\tfont-size:32px;\n}\n\/*\u30e9\u30b8\u30aa\u30dc\u30bf\u30f3\u3092\u975e\u8868\u793a\u306b*\/\n#r1, #r2, #r3, #r4, #r5, #s1, #s2, #s3, #s4, #s5, #sson {\n\tdisplay: none;\n}\n#photos {\n\tposition:absolute;\n\ttop:10px;\n\twidth:3000px;\n\theight:380px;\n}\n\/*\u8868\u793a\u5199\u771f\u306e\u521d\u671f\u914d\u7f6e\uff08\u5168\u90e8\u900f\u660e\u306b\uff09\u3068transition\u8a2d\u5b9a*\/\n.photo {\n\tposition:relative;\n\tfloat:left;\n}\n.photo {\n\topacity: 0;\n\t-webkit-transition: opacity 1s ease;\n\t-moz-transition: opacity 1s ease;\n\t-o-transition: opacity 1s ease;\n\ttransition: opacity 1s ease;\n}\n#stage label span {\n\tposition:absolute;\n\ttop:355px;\n\tleft:440px;\n\tcursor:pointer;\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\tcolor:#fff;\n}\n\/*\u30c1\u30a7\u30c3\u30af\u3055\u308c\u305f\u30b5\u30e0\u30cd\u30a4\u30eb\u306b\u76f8\u5f53\u3059\u308b\u5199\u771f\u3060\u3051\u3092\u8868\u793a*\/\n#r1:checked ~ #photos #photo1,#r2:checked ~ #photos #photo2,#r3:checked ~ #photos #photo3, #r4:checked ~ #photos #photo4, #r5:checked ~ #photos #photo5 {\n\topacity: 1;\n}\n#r2:checked ~ #photos {\n\tleft:-100%;\n}\n#r3:checked ~ #photos {\n\tleft:-200%;\n}\n#r4:checked ~ #photos {\n\tleft:-300%;\n}\n#r5:checked ~ #photos {\n\tleft:-400%;\n}\n\/*\u3069\u308c\u304b\u304c\u30c1\u30a7\u30c3\u30af\u3055\u308c\u305f\u3089\u30b9\u30af\u30ea\u30fc\u30f3\u4e0a\u306e\u6587\u5b57\u3092\u975e\u8868\u793a\u306b*\/\n#r1:checked ~ #screen, #r2:checked ~ #screen, #r3:checked ~ #screen, #r4:checked ~ #screen, #r5:checked ~ #screen, #sson:checked ~ #screen {\n\topacity: 0;\n}\n\/* sson\u30dc\u30bf\u30f3\u30af\u30ea\u30c3\u30af\u3067\u62e1\u5927\u5199\u771f\u306eopacity\u30921\u306b *\/\n#sson:checked ~ #photos .photo, #s2:checked ~ #photos .photo, #s3:checked ~ #photos .photo, #s4:checked ~ #photos .photo, #s5:checked ~ #photos .photo {\n\topacity:1;\n}\n\/* sson\u30dc\u30bf\u30f3\u30af\u30ea\u30c3\u30af\u3067\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\u3092\u958b\u59cb *\/\n#sson:checked ~ #photos {\n\tanimation:imgPassToLeft 30s infinite;\n\t-webkit-animation:imgPassToLeft 30s infinite;\n}\n\/* animation\u8a2d\u5b9a *\/\n@keyframes imgPassToLeft {\n\t0%  {   left:   0%;opacity:0;}\n\t4%  {   left:   0%;opacity:1;}\n\t16% {   left:   0%;opacity:1;}\n\t19.99%{ left:   0%;opacity:0;}\n\t20% {   left:-100%;opacity:0;}\n\t24% {   left:-100%;opacity:1;} \n\t36% {   left:-100%;opacity:1;}\n\t39.99%{ left:-100%;opacity:0;}\n\t40% {   left:-200%;opacity:0;}\n\t44% {   left:-200%;opacity:1;}\n\t56% {   left:-200%;opacity:1;}\n\t59.99%{ left:-200%;opacity:0;}\n\t60% {   left:-300%;opacity:0;}\n\t64% {   left:-300%;opacity:1;}\n\t76% {   left:-300%;opacity:1;} \n\t79.99%{ left:-300%;opacity:0;}\n\t80% {   left:-400%;opacity:0;}\n\t84% {   left:-400%;opacity:1;}\n\t96% {   left:-400%;opacity:1;}\n\t99.99%{ left:-400%;opacity:0;}\n\t100% {  left:   0%;opacity:0;}\n}\n@-webkit-keyframes imgPassToLeft {\n\t0%  {   left:   0%;opacity:0;}\n\t4%  {   left:   0%;opacity:1;}\n\t16% {   left:   0%;opacity:1;}\n\t19.99%{ left:   0%;opacity:0;}\n\t20% {   left:-100%;opacity:0;}\n\t24% {   left:-100%;opacity:1;} \n\t36% {   left:-100%;opacity:1;}\n\t39.99%{ left:-100%;opacity:0;}\n\t40% {   left:-200%;opacity:0;}\n\t44% {   left:-200%;opacity:1;}\n\t56% {   left:-200%;opacity:1;}\n\t59.99%{ left:-200%;opacity:0;}\n\t60% {   left:-300%;opacity:0;}\n\t64% {   left:-300%;opacity:1;}\n\t76% {   left:-300%;opacity:1;} \n\t79.99%{ left:-300%;opacity:0;}\n\t80% {   left:-400%;opacity:0;}\n\t84% {   left:-400%;opacity:1;}\n\t96% {   left:-400%;opacity:1;}\n\t99.99%{ left:-400%;opacity:0;}\n\t100% {  left:   0%;opacity:0;}\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;div id=\"stage\"&gt;\r\n  &lt;input type=\"radio\" id=\"r1\" name=\"gal\"&gt;\r\n  &lt;input type=\"radio\" id=\"r2\" name=\"gal\"&gt;\r\n  &lt;input type=\"radio\" id=\"r3\" name=\"gal\"&gt;\r\n  &lt;input type=\"radio\" id=\"r4\" name=\"gal\"&gt;\r\n  &lt;input type=\"radio\" id=\"r5\" name=\"gal\"&gt;\r\n  &lt;input type=\"radio\" id=\"sson\" name=\"gal\"&gt;\r\n  &lt;div id=\"thumbs\"&gt;\r\n    &lt;label for=\"r1\"&gt;&lt;img src=\"img2\/s1.jpg\" width=\"115\"&gt;&lt;\/label&gt;\r\n    &lt;label for=\"r2\"&gt;&lt;img src=\"img2\/s2.jpg\" width=\"115\"&gt;&lt;\/label&gt;\r\n    &lt;label for=\"r3\"&gt;&lt;img src=\"img2\/s3.jpg\" width=\"115\"&gt;&lt;\/label&gt;\r\n    &lt;label for=\"r4\"&gt;&lt;img src=\"img2\/s4.jpg\" width=\"115\"&gt;&lt;\/label&gt;\r\n    &lt;label for=\"r5\"&gt;&lt;img src=\"img2\/s5.jpg\" width=\"115\"&gt;&lt;\/label&gt;\r\n  &lt;\/div&gt;\r\n  &lt;div id=\"screen\"&gt;&lt;span id=\"title\"&gt;\u91dd\u30ce\u6728\u5cb3\u304b\u3089\u723a\u30f6\u5cb3\u3078\u306e\u7e26\u8d70\u8def\u306b\u3066&lt;\/span&gt;&lt;\/div&gt;\r\n  &lt;div id=\"photos\"&gt;\r\n    &lt;div id=\"photo1\" class=\"photo\"&gt;&lt;img src=\"img2\/1.jpg\"&gt;&lt;\/div&gt;\r\n    &lt;div id=\"photo2\" class=\"photo\"&gt;&lt;img src=\"img2\/2.jpg\"&gt;&lt;\/div&gt;\r\n    &lt;div id=\"photo3\" class=\"photo\"&gt;&lt;img src=\"img2\/3.jpg\"&gt;&lt;\/div&gt;\r\n    &lt;div id=\"photo4\" class=\"photo\"&gt;&lt;img src=\"img2\/4.jpg\"&gt;&lt;\/div&gt;\r\n    &lt;div id=\"photo5\" class=\"photo\"&gt;&lt;img src=\"img2\/5.jpg\"&gt;&lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n  &lt;label for=\"sson\"&gt;&lt;span&gt;&gt;&gt; Slide Show &gt;&gt;&lt;\/span&gt;&lt;\/label&gt;&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<h4>HTML\u306e\u30dd\u30a4\u30f3\u30c8\u8aac\u660e<\/h4>\n<p>\u30fb\u30e9\u30b8\u30aa\u30dc\u30bf\u30f3 #r1 &#8211; #r5 \u3092\u5404\u30b5\u30e0\u30cd\u30a4\u30eb\u306b\u95a2\u9023\u4ed8\u3051\u3001#sson \u3092Slide Show \u30dc\u30bf\u30f3\u306b\u95a2\u9023\u4ed8\u3051\u3066\u3044\u308b\u3002<br \/>\n\u30fb#r1 &#8211; #r5 \u306f\u3001\u30b5\u30e0\u30cd\u30a4\u30eb\u30af\u30ea\u30c3\u30af\u3067\u62e1\u5927\u5199\u771f\u306e\u8868\u793atransition\u306e\u30c8\u30ea\u30ac\u30fc\u3068\u3057\u3066\u3001#sson \u306f\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fcanimation\u306e\u958b\u59cb\u306b\u6a5f\u80fd\u3055\u305b\u3066\u3044\u308b\u3002<br \/>\n\u30fb\u3053\u306e\u30b5\u30f3\u30d7\u30eb\u3067\u306f\u3001\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\u306f\u5168\u3066\uff11\u679a\u76ee\u304b\u3089\u30b9\u30bf\u30fc\u30c8\u3059\u308b\u3088\u3046\u306b\u8a2d\u5b9a\u3057\u3066\u3044\u308b\u304c\u3001\u8868\u793a\u30b9\u30e9\u30a4\u30c9\u304b\u3089\u958b\u59cb\u3055\u305b\u308b\u3088\u3046\u306b\u3057\u305f\u3044\u5834\u5408\u306f\u3001\u5404\u30b9\u30e9\u30a4\u30c9\u305d\u308c\u305e\u308c\u306b\u4ed8\u968f\u3057\u305fSlideShow\u30dc\u30bf\u30f3\u3092\u8868\u793a\u3055\u305b\u306a\u3051\u308c\u3070\u306a\u3089\u306a\u3044\u3002<br \/>\n\uff08\u5404\u30b9\u30e9\u30a4\u30c9\u306eDIV\u3001\u4f8b\u3048\u3070\u3001#photo1\u5185\u306b\u3001label\u3068\u3057\u3066sson1\u306a\u3069\u3068\u3057\u3066\u72ec\u81ea\u306eSlideShow\u30dc\u30bf\u30f3\u3092\u7f6e\u304f\uff09<\/p>\n<h4>\u672c\u30b5\u30f3\u30d7\u30eb\u8868\u793a\u7528\uff23\uff33\uff33<\/h4>\n<pre>\r\n#stage {\r\n\tposition: relative;\r\n\twidth: 600px;\r\n\theight: 455px;\r\n\toverflow: hidden;\r\n\tmargin-top: 0;\r\n\tmargin-right: auto;\r\n\tmargin-bottom: 0;\r\n\tmargin-left: auto;\r\n\tbackground-color:#000;\r\n}\r\n\/*\u5168\u30b5\u30e0\u30cd\u30a4\u30eb\u306e\u30b3\u30f3\u30c6\u30ca\u30fc*\/\r\n#thumbs {\r\n\tposition: absolute;\r\n\twidth: 630px;\t\r\n\ttop: 380px;\r\n\tleft: 5px;\r\n}\r\n\/*\u30b5\u30e0\u30cd\u30a4\u30eb\u306e\u30de\u30a6\u30b9\u30aa\u30fc\u30d0\u30fc\u3067\u30dd\u30a4\u30f3\u30bf\u30fc\u3092\u624b\u306e\u3072\u3089*\/\r\n#thumbs label img {\r\n\tcursor: pointer;\r\n}\r\n\/*\u521d\u671f\u753b\u9762*\/\r\n#screen {\r\n\tposition: absolute;\r\n\ttop: 10px;\r\n\twidth: 600px;\r\n\theight: 338px;\r\n\tbackground-color: #CCC;\r\n\tz-indes:-10;\r\n}\r\n\/*\u521d\u671f\u753b\u9762\u4e0a\u306e\u6587\u5b57*\/\r\n#screen span {\r\n\tposition:absolute;\r\n\ttop:130px;\r\n\tleft:50px;\r\n\tfont-size:32px;\r\n}\r\n\/*\u30e9\u30b8\u30aa\u30dc\u30bf\u30f3\u3092\u975e\u8868\u793a\u306b*\/\r\n#r1, #r2, #r3, #r4, #r5, #s1, #s2, #s3, #s4, #s5, #sson {\r\n\tdisplay: none;\r\n}\r\n\/* \u62e1\u5927\u5199\u771f\u3092\u6c34\u5e73\u5e2f\u72b6\u306b\u4e26\u3079\u308b\u30b3\u30f3\u30c6\u30ca\u30fc *\/\r\n#photos {\r\n\tposition:absolute;\r\n\ttop:10px;\r\n\twidth:3000px;\r\n\theight:380px;\r\n}\r\n\/*\u8868\u793a\u5199\u771f\u306e\u521d\u671f\u914d\u7f6e\uff08\u5168\u90e8\u900f\u660e\u306b\uff09\u3068transition\u8a2d\u5b9a*\/\r\n.photo {\r\n\tposition:relative;\r\n\tfloat:left;\r\n}\r\n.photo {\r\n\topacity: 0;\r\n\t-webkit-transition: opacity 1s ease;\r\n\t-moz-transition: opacity 1s ease;\r\n\t-o-transition: opacity 1s ease;\r\n\ttransition: opacity 1s ease;\r\n}\r\n\/* Slide Show \u30dc\u30bf\u30f3 *\/\r\n#stage label span {\r\n\tposition:absolute;\r\n\ttop:355px;\r\n\tleft:440px;\r\n\tcursor:pointer;\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\tcolor:#fff;\r\n}\r\n\/* \u30b5\u30e0\u30cd\u30a4\u30eb\u30af\u30ea\u30c3\u30af\u3067\u3001\u8a72\u5f53\u3059\u308b\u30b9\u30e9\u30a4\u30c9\u3092\u8868\u793a\u3055\u305b\u308b *\/\r\n#r1:checked ~ #photos #photo1,#r2:checked ~ #photos #photo2,#r3:checked ~ #photos #photo3, #r4:checked ~ #photos #photo4, #r5:checked ~ #photos #photo5 {\r\n\topacity: 1;\r\n}\r\n\/* \u30b5\u30e0\u30cd\u30a4\u30eb\u30af\u30ea\u30c3\u30af\u3067\u3001\u304c\u8a72\u5f53\u30b9\u30e9\u30a4\u30c9\u306e\u4f4d\u7f6e\u3092\u753b\u9762\u4e2d\u592e\u306b *\/\r\n#r2:checked ~ #photos {\r\n\tleft:-100%;\r\n}\r\n#r3:checked ~ #photos {\r\n\tleft:-200%;\r\n}\r\n#r4:checked ~ #photos {\r\n\tleft:-300%;\r\n}\r\n#r5:checked ~ #photos {\r\n\tleft:-400%;\r\n}\r\n\/*\u3069\u308c\u304b\u304c\u30c1\u30a7\u30c3\u30af\u3055\u308c\u305f\u3089\u30b9\u30af\u30ea\u30fc\u30f3\u4e0a\u306e\u6587\u5b57\u3092\u975e\u8868\u793a\u306b*\/\r\n#r1:checked ~ #screen, #r2:checked ~ #screen, #r3:checked ~ #screen, #r4:checked ~ #screen, #r5:checked ~ #screen, #sson:checked ~ #screen {\r\n\topacity: 0;\r\n}\r\n\/* sson\u30dc\u30bf\u30f3\u30af\u30ea\u30c3\u30af\u3067\u62e1\u5927\u5199\u771f\u306eopacity\u30921\u306b *\/\r\n#sson:checked ~ #photos .photo, #s2:checked ~ #photos .photo, #s3:checked ~ #photos .photo, #s4:checked ~ #photos .photo, #s5:checked ~ #photos .photo {\r\n\topacity:1;\r\n}\r\n\/* sson\u30dc\u30bf\u30f3\u30af\u30ea\u30c3\u30af\u3067\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\u3092\u958b\u59cb *\/\r\n#sson:checked ~ #photos {\r\n\tanimation:imgPassToLeft 30s infinite;\r\n\t-webkit-animation:imgPassToLeft 30s infinite;\r\n}\r\n\/* animation\u8a2d\u5b9a *\/\r\n@keyframes imgPassToLeft {\r\n\t0%  {   left:   0%;opacity:0;}\r\n\t4%  {   left:   0%;opacity:1;}\r\n\t16% {   left:   0%;opacity:1;}\r\n\t19.99%{ left:   0%;opacity:0;}\r\n\t20% {   left:-100%;opacity:0;}\r\n\t24% {   left:-100%;opacity:1;} \r\n\t36% {   left:-100%;opacity:1;}\r\n\t39.99%{ left:-100%;opacity:0;}\r\n\t40% {   left:-200%;opacity:0;}\r\n\t44% {   left:-200%;opacity:1;}\r\n\t56% {   left:-200%;opacity:1;}\r\n\t59.99%{ left:-200%;opacity:0;}\r\n\t60% {   left:-300%;opacity:0;}\r\n\t64% {   left:-300%;opacity:1;}\r\n\t76% {   left:-300%;opacity:1;} \r\n\t79.99%{ left:-300%;opacity:0;}\r\n\t80% {   left:-400%;opacity:0;}\r\n\t84% {   left:-400%;opacity:1;}\r\n\t96% {   left:-400%;opacity:1;}\r\n\t99.99%{ left:-400%;opacity:0;}\r\n\t100% {  left:   0%;opacity:0;}\r\n}\r\n@-webkit-keyframes imgPassToLeft {\r\n\t0%  {   left:   0%;opacity:0;}\r\n\t4%  {   left:   0%;opacity:1;}\r\n\t16% {   left:   0%;opacity:1;}\r\n\t19.99%{ left:   0%;opacity:0;}\r\n\t20% {   left:-100%;opacity:0;}\r\n\t24% {   left:-100%;opacity:1;} \r\n\t36% {   left:-100%;opacity:1;}\r\n\t39.99%{ left:-100%;opacity:0;}\r\n\t40% {   left:-200%;opacity:0;}\r\n\t44% {   left:-200%;opacity:1;}\r\n\t56% {   left:-200%;opacity:1;}\r\n\t59.99%{ left:-200%;opacity:0;}\r\n\t60% {   left:-300%;opacity:0;}\r\n\t64% {   left:-300%;opacity:1;}\r\n\t76% {   left:-300%;opacity:1;} \r\n\t79.99%{ left:-300%;opacity:0;}\r\n\t80% {   left:-400%;opacity:0;}\r\n\t84% {   left:-400%;opacity:1;}\r\n\t96% {   left:-400%;opacity:1;}\r\n\t99.99%{ left:-400%;opacity:0;}\r\n\t100% {  left:   0%;opacity:0;}\r\n}\r\n<\/pre>\n<h4>\uff23\uff33\uff33\u306e\u30dd\u30a4\u30f3\u30c8\u8aac\u660e<\/h4>\n<p>\u30fb\u30b9\u30e9\u30a4\u30c9\uff08\u62e1\u5927\u5199\u771f\uff09\u3092\u6c34\u5e73\u5e2f\u72b6\u306b\u4e26\u3079\u3066\u7f6e\u304d\u3001\u30b5\u30e0\u30cd\u30a4\u30eb\u30af\u30ea\u30c3\u30af\u3067\u3001\u8a72\u5f53\u30b9\u30e9\u30a4\u30c9\u304c\u30b9\u30c6\u30fc\u30b8\u306b\u8868\u793a\u3055\u308c\u308b\u3088\u3046\u306b\u4f4d\u7f6e\u3092\u8a2d\u5b9a\u3059\u308b\u3002<br \/>\n\u30fb\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\u306f\u3001SlideShow \u30dc\u30bf\u30f3\u30af\u30ea\u30c3\u30af\u3067\u3001\uff11\u679a\u76ee\u3092\u30b9\u30bf\u30fc\u30c8\u3068\u3059\u308banimation\u3092\u958b\u59cb\u3055\u305b\u308b\u3002<br \/>\n\u30fb\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\u3092\u8868\u793a\u30b9\u30e9\u30a4\u30c9\u304b\u3089\u59cb\u3081\u305f\u3044\u5834\u5408\u306f\u3001\u5404\u30b9\u30e9\u30a4\u30c9\u72ec\u81ea\u306e\uff08\u305d\u306e\u30b9\u30e9\u30a4\u30c9\u3092\u8d77\u70b9\u3068\u3059\u308b\uff09animation\u3092\u8a18\u8ff0\u3059\u308b\u5fc5\u8981\u304c\u3042\u308b\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u3000\u30b5\u30e0\u30cd\u30a4\u30eb\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u30b9\u30c6\u30fc\u30b8\u306b\u8a72\u5f53\u3059\u308b\u62e1\u5927\u5199\u771f\u304c\u767b\u5834\u3059\u308b\u30bf\u30a4\u30d7\u306e\u30d5\u30a9\u30c8\u30ae\u30e3\u30e9\u30ea\u30fc\u306b\u3001\u300cSlide Show\u300d\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\u304c\u958b\u59cb\u3055\u308c\u308b\u6a5f\u80fd\u3092\u52a0\u3048\u305f\u3082\u306e\u3067\u3042\u308b\u3002 \u3000\u5199\u771f\u306e\u767b\u5834\u30fb\u9000\u5834\u306b\u306f\u3001\u30d5\u30a7\u30a4 &hellip; <a class=\"more-link\" href=\"https:\/\/css.programming.jp\/?p=844\">\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":[1],"tags":[],"class_list":["post-844","post","type-post","status-publish","format-standard","hentry","category-1"],"_links":{"self":[{"href":"https:\/\/css.programming.jp\/index.php?rest_route=\/wp\/v2\/posts\/844","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=844"}],"version-history":[{"count":14,"href":"https:\/\/css.programming.jp\/index.php?rest_route=\/wp\/v2\/posts\/844\/revisions"}],"predecessor-version":[{"id":858,"href":"https:\/\/css.programming.jp\/index.php?rest_route=\/wp\/v2\/posts\/844\/revisions\/858"}],"wp:attachment":[{"href":"https:\/\/css.programming.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=844"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css.programming.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=844"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css.programming.jp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=844"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}