{"id":1051,"date":"2016-06-13T11:09:17","date_gmt":"2016-06-13T02:09:17","guid":{"rendered":"http:\/\/css.programming.jp\/?p=1051"},"modified":"2016-08-23T15:39:25","modified_gmt":"2016-08-23T06:39:25","slug":"%e3%82%aa%e3%83%bc%e3%83%ab%e3%82%a4%e3%83%b3%e3%83%af%e3%83%b3%e5%9e%8b%e3%82%b9%e3%83%a9%e3%82%a4%e3%83%80%e3%83%bc","status":"publish","type":"post","link":"https:\/\/css.programming.jp\/?p=1051","title":{"rendered":"\u30aa\u30fc\u30eb\u30a4\u30f3\u30ef\u30f3\u578b\u30b9\u30e9\u30a4\u30c0\u30fc"},"content":{"rendered":"<p>\u3000\u30e6\u30cb\u30af\u30ed\u3084\u30df\u30ba\u30ce\u306e\u30b5\u30a4\u30c8\u306a\u3069\u306a\u3069\u3001\u30c8\u30c3\u30d7\u30da\u30fc\u30b8\u306e\u4e0a\u90e8\u306b\u8868\u793a\u3055\u308c\u3066\u3044\u308b\u30b9\u30e9\u30a4\u30c0\u30fc\u3092\u3088\u304f\u76ee\u306b\u3059\u308b\u3002\u304a\u305d\u3089\u304fjQuery\u306a\u3069\u306ejavascript\u3067\u4f5c\u6210\u3055\u308c\u3066\u3044\u308b\u3068\u601d\u308f\u308c\u308b\u304c\u3001\u3053\u308c\u3092\u3001\u672c\u7a3f\u3067\u306f\u7d14CSS\uff08pure CSS\uff09\u3067\u4f5c\u6210\u3059\u308b\u3002\u3053\u308c\u307e\u3067\u306b\u3082\u3001\u3053\u306e\u30b5\u30a4\u30c8\u3067CSS\u88fd\u30b9\u30e9\u30a4\u30c0\u30fc\u3092\u4f5c\u6210\u3057\u3066\u304d\u305f\u304c\u3001\u4eca\u56de\u306e\u306f\u3001\u5199\u771f\u306e\u4e0b\u306b\u3001\u30b9\u30e9\u30a4\u30c9\u5207\u63db\u3048\u30dc\u30bf\u30f3\u3068\u3001\u73fe\u30b9\u30e9\u30a4\u30c9\u3092\u6a19\u793a\u3059\u308b\u30dc\u30bf\u30f3\u3092\u4ed8\u3051\u52a0\u3048\u305f\u3001\u30aa\u30fc\u30eb\u30a4\u30f3\u30ef\u30f3\u578b\u306e\u30b9\u30e9\u30a4\u30c0\u30fc\u3067\u3042\u308b\u3002\u672c\u30b5\u30f3\u30d7\u30eb\u3092\u571f\u53f0\u306b\u3001CSS\u3092\u99c6\u4f7f\u3059\u308c\u3070\u3001\u81ea\u5206\u306e\u610f\u56f3\u3057\u305f\u30c7\u30b6\u30a4\u30f3\u306e\u30b9\u30e9\u30a4\u30c0\u30fc\u3092\u4f5c\u6210\u3057\u3066\u9802\u3051\u308b\u3068\u601d\u3046\u3002<br \/>\n\u3000\u306a\u304a\u3001\u753b\u9762\u306e\u30b5\u30a4\u30ba\u306b\u9069\u5fdc\u3057\u3066\u8868\u793a\u30b5\u30a4\u30ba\u304c\u7e2e\u5c0f\u3059\u308b\u3088\u3046\u306b\u8a2d\u5b9a\u3057\u305f\u3002<\/p>\n<h4>\u30b5\u30f3\u30d7\u30eb\uff08DEMO\uff09<\/h4>\n<style type=\"text\/css\">\n\/* \u753b\u9762\u4e0a\u90e8\u306e\u5e2f *\/\n#top_belt { max-width:660px;height:15px;background:#666;margin:0 auto; }\n\/*\u30b9\u30e9\u30a4\u30c0\u30fc\u5168\u4f53\u306e\u30b3\u30f3\u30c6\u30ca\u30fc*\/\n#stage {\n\tposition: relative;\n\tmax-width: 660px;\n\tmargin: 0 auto;\n\tbackground:#666;\n\toverflow: hidden;\n}\n\/*\u5168\u30e9\u30b8\u30aa\u30dc\u30bf\u30f3\u3092\u975e\u8868\u793a\u306b*\/\n#r1,#r2,#r3,#r4,#r5,#back1,#back2,#back3,#back4,#back5,#next1,#next2,#next3,#next4,#next5 {\n\tdisplay: none;\n}\n\/* \u8868\u793a\u5207\u63db\u3048\u30dc\u30bf\u30f3\u3068\u8868\u793a\u4f4d\u7f6e *\/\n.circ img {\n\tposition: absolute;\n\tbottom:2.5%;\n\tcursor: pointer;\n}\n#lb1 img { left: 40%;width:3%; }\n#lb2 img { left: 43%;width:3%; }\n#lb3 img { left: 46%;width:3%; }\n#lb4 img { left: 49%;width:3%; }\n#lb5 img { left: 52%;width:3%; }\n\/* \u5de6\u53f3\u9001\u308a\u30dc\u30bf\u30f3 *\/\n.pb, .nb { color:#fff;font-weight:bold; font-size:26px;display:block;position:absolute;top:45%;\/*z-index:200;pointer-events:auto;*\/}\n.pb { left:0%; }\n.nb { left:96%; }\n.pb:hover, .nb:hover { color:orange; cursor:pointer; }\n\/* stage\u304c\u521d\u671f\u30b5\u30a4\u30ba\u4ee5\u4e0b\u306e\u306a\u3063\u305f\u3068\u304d\u306e\u30b5\u30a4\u30ba *\/\n@media screen and (max-width: 660px) { .pb, .nb { font-size:18px; } }\n\/*\u5168\u8868\u793a\u30b9\u30e9\u30a4\u30c9\u306e\u30b3\u30f3\u30c6\u30ca\u30fc*\/\n#photos {\n\tposition: absolute;\n\twidth:100%;\n\theight:90%;\/*100%;*\/\n\tleft: 4.55%;\n\topacity:0;\n\t\/*pointer-events: none;*\/\n\tanimation:flowSlides 40s infinite;\n}\n\/* \u500b\u3005\u306e\u30b9\u30e9\u30a4\u30c9\u30fb\u73fe\u30b9\u30e9\u30a4\u30c9\u6a19\u793a\u30dc\u30bf\u30f3 *\/\n.pic {\n\tposition: absolute;\n\twidth:100%;\n\theight:100%;\n}\n.pic img:nth-child(1) { width:90.9%; margin-left:4.55% !important; }\n.pic img:nth-child(2) { width:3%; bottom:-8.5%;\/*2.5%;*\/ }<\/p>\n<p>\/*\u8868\u793a\u30b9\u30e9\u30a4\u30c9\u3092photos\u306e\u4e2d\u306b\u6a2a\u4e26\u3073\u3067\u4e00\u5217\u306b\u4e26\u3079\u308b*\/\n#photo1 { left: 0; }\n#photo2 { left: 660px; }\n#photo3 { left: 1320px; }\n#photo4 { left: 1980px; }\n#photo5 { left: 2640px; }\n\/* \u5199\u771f\u306e\u4e0b\u306b\u73fe\u30b9\u30e9\u30a4\u30c9\u6a19\u793a\u30dc\u30bf\u30f3\u3092\u914d\u7f6e *\/\n#photo1 img:nth-child(2) { position:absolute;left:40%;width:3%; }\n#photo2 img:nth-child(2) { position:absolute;left:43%;width:3%; }\n#photo3 img:nth-child(2) { position:absolute;left:46%;width:3%; }\n#photo4 img:nth-child(2) { position:absolute;left:49%;width:3%; }\n#photo5 img:nth-child(2) { position:absolute;left:52%;width:3%; }\n\/*\u30c1\u30a7\u30c3\u30af\u3055\u308c\u305f\u30c9\u30c3\u30c8\u306b\u76f8\u5f53\u3059\u308b\u30b9\u30e9\u30a4\u30c9\u304c\u753b\u9762\u4e2d\u592e\u306b\u306a\u308b\u3088\u3046\u306bphotos\u3092\u79fb\u52d5*\/\n#r1:checked ~ #photos { animation:flowSlides1 40s infinite; animation-delay: 0s; }\n#r2:checked ~ #photos { animation:flowSlides2 40s infinite; animation-delay:-8s; }\n#r3:checked ~ #photos { animation:flowSlides3 40s infinite; animation-delay:-16s; }\n#r4:checked ~ #photos { animation:flowSlides4 40s infinite; animation-delay:-24s; }\n#r5:checked ~ #photos { animation:flowSlides5 40s infinite; animation-delay:-32s; }\n\/* \u5de6\u53f3\u9001\u308a\u30dc\u30bf\u30f3 *\/\n#back1:checked ~ #photos { animation:flowSlides5 40s infinite; animation-delay:-32s; }\n#back2:checked ~ #photos { animation:flowSlides1 40s infinite; animation-delay: 0s; }\n#back3:checked ~ #photos { animation:flowSlides2 40s infinite; animation-delay:-8s; }\n#back4:checked ~ #photos { animation:flowSlides3 40s infinite; animation-delay:-16s; }\n#back5:checked ~ #photos { animation:flowSlides4 40s infinite; animation-delay:-24s; }\n#next1:checked ~ #photos { animation:flowSlides2 40s infinite; animation-delay:-8s; }\n#next2:checked ~ #photos { animation:flowSlides3 40s infinite; animation-delay:-16s; }\n#next3:checked ~ #photos { animation:flowSlides4 40s infinite; animation-delay:-24s; }\n#next4:checked ~ #photos { animation:flowSlides5 40s infinite; animation-delay:-32s; }\n#next5:checked ~ #photos { animation:flowSlides1 40s infinite; animation-delay: 0s; }\n\/* \u521d\u671f\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc *\/\n@keyframes flowSlides {\n\t0% { left:0px; opacity:0; }\n\t2% { left:0px; opacity:1; }\n\t18% { left:0px; opacity:1; }\n\t20% { left:0px; opacity:0; }\n\t20.01% { left:-660px; opacity:0; }\n\t22% { left:-660px; opacity:1; }\n\t38% { left:-660px; opacity:1; }\n\t40% { left:-660px; opacity:0; }\n\t40.01% { left:-1320px; opacity:0; }\n\t42% { left:-1320px; opacity:1; }\n\t58% { left:-1320px; opacity:1; }\n\t60% { left:-1320px; opacity:0; }\n\t60.01% { left:-1980px; opacity:0; }\n\t62% { left:-1980px; opacity:1; }\n\t78% { left:-1980px; opacity:1; }\n\t80% { left:-1980px; opacity:0; }\n\t80.01% { left:-2640px; opacity:0; }\n\t82% { left:-2640px; opacity:1; }\n\t98% { left:-2640px; opacity:1; }\n\t100% { left:-2640px; opacity:0; }\n}\n\/* \u5404\u30b9\u30e9\u30a4\u30c9\u5411\u3051\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc *\/\n@keyframes flowSlides1 {\n\t0% { left:0px; opacity:0; }\n\t2% { left:0px; opacity:1; }\n\t18% { left:0px; opacity:1; }\n\t20% { left:0px; opacity:0; }\n\t20.01% { left:-660px; opacity:0; }\n\t22% { left:-660px; opacity:1; }\n\t38% { left:-660px; opacity:1; }\n\t40% { left:-660px; opacity:0; }\n\t40.01% { left:-1320px; opacity:0; }\n\t42% { left:-1320px; opacity:1; }\n\t58% { left:-1320px; opacity:1; }\n\t60% { left:-1320px; opacity:0; }\n\t60.01% { left:-1980px; opacity:0; }\n\t62% { left:-1980px; opacity:1; }\n\t78% { left:-1980px; opacity:1; }\n\t80% { left:-1980px; opacity:0; }\n\t80.01% { left:-2640px; opacity:0; }\n\t82% { left:-2640px; opacity:1; }\n\t98% { left:-2640px; opacity:1; }\n\t100% { left:-2640px; opacity:0; }\n}\n@keyframes flowSlides2 {\n\t0% { left:0px; opacity:0; }\n\t2% { left:0px; opacity:1; }\n\t18% { left:0px; opacity:1; }\n\t20% { left:0px; opacity:0; }\n\t20.01% { left:-660px; opacity:0; }\n\t22% { left:-660px; opacity:1; }\n\t38% { left:-660px; opacity:1; }\n\t40% { left:-660px; opacity:0; }\n\t40.01% { left:-1320px; opacity:0; }\n\t42% { left:-1320px; opacity:1; }\n\t58% { left:-1320px; opacity:1; }\n\t60% { left:-1320px; opacity:0; }\n\t60.01% { left:-1980px; opacity:0; }\n\t62% { left:-1980px; opacity:1; }\n\t78% { left:-1980px; opacity:1; }\n\t80% { left:-1980px; opacity:0; }\n\t80.01% { left:-2640px; opacity:0; }\n\t82% { left:-2640px; opacity:1; }\n\t98% { left:-2640px; opacity:1; }\n\t100% { left:-2640px; opacity:0; }\n}\n@keyframes flowSlides3 {\n\t0% { left:0px; opacity:0; }\n\t2% { left:0px; opacity:1; }\n\t18% { left:0px; opacity:1; }\n\t20% { left:0px; opacity:0; }\n\t20.01% { left:-660px; opacity:0; }\n\t22% { left:-660px; opacity:1; }\n\t38% { left:-660px; opacity:1; }\n\t40% { left:-660px; opacity:0; }\n\t40.01% { left:-1320px; opacity:0; }\n\t42% { left:-1320px; opacity:1; }\n\t58% { left:-1320px; opacity:1; }\n\t60% { left:-1320px; opacity:0; }\n\t60.01% { left:-1980px; opacity:0; }\n\t62% { left:-1980px; opacity:1; }\n\t78% { left:-1980px; opacity:1; }\n\t80% { left:-1980px; opacity:0; }\n\t80.01% { left:-2640px; opacity:0; }\n\t82% { left:-2640px; opacity:1; }\n\t98% { left:-2640px; opacity:1; }\n\t100% { left:-2640px; opacity:0; }\n}\n@keyframes flowSlides4 {\n\t0% { left:0px; opacity:0; }\n\t2% { left:0px; opacity:1; }\n\t18% { left:0px; opacity:1; }\n\t20% { left:0px; opacity:0; }\n\t20.01% { left:-660px; opacity:0; }\n\t22% { left:-660px; opacity:1; }\n\t38% { left:-660px; opacity:1; }\n\t40% { left:-660px; opacity:0; }\n\t40.01% { left:-1320px; opacity:0; }\n\t42% { left:-1320px; opacity:1; }\n\t58% { left:-1320px; opacity:1; }\n\t60% { left:-1320px; opacity:0; }\n\t60.01% { left:-1980px; opacity:0; }\n\t62% { left:-1980px; opacity:1; }\n\t78% { left:-1980px; opacity:1; }\n\t80% { left:-1980px; opacity:0; }\n\t80.01% { left:-2640px; opacity:0; }\n\t82% { left:-2640px; opacity:1; }\n\t98% { left:-2640px; opacity:1; }\n\t100% { left:-2640px; opacity:0; }\n}\n@keyframes flowSlides5 {\n\t0% { left:0px; opacity:0; }\n\t2% { left:0px; opacity:1; }\n\t18% { left:0px; opacity:1; }\n\t20% { left:0px; opacity:0; }\n\t20.01% { left:-660px; opacity:0; }\n\t22% { left:-660px; opacity:1; }\n\t38% { left:-660px; opacity:1; }\n\t40% { left:-660px; opacity:0; }\n\t40.01% { left:-1320px; opacity:0; }\n\t42% { left:-1320px; opacity:1; }\n\t58% { left:-1320px; opacity:1; }\n\t60% { left:-1320px; opacity:0; }\n\t60.01% { left:-1980px; opacity:0; }\n\t62% { left:-1980px; opacity:1; }\n\t78% { left:-1980px; opacity:1; }\n\t80% { left:-1980px; opacity:0; }\n\t80.01% { left:-2640px; opacity:0; }\n\t82% { left:-2640px; opacity:1; }\n\t98% { left:-2640px; opacity:1; }\n\t100% { left:-2640px; opacity:0; }\n}\n<\/style>\n<p><!-- \u753b\u9762\u4e0a\u90e8\u306e\u5e2f --><\/p>\n<div id=\"top_belt\"><\/div>\n<p><!-- \u30b9\u30e9\u30a4\u30c9\u3001\u8868\u793a\u30dc\u30bf\u30f3\u8868\u793a\u67a0 --><\/p>\n<div id=\"stage\">\n  <!-- \u8868\u793a\u30dc\u30bf\u30f3\u7528\u30e9\u30b8\u30aa\u30dc\u30bf\u30f3 --><br \/>\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  <!-- \u9001\u308a\u30dc\u30bf\u30f3\u7528\u30e9\u30b8\u30aa\u30dc\u30bf\u30f3 --><br \/>\n  <input type=\"radio\" id=\"back1\" name=\"gal\"><input type=\"radio\" id=\"next1\" name=\"gal\"><br \/>\n  <input type=\"radio\" id=\"back2\" name=\"gal\"><input type=\"radio\" id=\"next2\" name=\"gal\"><br \/>\n  <input type=\"radio\" id=\"back3\" name=\"gal\"><input type=\"radio\" id=\"next3\" name=\"gal\"><br \/>\n  <input type=\"radio\" id=\"back4\" name=\"gal\"><input type=\"radio\" id=\"next4\" name=\"gal\"><br \/>\n  <input type=\"radio\" id=\"back5\" name=\"gal\"><input type=\"radio\" id=\"next5\" name=\"gal\"><br \/>\n  <!-- \u5207\u63db\u3048\u30dc\u30bf\u30f3\u306e\u30e9\u30b8\u30aa\u30dc\u30bf\u30f3\u3068\u306e\u95a2\u9023\u4ed8\u3051 --><br \/>\n  <label for=\"r1\" id=\"lb1\" class=\"circ\"><img decoding=\"async\" src=\"wp-images\/images\/btn_1.gif\"><\/label><br \/>\n  <label for=\"r2\" id=\"lb2\" class=\"circ\"><img decoding=\"async\" src=\"wp-images\/images\/btn_1.gif\"><\/label><br \/>\n  <label for=\"r3\" id=\"lb3\" class=\"circ\"><img decoding=\"async\" src=\"wp-images\/images\/btn_1.gif\"><\/label><br \/>\n  <label for=\"r4\" id=\"lb4\" class=\"circ\"><img decoding=\"async\" src=\"wp-images\/images\/btn_1.gif\"><\/label><br \/>\n  <label for=\"r5\" id=\"lb5\" class=\"circ\"><img decoding=\"async\" src=\"wp-images\/images\/btn_1.gif\"><\/label><br \/>\n  <!-- \u30b9\u30e9\u30a4\u30c9\u7fa4 --><\/p>\n<div id=\"photos\">\n  \t  <!-- \u30b9\u30e9\u30a4\u30c91 --><\/p>\n<div id=\"photo1\" class=\"pic\">\n        <!-- \u30b9\u30e9\u30a4\u30c9\u5199\u771f\u3068\u9806\u8868\u793a\u30dc\u30bf\u30f3 --><br \/>\n      \t<img decoding=\"async\" src=\"wp-images\/1.jpg\"><img decoding=\"async\" src=\"wp-images\/images\/btn_2.gif\"><br \/>\n        <!-- \u9001\u308a\u30dc\u30bf\u30f3\u306e\u8868\u793a\u3068\u30e9\u30b8\u30aa\u30dc\u30bf\u30f3\u3068\u306e\u95a2\u9023\u4ed8\u3051 --><br \/>\n        <label for=\"back1\"><span class=\"pb\">\uff1c<\/span><\/label><br \/>\n        <label for=\"next1\"><span class=\"nb\">\uff1e<\/span><\/label>\n      <\/div>\n<div id=\"photo2\" class=\"pic\">\n      \t<img decoding=\"async\" src=\"wp-images\/2.jpg\"><img decoding=\"async\" src=\"wp-images\/images\/btn_2.gif\"><br \/>\n        <label for=\"back2\"><span class=\"pb\">\uff1c<\/span><\/label><br \/>\n        <label for=\"next2\"><span class=\"nb\">\uff1e<\/span><\/label>\n      <\/div>\n<div id=\"photo3\" class=\"pic\">\n      \t<img decoding=\"async\" src=\"wp-images\/3.jpg\"><img decoding=\"async\" src=\"wp-images\/images\/btn_2.gif\"><br \/>\n        <label for=\"back3\"><span class=\"pb\">\uff1c<\/span><\/label><br \/>\n        <label for=\"next3\"><span class=\"nb\">\uff1e<\/span><\/label>\n      <\/div>\n<div id=\"photo4\" class=\"pic\">\n      \t<img decoding=\"async\" src=\"wp-images\/4.jpg\"><img decoding=\"async\" src=\"wp-images\/images\/btn_2.gif\"><br \/>\n        <label for=\"back4\"><span class=\"pb\">\uff1c<\/span><\/label><br \/>\n        <label for=\"next4\"><span class=\"nb\">\uff1e<\/span><\/label>\n      <\/div>\n<div id=\"photo5\" class=\"pic\">\n      \t<img decoding=\"async\" src=\"wp-images\/5.jpg\"><img decoding=\"async\" src=\"wp-images\/images\/btn_2.gif\"><br \/>\n        <label for=\"back5\"><span class=\"pb\">\uff1c<\/span><\/label><br \/>\n        <label for=\"next5\"><span class=\"nb\">\uff1e<\/span><\/label>\n      <\/div>\n<\/p><\/div>\n<p>  <!-- stage\u306e\u9ad8\u3055\u306e\u78ba\u4fdd --><\/p>\n<div style=\"padding:28%;\"><\/div>\n<\/div>\n<h4>\u672c\u30b5\u30f3\u30d7\u30eb\u8868\u793a\u7528HTML<\/h4>\n<pre>\r\n&lt;!-- \u753b\u9762\u4e0a\u90e8\u306e\u5e2f --&gt;\r\n&lt;div id=\"top_belt\"&gt;&lt;\/div&gt;\r\n&lt;!-- \u30b9\u30e9\u30a4\u30c9\u8868\u793a\u67a0 --&gt;\r\n&lt;div id=\"stage\"&gt;\r\n  &lt;!-- \u30b9\u30e9\u30a4\u30c9\u5207\u63db\u3048\u30dc\u30bf\u30f3\u7528\u30e9\u30b8\u30aa\u30dc\u30bf\u30f3 --&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;!-- \u9001\u308a\u30dc\u30bf\u30f3\u7528\u30e9\u30b8\u30aa\u30dc\u30bf\u30f3 --&gt;\r\n  &lt;input type=\"radio\" id=\"back1\" name=\"gal\"&gt;&lt;input type=\"radio\" id=\"next1\" name=\"gal\"&gt;\r\n  &lt;input type=\"radio\" id=\"back2\" name=\"gal\"&gt;&lt;input type=\"radio\" id=\"next2\" name=\"gal\"&gt;\r\n  &lt;input type=\"radio\" id=\"back3\" name=\"gal\"&gt;&lt;input type=\"radio\" id=\"next3\" name=\"gal\"&gt;\r\n  &lt;input type=\"radio\" id=\"back4\" name=\"gal\"&gt;&lt;input type=\"radio\" id=\"next4\" name=\"gal\"&gt;\r\n  &lt;input type=\"radio\" id=\"back5\" name=\"gal\"&gt;&lt;input type=\"radio\" id=\"next5\" name=\"gal\"&gt;\r\n  &lt;!-- \u73fe\u30b9\u30e9\u30a4\u30c9\u6a19\u793a\u30dc\u30bf\u30f3\u306e\u30e9\u30b8\u30aa\u30dc\u30bf\u30f3\u3068\u306e\u95a2\u9023\u4ed8\u3051 --&gt;\r\n  &lt;label for=\"r1\" id=\"lb1\" class=\"circ\"&gt;&lt;img src=\"images\/btn_1.gif\"&gt;&lt;\/label&gt;\r\n  &lt;label for=\"r2\" id=\"lb2\" class=\"circ\"&gt;&lt;img src=\"images\/btn_1.gif\"&gt;&lt;\/label&gt;\r\n  &lt;label for=\"r3\" id=\"lb3\" class=\"circ\"&gt;&lt;img src=\"images\/btn_1.gif\"&gt;&lt;\/label&gt;\r\n  &lt;label for=\"r4\" id=\"lb4\" class=\"circ\"&gt;&lt;img src=\"images\/btn_1.gif\"&gt;&lt;\/label&gt;\r\n  &lt;label for=\"r5\" id=\"lb5\" class=\"circ\"&gt;&lt;img src=\"images\/btn_1.gif\"&gt;&lt;\/label&gt;\r\n  &lt;!-- \u30b9\u30e9\u30a4\u30c9\u7fa4 --&gt;\r\n  &lt;div id=\"photos\"&gt;\r\n  \t  &lt;!-- \u30b9\u30e9\u30a4\u30c91 --&gt;\r\n      &lt;div id=\"photo1\" class=\"pic\"&gt;\r\n        &lt;!-- \u30b9\u30e9\u30a4\u30c9\u5199\u771f\u3068\u73fe\u30b9\u30e9\u30a4\u30c9\u6a19\u793a\u30dc\u30bf\u30f3 --&gt;\r\n      \t&lt;img src=\"img2\/1.jpg\"&gt;&lt;img src=\"images\/btn_2.gif\"&gt;\r\n        &lt;!-- \u9001\u308a\u30dc\u30bf\u30f3\u306e\u8868\u793a\u3068\u30e9\u30b8\u30aa\u30dc\u30bf\u30f3\u3068\u306e\u95a2\u9023\u4ed8\u3051 --&gt;\r\n        &lt;label for=\"back1\"&gt;&lt;span class=\"pb\"&gt;\uff1c&lt;\/span&gt;&lt;\/label&gt;\r\n        &lt;label for=\"next1\"&gt;&lt;span class=\"nb\"&gt;\uff1e&lt;\/span&gt;&lt;\/label&gt;\r\n      &lt;\/div&gt;      \r\n      &lt;div id=\"photo2\" class=\"pic\"&gt;\r\n      \t&lt;img src=\"img2\/2.jpg\"&gt;&lt;img src=\"images\/btn_2.gif\"&gt;\r\n        &lt;label for=\"back2\"&gt;&lt;span class=\"pb\"&gt;\uff1c&lt;\/span&gt;&lt;\/label&gt;\r\n        &lt;label for=\"next2\"&gt;&lt;span class=\"nb\"&gt;\uff1e&lt;\/span&gt;&lt;\/label&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div id=\"photo3\" class=\"pic\"&gt;\r\n      \t&lt;img src=\"img2\/3.jpg\"&gt;&lt;img src=\"images\/btn_2.gif\"&gt;\r\n        &lt;label for=\"back3\"&gt;&lt;span class=\"pb\"&gt;\uff1c&lt;\/span&gt;&lt;\/label&gt;\r\n        &lt;label for=\"next3\"&gt;&lt;span class=\"nb\"&gt;\uff1e&lt;\/span&gt;&lt;\/label&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div id=\"photo4\" class=\"pic\"&gt;\r\n      \t&lt;img src=\"img2\/4.jpg\"&gt;&lt;img src=\"images\/btn_2.gif\"&gt;\r\n        &lt;label for=\"back4\"&gt;&lt;span class=\"pb\"&gt;\uff1c&lt;\/span&gt;&lt;\/label&gt;\r\n        &lt;label for=\"next4\"&gt;&lt;span class=\"nb\"&gt;\uff1e&lt;\/span&gt;&lt;\/label&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div id=\"photo5\" class=\"pic\"&gt;\r\n      \t&lt;img src=\"img2\/5.jpg\"&gt;&lt;img src=\"images\/btn_2.gif\"&gt;\r\n        &lt;label for=\"back5\"&gt;&lt;span class=\"pb\"&gt;\uff1c&lt;\/span&gt;&lt;\/label&gt;\r\n        &lt;label for=\"next5\"&gt;&lt;span class=\"nb\"&gt;\uff1e&lt;\/span&gt;&lt;\/label&gt;\r\n      &lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n  &lt;!-- stage\u306e\u9ad8\u3055\u306e\u78ba\u4fdd --&gt;\r\n  &lt;div style=\"padding:28%;\"&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\u30b9\u30e9\u30a4\u30c9\u306f\u3001\u4e21\u5074\u306e\u9001\u308a\u30dc\u30bf\u30f3\u8868\u793a\u67a0\u3068\u305d\u308c\u306b\u631f\u307e\u308c\u305f\u5199\u771f\u67a0\u3068\u3001\u5199\u771f\u4e0b\u90e8\u306e\u73fe\u30b9\u30e9\u30a4\u30c9\u6a19\u793a\u30dc\u30bf\u30f3\u8868\u793a\u67a0\u3068\u304b\u3089\u306a\u308b\u3002<br \/>\n\u30fb\u500b\u3005\u306e\u30b9\u30e9\u30a4\u30c9\u306f\u3001\u6c34\u5e73\u306b\u5e2f\u72b6\u306b\u4e26\u3079\u308b\uff08CSS\u3067\uff09\u3002<br \/>\n\u30fb\u30b9\u30e9\u30a4\u30c9\u5207\u63db\u3048\u30dc\u30bf\u30f3\u306f\u3001\u500b\u3005\u306e\u30b9\u30e9\u30a4\u30c9\u67a0\u5916\u306e\u30b9\u30c6\u30fc\u30b8\u306b\u914d\u7f6e\u3055\u308c\u3001\u73fe\u30b9\u30e9\u30a4\u30c9\u6a19\u793a\u30dc\u30bf\u30f3\u3068\u540c\u3058\u4f4d\u7f6e\u306b\u5404\u30dc\u30bf\u30f3\u304c\u6765\u308b\u3088\u3046\u306b\u914d\u7f6e\u3059\u308b\u3002<\/p>\n<h4>\u672c\u30b5\u30f3\u30d7\u30eb\u8868\u793a\u7528CSS<\/h4>\n<p>\u203b\u5404\u30b9\u30e9\u30a4\u30c9\u306b\u30ea\u30f3\u30af\u3092\u8cbc\u308b\u3053\u3068\u304c\u53ef\u80fd\u306b\u306a\u308b\u3088\u3046\u3001\u4fee\u6b63\u3057\u307e\u3057\u305f\u3002<br \/>\ncss\u8a18\u8ff0\u4e2d\u306b \/* \u3068 *\/ \u3067\u631f\u3093\u3060\u8a18\u8ff0\u304c\u3042\u308a\u307e\u3059\u304c\u3001\u3053\u308c\u306f\u3001\u521d\u671f\u306e\u8a18\u8ff0\u3067\u3001\u4e0d\u8981\u3068\u306a\u3063\u305f\u3082\u306e\u3067\u3059\u3002\u4fee\u6b63\u3057\u305f\u8a18\u8ff0\u304c\u5fc5\u8981\u306a\u3082\u306e\u306f\u3001\u305d\u306e\u524d\u5f8c\u306b\u793a\u3057\u3066\u3042\u308a\u307e\u3059\u306e\u3067\u3001\u305d\u3061\u3089\u3092\u63a1\u7528\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<pre>\r\n\/* \u753b\u9762\u4e0a\u90e8\u306e\u5e2f *\/\r\n#top_belt { max-width:660px;height:15px;background:#666;margin:0 auto; }\r\n\/*\u30b9\u30e9\u30a4\u30c0\u30fc\u5168\u4f53\u306e\u30b3\u30f3\u30c6\u30ca\u30fc*\/\r\n#stage {\r\n\tposition: relative;\r\n\tmax-width: 660px;\r\n\tmargin: 0 auto;\r\n\tbackground:#666;\r\n\toverflow: hidden;\r\n}\r\n\/*\u5168\u30e9\u30b8\u30aa\u30dc\u30bf\u30f3\u3092\u975e\u8868\u793a\u306b*\/\r\n#r1,#r2,#r3,#r4,#r5,#back1,#back2,#back3,#back4,#back5,#next1,#next2,#next3,#next4,#next5 {\r\n\tdisplay: none;\r\n}\r\n\/* \u8868\u793a\u5207\u63db\u3048\u30dc\u30bf\u30f3\u3068\u8868\u793a\u4f4d\u7f6e *\/\r\n.circ img {\r\n\tposition: absolute;\r\n\tbottom:2.5%;\r\n\tcursor: pointer;\r\n}\r\n#lb1 img { left: 40%;width:3%; }\r\n#lb2 img { left: 43%;width:3%; }\r\n#lb3 img { left: 46%;width:3%; }\r\n#lb4 img { left: 49%;width:3%; }\r\n#lb5 img { left: 52%;width:3%; }\r\n\/* \u5de6\u53f3\u9001\u308a\u30dc\u30bf\u30f3 *\/\r\n.pb, .nb { color:#fff;font-weight:bold; font-size:26px;display:block;position:absolute;top:45%;\/*z-index:200;pointer-events:auto;*\/}\r\n.pb { left:0%; }\r\n.nb { left:96%; }\r\n.pb:hover, .nb:hover { color:orange; cursor:pointer; }\r\n\/* stage\u304c\u521d\u671f\u30b5\u30a4\u30ba\u4ee5\u4e0b\u306e\u306a\u3063\u305f\u3068\u304d\u306e\u30b5\u30a4\u30ba *\/\r\n@media screen and (max-width: 660px) { .pb, .nb { font-size:18px; } }\r\n\/*\u5168\u8868\u793a\u30b9\u30e9\u30a4\u30c9\u306e\u30b3\u30f3\u30c6\u30ca\u30fc*\/\r\n#photos {\r\n\tposition: absolute;\r\n\twidth:100%;\r\n\theight:90%; \/*100%;*\/\r\n\tleft: 4.55%;\r\n\topacity:0;\r\n\t\/*pointer-events: none;*\/\r\n\tanimation:flowSlides 40s infinite;\r\n}\r\n\/* \u500b\u3005\u306e\u30b9\u30e9\u30a4\u30c9\u30fb\u73fe\u30b9\u30e9\u30a4\u30c9\u6a19\u793a\u30dc\u30bf\u30f3 *\/\r\n.pic {\r\n\tposition: absolute;\r\n\twidth:100%;\r\n\theight:100%;\r\n}\r\n.pic img:nth-child(1) { width:90.9%; margin-left:4.55%; }\r\n.pic img:nth-child(2) { width:3%; bottom:-8.5%; \/*2.5%;*\/ }\r\n\r\n\/*\u8868\u793a\u30b9\u30e9\u30a4\u30c9\u3092photos\u306e\u4e2d\u306b\u6a2a\u4e26\u3073\u3067\u4e00\u5217\u306b\u4e26\u3079\u308b*\/\r\n#photo1 { left: 0; }\r\n#photo2 { left: 660px; }\r\n#photo3 { left: 1320px; }\r\n#photo4 { left: 1980px; }\r\n#photo5 { left: 2640px; }\r\n\/* \u5199\u771f\u306e\u4e0b\u306b\u73fe\u30b9\u30e9\u30a4\u30c9\u6a19\u793a\u30dc\u30bf\u30f3\u3092\u914d\u7f6e *\/\r\n#photo1 img:nth-child(2) { position:absolute;left:40%;width:3%; }\r\n#photo2 img:nth-child(2) { position:absolute;left:43%;width:3%; }\r\n#photo3 img:nth-child(2) { position:absolute;left:46%;width:3%; }\r\n#photo4 img:nth-child(2) { position:absolute;left:49%;width:3%; }\r\n#photo5 img:nth-child(2) { position:absolute;left:52%;width:3%; }\r\n\/*\u30c1\u30a7\u30c3\u30af\u3055\u308c\u305f\u30c9\u30c3\u30c8\u306b\u76f8\u5f53\u3059\u308b\u30b9\u30e9\u30a4\u30c9\u304c\u753b\u9762\u4e2d\u592e\u306b\u306a\u308b\u3088\u3046\u306bphotos\u3092\u79fb\u52d5*\/\r\n#r1:checked ~ #photos { animation:flowSlides1 40s infinite; animation-delay: 0s; }\r\n#r2:checked ~ #photos { animation:flowSlides2 40s infinite; animation-delay:-8s; }\r\n#r3:checked ~ #photos { animation:flowSlides3 40s infinite; animation-delay:-16s; }\r\n#r4:checked ~ #photos { animation:flowSlides4 40s infinite; animation-delay:-24s; }\r\n#r5:checked ~ #photos { animation:flowSlides5 40s infinite; animation-delay:-32s; }\r\n\/* \u5de6\u53f3\u9001\u308a\u30dc\u30bf\u30f3 *\/\r\n#back1:checked ~ #photos { animation:flowSlides5 40s infinite; animation-delay:-32s; }\r\n#back2:checked ~ #photos { animation:flowSlides1 40s infinite; animation-delay: 0s; }\r\n#back3:checked ~ #photos { animation:flowSlides2 40s infinite; animation-delay:-8s; }\r\n#back4:checked ~ #photos { animation:flowSlides3 40s infinite; animation-delay:-16s; }\r\n#back5:checked ~ #photos { animation:flowSlides4 40s infinite; animation-delay:-24s; }\r\n#next1:checked ~ #photos { animation:flowSlides2 40s infinite; animation-delay:-8s; }\r\n#next2:checked ~ #photos { animation:flowSlides3 40s infinite; animation-delay:-16s; }\r\n#next3:checked ~ #photos { animation:flowSlides4 40s infinite; animation-delay:-24s; }\r\n#next4:checked ~ #photos { animation:flowSlides5 40s infinite; animation-delay:-32s; }\r\n#next5:checked ~ #photos { animation:flowSlides1 40s infinite; animation-delay: 0s; }\r\n\/* \u521d\u671f\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc *\/\r\n@keyframes flowSlides {\r\n\t0% { left:0px; opacity:0; }\r\n\t2% { left:0px; opacity:1; }\r\n\t18% { left:0px; opacity:1; }\r\n\t20% { left:0px; opacity:0; }\r\n\t20.01% { left:-660px; opacity:0; }\r\n\t22% { left:-660px; opacity:1; }\r\n\t38% { left:-660px; opacity:1; }\r\n\t40% { left:-660px; opacity:0; }\r\n\t40.01% { left:-1320px; opacity:0; }\r\n\t42% { left:-1320px; opacity:1; }\r\n\t58% { left:-1320px; opacity:1; }\r\n\t60% { left:-1320px; opacity:0; }\r\n\t60.01% { left:-1980px; opacity:0; }\r\n\t62% { left:-1980px; opacity:1; }\r\n\t78% { left:-1980px; opacity:1; }\r\n\t80% { left:-1980px; opacity:0; }\r\n\t80.01% { left:-2640px; opacity:0; }\r\n\t82% { left:-2640px; opacity:1; }\r\n\t98% { left:-2640px; opacity:1; }\r\n\t100% { left:-2640px; opacity:0; }\r\n}\r\n\/* \u5404\u30b9\u30e9\u30a4\u30c9\u5411\u3051\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc *\/\r\n@keyframes flowSlides1 {\r\n\t0% { left:0px; opacity:0; }\r\n\t2% { left:0px; opacity:1; }\r\n\t18% { left:0px; opacity:1; }\r\n\t20% { left:0px; opacity:0; }\r\n\t20.01% { left:-660px; opacity:0; }\r\n\t22% { left:-660px; opacity:1; }\r\n\t38% { left:-660px; opacity:1; }\r\n\t40% { left:-660px; opacity:0; }\r\n\t40.01% { left:-1320px; opacity:0; }\r\n\t42% { left:-1320px; opacity:1; }\r\n\t58% { left:-1320px; opacity:1; }\r\n\t60% { left:-1320px; opacity:0; }\r\n\t60.01% { left:-1980px; opacity:0; }\r\n\t62% { left:-1980px; opacity:1; }\r\n\t78% { left:-1980px; opacity:1; }\r\n\t80% { left:-1980px; opacity:0; }\r\n\t80.01% { left:-2640px; opacity:0; }\r\n\t82% { left:-2640px; opacity:1; }\r\n\t98% { left:-2640px; opacity:1; }\r\n\t100% { left:-2640px; opacity:0; }\r\n}\r\n@keyframes flowSlides2 {\r\n\t0% { left:0px; opacity:0; }\r\n\t2% { left:0px; opacity:1; }\r\n\t18% { left:0px; opacity:1; }\r\n\t20% { left:0px; opacity:0; }\r\n\t20.01% { left:-660px; opacity:0; }\r\n\t22% { left:-660px; opacity:1; }\r\n\t38% { left:-660px; opacity:1; }\r\n\t40% { left:-660px; opacity:0; }\r\n\t40.01% { left:-1320px; opacity:0; }\r\n\t42% { left:-1320px; opacity:1; }\r\n\t58% { left:-1320px; opacity:1; }\r\n\t60% { left:-1320px; opacity:0; }\r\n\t60.01% { left:-1980px; opacity:0; }\r\n\t62% { left:-1980px; opacity:1; }\r\n\t78% { left:-1980px; opacity:1; }\r\n\t80% { left:-1980px; opacity:0; }\r\n\t80.01% { left:-2640px; opacity:0; }\r\n\t82% { left:-2640px; opacity:1; }\r\n\t98% { left:-2640px; opacity:1; }\r\n\t100% { left:-2640px; opacity:0; }\r\n}\r\n@keyframes flowSlides3 {\r\n\t0% { left:0px; opacity:0; }\r\n\t2% { left:0px; opacity:1; }\r\n\t18% { left:0px; opacity:1; }\r\n\t20% { left:0px; opacity:0; }\r\n\t20.01% { left:-660px; opacity:0; }\r\n\t22% { left:-660px; opacity:1; }\r\n\t38% { left:-660px; opacity:1; }\r\n\t40% { left:-660px; opacity:0; }\r\n\t40.01% { left:-1320px; opacity:0; }\r\n\t42% { left:-1320px; opacity:1; }\r\n\t58% { left:-1320px; opacity:1; }\r\n\t60% { left:-1320px; opacity:0; }\r\n\t60.01% { left:-1980px; opacity:0; }\r\n\t62% { left:-1980px; opacity:1; }\r\n\t78% { left:-1980px; opacity:1; }\r\n\t80% { left:-1980px; opacity:0; }\r\n\t80.01% { left:-2640px; opacity:0; }\r\n\t82% { left:-2640px; opacity:1; }\r\n\t98% { left:-2640px; opacity:1; }\r\n\t100% { left:-2640px; opacity:0; }\r\n}\r\n@keyframes flowSlides4 {\r\n\t0% { left:0px; opacity:0; }\r\n\t2% { left:0px; opacity:1; }\r\n\t18% { left:0px; opacity:1; }\r\n\t20% { left:0px; opacity:0; }\r\n\t20.01% { left:-660px; opacity:0; }\r\n\t22% { left:-660px; opacity:1; }\r\n\t38% { left:-660px; opacity:1; }\r\n\t40% { left:-660px; opacity:0; }\r\n\t40.01% { left:-1320px; opacity:0; }\r\n\t42% { left:-1320px; opacity:1; }\r\n\t58% { left:-1320px; opacity:1; }\r\n\t60% { left:-1320px; opacity:0; }\r\n\t60.01% { left:-1980px; opacity:0; }\r\n\t62% { left:-1980px; opacity:1; }\r\n\t78% { left:-1980px; opacity:1; }\r\n\t80% { left:-1980px; opacity:0; }\r\n\t80.01% { left:-2640px; opacity:0; }\r\n\t82% { left:-2640px; opacity:1; }\r\n\t98% { left:-2640px; opacity:1; }\r\n\t100% { left:-2640px; opacity:0; }\r\n}\r\n@keyframes flowSlides5 {\r\n\t0% { left:0px; opacity:0; }\r\n\t2% { left:0px; opacity:1; }\r\n\t18% { left:0px; opacity:1; }\r\n\t20% { left:0px; opacity:0; }\r\n\t20.01% { left:-660px; opacity:0; }\r\n\t22% { left:-660px; opacity:1; }\r\n\t38% { left:-660px; opacity:1; }\r\n\t40% { left:-660px; opacity:0; }\r\n\t40.01% { left:-1320px; opacity:0; }\r\n\t42% { left:-1320px; opacity:1; }\r\n\t58% { left:-1320px; opacity:1; }\r\n\t60% { left:-1320px; opacity:0; }\r\n\t60.01% { left:-1980px; opacity:0; }\r\n\t62% { left:-1980px; opacity:1; }\r\n\t78% { left:-1980px; opacity:1; }\r\n\t80% { left:-1980px; opacity:0; }\r\n\t80.01% { left:-2640px; opacity:0; }\r\n\t82% { left:-2640px; opacity:1; }\r\n\t98% { left:-2640px; opacity:1; }\r\n\t100% { left:-2640px; opacity:0; }\r\n}\r\n<\/pre>\n<h4>CSS\u306e\u30dd\u30a4\u30f3\u30c8\u8aac\u660e<\/h4>\n<p>\u30fb\u30b9\u30e9\u30a4\u30c9\u306f\u3001\u6c34\u5e73\u306b\u4e26\u3079\u5e2f\u72b6\u306b\u306a\u308b\u3088\u3046\u306b\u3059\u308b\u3002<br \/>\n\u30fb\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\u306f\u3001\u30b9\u30e9\u30a4\u30c9\u30928\u79d2\u9593\u9694\u306eFadeIN_OUT\u3067\u5207\u308a\u66ff\u3048\u308b\u30bf\u30a4\u30d7\u3067\u3001\u5207\u308a\u66ff\u3048\u6642\u306b\u7d20\u65e9\u304f\u8868\u793a\u4f4d\u7f6e\u306b\u6c34\u5e73\u79fb\u52d5\u3055\u305b\u3066\u3044\u308b\u3002<br \/>\n\u30fb\u9001\u308a\u30dc\u30bf\u30f3\u3001\u5207\u63db\u3048\u30dc\u30bf\u30f3\u306f\u3001\u30af\u30ea\u30c3\u30af\u6642\u306b\u76ee\u7684\u306e\u30b9\u30e9\u30a4\u30c9\u304b\u3089\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\u304c\u518d\u958b\u59cb\u3055\u308c\u308b\u3088\u3046\u306b\u3001\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\u3067\u4f7f\u3046animation\u3092\u5171\u6709\u3057\u3066\u3044\u308b\u3002<br \/>\n\u30fb\u73fe\u30b9\u30e9\u30a4\u30c9\u6a19\u793a\u30dc\u30bf\u30f3\u306f\u3001\u500b\u3005\u306e\u30b9\u30e9\u30a4\u30c9\u306b\u914d\u7f6e\u3055\u308c\u305f\u30dc\u30bf\u30f3\u304c\u3001\u30b9\u30e9\u30a4\u30c9\u3068\u4e00\u7dd2\u306b\u79fb\u52d5\u3057\u3001\u76f8\u5f53\u3059\u308b\u5207\u63db\u3048\u30dc\u30bf\u30f3\u306e\u4f4d\u7f6e\u306b\u914d\u7f6e\u3055\u308c\u308b\u3002<br \/>\n\u30fb\u5199\u771f\u3084\u30dc\u30bf\u30f3\u985e\u306e\u914d\u7f6e\u4f4d\u7f6e\u306f\uff05\u6307\u5b9a\u306b\u306a\u3063\u3066\u3044\u308b\u306e\u3067\u3001\u4f7f\u7528\u3059\u308b\u5199\u771f\u30b5\u30a4\u30ba\u3001\u30c7\u30b6\u30a4\u30f3\u306b\u3088\u3063\u3066\u8abf\u6574\u3092\u5fc5\u8981\u3068\u3059\u308b\u3002<br \/>\n\u30fb\u5207\u63db\u3048\u30dc\u30bf\u30f3\u304c#photos\u306e\u4e0b\u5c64\u306b\u306a\u3063\u3066\u3044\u3066\u3001\u30af\u30ea\u30c3\u30af\u306b\u53cd\u5fdc\u3057\u306a\u3044\u306e\u3067\u3001#photos\u306ecss\u306bpointer-events: none;\u3092\u8a18\u8ff0\u3057\u3066\u53cd\u5fdc\u3059\u308b\u3088\u3046\u306b\u3057\u3066\u3044\u308b\u3002\u307e\u305f\u3001\u9001\u308a\u30dc\u30bf\u30f3\u306b\u306f\u3001pointer-events: auto; \u3092\u8a18\u8ff0\u3057\u3066\u30af\u30ea\u30c3\u30af\u306b\u53cd\u5fdc\u3059\u308b\u3088\u3046\u306b\u3057\u3066\u3044\u308b\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u3000\u30e6\u30cb\u30af\u30ed\u3084\u30df\u30ba\u30ce\u306e\u30b5\u30a4\u30c8\u306a\u3069\u306a\u3069\u3001\u30c8\u30c3\u30d7\u30da\u30fc\u30b8\u306e\u4e0a\u90e8\u306b\u8868\u793a\u3055\u308c\u3066\u3044\u308b\u30b9\u30e9\u30a4\u30c0\u30fc\u3092\u3088\u304f\u76ee\u306b\u3059\u308b\u3002\u304a\u305d\u3089\u304fjQuery\u306a\u3069\u306ejavascript\u3067\u4f5c\u6210\u3055\u308c\u3066\u3044\u308b\u3068\u601d\u308f\u308c\u308b\u304c\u3001\u3053\u308c\u3092\u3001\u672c\u7a3f\u3067\u306f\u7d14CSS\uff08pure CSS\uff09\u3067\u4f5c &hellip; <a class=\"more-link\" href=\"https:\/\/css.programming.jp\/?p=1051\">\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":[6],"tags":[],"class_list":["post-1051","post","type-post","status-publish","format-standard","hentry","category-6"],"_links":{"self":[{"href":"https:\/\/css.programming.jp\/index.php?rest_route=\/wp\/v2\/posts\/1051","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=1051"}],"version-history":[{"count":19,"href":"https:\/\/css.programming.jp\/index.php?rest_route=\/wp\/v2\/posts\/1051\/revisions"}],"predecessor-version":[{"id":1124,"href":"https:\/\/css.programming.jp\/index.php?rest_route=\/wp\/v2\/posts\/1051\/revisions\/1124"}],"wp:attachment":[{"href":"https:\/\/css.programming.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1051"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css.programming.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1051"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css.programming.jp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1051"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}