{"id":1338,"date":"2018-04-09T14:52:50","date_gmt":"2018-04-09T05:52:50","guid":{"rendered":"http:\/\/css.programming.jp\/?p=1338"},"modified":"2018-04-09T14:52:50","modified_gmt":"2018-04-09T05:52:50","slug":"%e3%82%b9%e3%83%a9%e3%82%a4%e3%82%b9%e7%94%bb%e5%83%8f%e3%82%af%e3%83%aa%e3%83%83%e3%82%af%e5%9e%8b%e3%83%95%e3%82%a9%e3%83%88%e3%82%ae%e3%83%a3%e3%83%a9%e3%83%aa%e3%83%bc","status":"publish","type":"post","link":"https:\/\/css.programming.jp\/?p=1338","title":{"rendered":"\u30b9\u30e9\u30a4\u30b9\u753b\u50cf\u30af\u30ea\u30c3\u30af\u578b\u30d5\u30a9\u30c8\u30ae\u30e3\u30e9\u30ea\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\u5404\u30b9\u30e9\u30a4\u30b9\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u8a72\u5f53\u3059\u308b\u753b\u50cf\u304c\u30d5\u30a7\u30a4\u30c9\u30a4\u30f3\u3059\u308b\u30bf\u30a4\u30d7\u306e\u30d5\u30a9\u30c8\u30ae\u30e3\u30e9\u30ea\u30fc\u3067\u3042\u308b\u3002\u524d\u9805\u306e\u300c\u30b9\u30e9\u30a4\u30b9\u753b\u50cf\u9077\u79fb\u578b\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\u300d\u306e\u30d5\u30a9\u30c8\u30ae\u30e3\u30e9\u30ea\u30fc\u7248\u3067\u3042\u308b\u3002<\/p>\n<h4>\u30b5\u30f3\u30d7\u30eb(DEMO)<\/h4>\n<div id=\"stage\">\n\t<input id=\"r1\" type=\"radio\" name=\"gal\" \/><br \/>\n\t<input id=\"r2\" type=\"radio\" name=\"gal\" \/><br \/>\n\t<input id=\"r3\" type=\"radio\" name=\"gal\" \/><br \/>\n\t<input id=\"r4\" type=\"radio\" name=\"gal\" \/><br \/>\n\t<input id=\"r5\" type=\"radio\" name=\"gal\" \/><br \/>\n\t<input id=\"r6\" type=\"radio\" name=\"gal\" \/><\/p>\n<div id=\"slices\">\n            <label for=\"r1\"><img decoding=\"async\" src=\"wp-images\/img9\/1s.jpg\"><\/p>\n<div><\/div>\n<p><\/label><br \/>\n            <label for=\"r2\"><img decoding=\"async\" src=\"wp-images\/img9\/2s.jpg\"><\/p>\n<div><\/div>\n<p><\/label><br \/>\n            <label for=\"r3\"><img decoding=\"async\" src=\"wp-images\/img9\/3s.jpg\"><\/p>\n<div><\/div>\n<p><\/label><br \/>\n            <label for=\"r4\"><img decoding=\"async\" src=\"wp-images\/img9\/4s.jpg\"><\/p>\n<div><\/div>\n<p><\/label><br \/>\n            <label for=\"r5\"><img decoding=\"async\" src=\"wp-images\/img9\/5s.jpg\"><\/p>\n<div><\/div>\n<p><\/label>\n    <\/div>\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=\"screen\"><label for=\"r6\"><span>\u00d7<\/span><\/label><\/div>\n<\/div>\n<p><!-- \u4ee5\u4e0b\u306e\u8a18\u8ff0\u306f\u8868\u793a\u67a0\u306e\u9ad8\u3055\u4fdd\u6301\u306e\u305f\u3081\u30675\n8%\u306e\u5024\u306f\u8981\u8abf\u6574 --><\/p>\n<div style=\"padding-top:58%\"><\/div>\n<style type=\"text\/css\">\n\/* \u8868\u793a\u67a0 *\/\n#stage { position:relative;max-width:600px; }\n\/* li\u5c5e\u6027\u3001\u753b\u50cf\u4e0b\u306b\u751f\u6210\u3059\u308b\u30b9\u30da\u30fc\u30b9\u9664\u53bb *\/\nli { list-style:none; }\nli img { display:block; }\n\/* \u30b9\u30e9\u30a4\u30c9\u3092\u5168\u3066\u540c\u3058\u4f4d\u7f6e\u306b\u900f\u660e\u3067\u914d\u7f6e *\/\n#photos li {\n\tposition:absolute; top:0; left:0;\n\topacity:0;\n\tpointer-events:none;\n\ttransition:opacity 2s ease;\n}\n\/* \u30b9\u30e9\u30a4\u30c9\u753b\u50cf\u3092\u4f38\u7e2e\u53ef\u306b *\/\n#photos li img { width:100%; }<\/p>\n<p>\/* \u5404\u30b9\u30e9\u30a4\u30b9\u3092\u4e0a\u4ed8\u304d\u306b\u3001\u5e45\u30921\/5\u306b *\/\n#slices label {\n\tposition:absolute; top:0;\n\twidth:20%;\n\tcursor:pointer;\n}\n\/* \u30b9\u30e9\u30a4\u30b9\u753b\u50cf\u3092\u4f38\u7e2e\u53ef\u306b *\/\n#slices label img { width:100%; }\n\/* \u5404\u30b9\u30e9\u30a4\u30b9\u753b\u50cf\u306e\u4e0a\u306b\u540c\u3058\u30b5\u30a4\u30ba\u3067\u9ed2\u3044\u77e9\u5f62\uff08\u8868\u793a\u6642\u306fopacity:0.2\uff09\u3092\u7f6e\u304f *\/\n#slices label div { width:100%;height:100%;background:#000; position:absolute; top:0; opacity:0.2; }\n#slices label:nth-child(1) { left:0%; }\n#slices label:nth-child(2) { left:20%; }\n#slices label:nth-child(3) { left:40%; }\n#slices label:nth-child(4) { left:60%; }\n#slices label:nth-child(5) { left:80%; }\n\/* \u30b9\u30e9\u30a4\u30b9\u753b\u50cf\u306b\u30bf\u30a4\u30df\u30f3\u30b0\u3092\u5408\u308f\u305b\u3066\u5404\u77e9\u5f62\u3092animate\u3067\u900f\u660e\u306b\u3059\u308b *\/\n#slices label:nth-child(1):hover > div { opacity:0; }\n#slices label:nth-child(2):hover > div { opacity:0; }\n#slices label:nth-child(3):hover > div { opacity:0; }\n#slices label:nth-child(4):hover > div { opacity:0; }\n#slices label:nth-child(5):hover > div { opacity:0; }<\/p>\n<p>\/* sutage\u306e\u6700\u4e0a\u90e8\u306b\u5168\u4f53\u3092\u8986\u3046\u30b9\u30af\u30ea\u30fc\u30f3\u3092\u7f6e\u304f\uff08\u521d\u671f\u306f\u975e\u8868\u793a\uff09 *\/\n#screen { width:100%;height:100%; position:absolute; top:0; left:0;display:none;}\n\/* \u30b9\u30af\u30ea\u30fc\u30f3\u5185\u53f3\u4e0a\u306b\u30b9\u30e9\u30a4\u30c9\u975e\u8868\u793a\u30dc\u30bf\u30f3\u3092\u914d\u7f6e *\/\n#screen label span { position:absolute; top:2%;left:90%;font:bold 40px \"\uff2d\uff33 \u30b4\u30b7\u30c3\u30af\", \"MS Gothic\", \"Osaka\uff0d\u7b49\u5e45\", Osaka-mono, monospace;\n\t\t\t   color:#FFFFFF;opacity:0; }\n#screen label span:hover { color:orange; cursor:pointer; }\n\/* \u5404\u30b9\u30e9\u30a4\u30b9\u306e\u30af\u30ea\u30c3\u30af\u3067\u8a72\u5f53\u3059\u308b\u30b9\u30e9\u30a4\u30c9\u3092\u3092FadeIn\u3055\u305b\u308b *\/\n#r1:checked ~ #photos li:nth-child(1) { opacity:1; }\n#r2:checked ~ #photos li:nth-child(2) { opacity:1; }\n#r3:checked ~ #photos li:nth-child(3) { opacity:1; }\n#r4:checked ~ #photos li:nth-child(4) { opacity:1; }\n#r5:checked ~ #photos li:nth-child(5) { opacity:1; }\n\/* \u5404\u30b9\u30e9\u30a4\u30b9\u30af\u30ea\u30c3\u30af\u3067\u30b9\u30af\u30ea\u30fc\u30f3\u3092\u8868\u793a\u3001stage\u5168\u4f53\u3092\u30af\u30ea\u30c3\u30af\u4e0d\u80fd\u306b\u3059\u308b *\/\n#r1:checked ~ #screen,#r2:checked ~ #screen,#r3:checked ~ #screen,#r4:checked ~ #screen,#r5:checked ~ #screen { display:block; }\n\/* \u5404\u30b9\u30e9\u30a4\u30b9\u30af\u30ea\u30c3\u30af\u3067\u30b9\u30e9\u30a4\u30c9\u975e\u8868\u793a\u30dc\u30bf\u30f3\u3092FadeIn\u3055\u305b\u308b *\/\n#r1:checked ~ #screen label span,#r2:checked ~ #screen span,#r3:checked ~ #screen span,#r4:checked ~ #screen span,#r5:checked ~ #screen label span{ \n\topacity:1;\n\tanimation:show 2s ease;\n}<\/p>\n<p>@keyframes show{\n    from{ opacity: 0; }\n    to{ opacity: 1; }\n}<\/p>\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<pre>\r\n&lt;div id=\"stage\"&gt;\r\n\t&lt;input id=\"r1\" type=\"radio\" name=\"gal\" \/&gt;\r\n\t&lt;input id=\"r2\" type=\"radio\" name=\"gal\" \/&gt;\r\n\t&lt;input id=\"r3\" type=\"radio\" name=\"gal\" \/&gt;\r\n\t&lt;input id=\"r4\" type=\"radio\" name=\"gal\" \/&gt;\r\n\t&lt;input id=\"r5\" type=\"radio\" name=\"gal\" \/&gt;\r\n\t&lt;input id=\"r6\" type=\"radio\" name=\"gal\" \/&gt;\r\n\t&lt;div id=\"slices\"&gt;    \t\r\n            &lt;label for=\"r1\"&gt;&lt;img src=\"img9\/1s.jpg\"&gt;&lt;div&gt;&lt;\/div&gt;&lt;\/label&gt;\r\n            &lt;label for=\"r2\"&gt;&lt;img src=\"img9\/2s.jpg\"&gt;&lt;div&gt;&lt;\/div&gt;&lt;\/label&gt;\r\n            &lt;label for=\"r3\"&gt;&lt;img src=\"img9\/3s.jpg\"&gt;&lt;div&gt;&lt;\/div&gt;&lt;\/label&gt;\r\n            &lt;label for=\"r4\"&gt;&lt;img src=\"img9\/4s.jpg\"&gt;&lt;div&gt;&lt;\/div&gt;&lt;\/label&gt;\r\n            &lt;label for=\"r5\"&gt;&lt;img src=\"img9\/5s.jpg\"&gt;&lt;div&gt;&lt;\/div&gt;&lt;\/label&gt;\r\n    &lt;\/div&gt;\r\n\t&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\t&lt;\/div&gt;\r\n\r\n    &lt;div id=\"screen\"&gt;&lt;label for=\"r6\"&gt;&lt;span&gt;\u00d7&lt;\/span&gt;&lt;\/label&gt;&lt;\/div&gt;\r\n\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\u306722%\u306e\u5024\u306f\u8981\u8abf\u6574 --&gt;\r\n&lt;div style=\"padding-top:22%\"&gt;&lt;\/div&gt;\r\n<\/pre>\n<p><\/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\u900f\u660e\u3067\u914d\u7f6e *\/\r\n#photos li {\r\n\tposition:absolute; top:0; left:0;\r\n\topacity:0;\r\n\tpointer-events:none;\r\n\ttransition:opacity 2s ease;\r\n}\r\n\/* \u30b9\u30e9\u30a4\u30c9\u753b\u50cf\u3092\u4f38\u7e2e\u53ef\u306b *\/\r\n#photos li img { width:100%; }\r\n\r\n\/* \u5404\u30b9\u30e9\u30a4\u30b9\u3092\u4e0a\u4ed8\u304d\u306b\u3001\u5e45\u30921\/5\u306b *\/\r\n#slices label {\r\n\tposition:absolute; top:0;\r\n\twidth:20%;\r\n\tcursor:pointer;\r\n}\r\n\/* \u30b9\u30e9\u30a4\u30b9\u753b\u50cf\u3092\u4f38\u7e2e\u53ef\u306b *\/\r\n#slices label img { width:100%; }\r\n\/* \u5404\u30b9\u30e9\u30a4\u30b9\u753b\u50cf\u306e\u4e0a\u306b\u540c\u3058\u30b5\u30a4\u30ba\u3067\u9ed2\u3044\u77e9\u5f62\uff08\u8868\u793a\u6642\u306fopacity:0.2\uff09\u3092\u7f6e\u304f *\/\r\n#slices label div { width:100%;height:100%;background:#000; position:absolute; top:0; opacity:0.2; }\r\n#slices label:nth-child(1) { left:0%; }\r\n#slices label:nth-child(2) { left:20%; }\r\n#slices label:nth-child(3) { left:40%; }\r\n#slices label:nth-child(4) { left:60%; }\r\n#slices label:nth-child(5) { left:80%; }\r\n\/* \u30b9\u30e9\u30a4\u30b9\u753b\u50cf\u306b\u30bf\u30a4\u30df\u30f3\u30b0\u3092\u5408\u308f\u305b\u3066\u5404\u77e9\u5f62\u3092animate\u3067\u900f\u660e\u306b\u3059\u308b *\/\r\n#slices label:nth-child(1):hover > div { opacity:0; }\r\n#slices label:nth-child(2):hover > div { opacity:0; }\r\n#slices label:nth-child(3):hover > div { opacity:0; }\r\n#slices label:nth-child(4):hover > div { opacity:0; }\r\n#slices label:nth-child(5):hover > div { opacity:0; }\r\n\r\n\/* sutage\u306e\u6700\u4e0a\u90e8\u306b\u5168\u4f53\u3092\u8986\u3046\u30b9\u30af\u30ea\u30fc\u30f3\u3092\u7f6e\u304f\uff08\u521d\u671f\u306f\u975e\u8868\u793a\uff09 *\/\r\n#screen { width:100%;height:100%; position:absolute; top:0; left:0;display:none;}\r\n\/* \u30b9\u30af\u30ea\u30fc\u30f3\u5185\u53f3\u4e0a\u306b\u30b9\u30e9\u30a4\u30c9\u975e\u8868\u793a\u30dc\u30bf\u30f3\u3092\u914d\u7f6e *\/\r\n#screen label span { position:absolute; top:2%;left:90%;font:bold 40px \"\uff2d\uff33 \u30b4\u30b7\u30c3\u30af\", \"MS Gothic\", \"Osaka\uff0d\u7b49\u5e45\", Osaka-mono, monospace;\r\n\t\t\t   color:#FFFFFF;opacity:0; }\r\n#screen label span:hover { color:orange; cursor:pointer; }\r\n\/* \u5404\u30b9\u30e9\u30a4\u30b9\u306e\u30af\u30ea\u30c3\u30af\u3067\u8a72\u5f53\u3059\u308b\u30b9\u30e9\u30a4\u30c9\u3092\u3092FadeIn\u3055\u305b\u308b *\/\r\n#r1:checked ~ #photos li:nth-child(1) { opacity:1; }\r\n#r2:checked ~ #photos li:nth-child(2) { opacity:1; }\r\n#r3:checked ~ #photos li:nth-child(3) { opacity:1; }\r\n#r4:checked ~ #photos li:nth-child(4) { opacity:1; }\r\n#r5:checked ~ #photos li:nth-child(5) { opacity:1; }\r\n\/* \u5404\u30b9\u30e9\u30a4\u30b9\u30af\u30ea\u30c3\u30af\u3067\u30b9\u30af\u30ea\u30fc\u30f3\u3092\u8868\u793a\u3001stage\u5168\u4f53\u3092\u30af\u30ea\u30c3\u30af\u4e0d\u80fd\u306b\u3059\u308b *\/\r\n#r1:checked ~ #screen,#r2:checked ~ #screen,#r3:checked ~ #screen,#r4:checked ~ #screen,#r5:checked ~ #screen { display:block; }\r\n\/* \u5404\u30b9\u30e9\u30a4\u30b9\u30af\u30ea\u30c3\u30af\u3067\u30b9\u30e9\u30a4\u30c9\u975e\u8868\u793a\u30dc\u30bf\u30f3\u3092FadeIn\u3055\u305b\u308b *\/\r\n#r1:checked ~ #screen label span,#r2:checked ~ #screen span,#r3:checked ~ #screen span,#r4:checked ~ #screen span,#r5:checked ~ #screen label span{ \r\n\topacity:1;\r\n\tanimation:show 2s ease;\r\n}\r\n\r\n@keyframes show{\r\n    from{ opacity: 0; }\r\n    to{ opacity: 1; }\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\u5404\u30b9\u30e9\u30a4\u30b9\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u8a72\u5f53\u3059\u308b\u753b\u50cf\u304c\u30d5\u30a7\u30a4\u30c9\u30a4\u30f3\u3059\u308b\u30bf\u30a4\u30d7\u306e\u30d5\u30a9\u30c8\u30ae\u30e3\u30e9\u30ea\u30fc\u3067 &hellip; <a class=\"more-link\" href=\"https:\/\/css.programming.jp\/?p=1338\">\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-1338","post","type-post","status-publish","format-standard","hentry","category-4"],"_links":{"self":[{"href":"https:\/\/css.programming.jp\/index.php?rest_route=\/wp\/v2\/posts\/1338","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=1338"}],"version-history":[{"count":8,"href":"https:\/\/css.programming.jp\/index.php?rest_route=\/wp\/v2\/posts\/1338\/revisions"}],"predecessor-version":[{"id":1346,"href":"https:\/\/css.programming.jp\/index.php?rest_route=\/wp\/v2\/posts\/1338\/revisions\/1346"}],"wp:attachment":[{"href":"https:\/\/css.programming.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1338"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css.programming.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1338"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css.programming.jp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1338"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}