{"id":969,"date":"2015-11-13T09:41:36","date_gmt":"2015-11-13T00:41:36","guid":{"rendered":"http:\/\/css.programming.jp\/?p=969"},"modified":"2015-11-13T09:41:36","modified_gmt":"2015-11-13T00:41:36","slug":"%e8%a4%87%e6%95%b0%e3%82%b7%e3%83%aa%e3%83%bc%e3%82%ba%e5%88%87%e6%8f%9b%e3%81%88%e5%9e%8b%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=969","title":{"rendered":"\u8907\u6570\u30b7\u30ea\u30fc\u30ba\u5207\u63db\u3048\u578b\u30ae\u30e3\u30e9\u30ea\u30fc"},"content":{"rendered":"

\u3000\u8907\u6570\u30b7\u30ea\u30fc\u30ba\u306e\u30b5\u30e0\u30cd\u30a4\u30eb\u7fa4\u3092\u3001\u30dc\u30bf\u30f3\u30af\u30ea\u30c3\u30af\u3067\u5207\u308a\u66ff\u3048\u3001\u30b5\u30e0\u30cd\u30a4\u30eb\u306e\u30af\u30ea\u30c3\u30af\u3067\u5199\u771f\u304cFadeIn\u8868\u793a\u3055\u308c\u308b\u30bf\u30a4\u30d7\u306e\u30ae\u30e3\u30e9\u30ea\u30fc\u3067\u3042\u308b\u3002
\n\u3000\u30b5\u30e0\u30cd\u30a4\u30eb\u7fa4\u304c\u3001\u5207\u63db\u3048\u30dc\u30bf\u30f3\u306e\u4f4d\u7f6e\u304b\u3089\u3001\u8868\u793a\u4f4d\u7f6e\u307e\u3067\u821e\u3044\u964d\u308a\u308b\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u4ed8\u52a0\u3057\u305f\u3002<\/p>\n

SAMPLE<\/h4>\n

\u3000\u3000\u3053\u3061\u3089\u306e\u5225\u30da\u30fc\u30b8\u306b\u793a\u3057\u305f\u3002<\/a><\/p>\n

\u4f5c\u6210\u6e96\u5099<\/h4>\n

\u30fb\u5404\u30b7\u30ea\u30fc\u30ba\uff08\u3053\u3053\u3067\u306f\uff13\u30b7\u30ea\u30fc\u30ba\uff09\u306e\u5199\u771f5-7\u679a\uff08900px*507px\uff09\u3001\u30b5\u30e0\u30cd\u30a4\u30eb\uff08120*67\uff09\u3092\u3001\u30d5\u30a9\u30eb\u30c0img1-img3\u5185\u306b\u7f6e\u304f\u3002
\n\u30fb\u5207\u63db\u3048\u30dc\u30bf\u30f3\u7528\u306b\u5404\u30b7\u30ea\u30fc\u30ba\u306e\u8868\u984c\u3092\u8a18\u3057\u305f\u3001\u30b5\u30e0\u30cd\u30a4\u30eb\u3068\u540c\u30b5\u30a4\u30ba\u306e\u77e9\u5f62\u753b\u50cf\uff08nav1.jpg-nav3.jpg\uff09\u3001\u53ca\u3073\u30ed\u30fc\u30eb\u30aa\u30fc\u30d0\u30fc\u6642\u306b\u8868\u793a\u3059\u308b\u305d\u308c\u305e\u308c\u306e\u753b\u50cf\uff08nav1_2.jpg-nav3_2.jpg\uff09\u3092\u30d5\u30a9\u30eb\u30c0images\u5185\u306b\u7f6e\u304f\u3002
\n\u30fb\u5199\u771f\u8868\u793a\u90e8\u3068\u3057\u3066\u3001\u5199\u771f\u3068\u540c\u30b5\u30a4\u30ba\u306e\u7070\u8272\uff08\u3053\u3053\u3067\u306f#777\uff09\u77e9\u5f62\u753b\u50cf\uff08screen.jpg\uff09\u3092\u30d5\u30a9\u30eb\u30c0images\u306b\u7f6e\u304f\u3002<\/p>\n

\u672c\u30b5\u30f3\u30d7\u30eb\u8868\u793a\u7528HTML<\/h4>\n
\r\n<div id="stage">\r\n  <!-- \u5207\u63db\u3048\u7528\u30e9\u30b8\u30aa\u30dc\u30bf\u30f3 -->\r\n  <input id="r1" type="radio" name="b1">\r\n  <input id="r2" type="radio" name="b1">\r\n  <input id="r3" type="radio" name="b1">\r\n  <!-- \u8868\u793a\u90e8\u30b9\u30af\u30ea\u30fc\u30f3 -->\r\n  <div class="screen"><img src="images\/screen.jpg"><\/div>\r\n  <!-- \u30b7\u30ea\u30fc\u30ba\uff11 -->\r\n  <div id="p1_1" class="t_img1"><a href="#p11"><img src="img1\/s1.jpg"><\/a><\/div>\r\n  <div id="p1_2" class="t_img1"><a href="#p12"><img src="img1\/s2.jpg"><\/a><\/div>\r\n  <div id="p1_3" class="t_img1"><a href="#p13"><img src="img1\/s3.jpg"><\/a><\/div>\r\n  <div id="p1_4" class="t_img1"><a href="#p14"><img src="img1\/s4.jpg"><\/a><\/div>\r\n  <div id="p1_5" class="t_img1"><a href="#p15"><img src="img1\/s5.jpg"><\/a><\/div>\r\n  <label for="r1">\r\n  <div class="item1_2"><img src="images\/nav1_2.jpg"><\/div>\r\n  <div class="item1"><img src="images\/nav1.jpg"><\/div>\r\n  <\/label>\r\n  <div id="p11" class="photo1"><img src="img1\/1.jpg"><\/div>\r\n  <div id="p12" class="photo1"><img src="img1\/2.jpg"><\/div>\r\n  <div id="p13" class="photo1"><img src="img1\/3.jpg"><\/div>\r\n  <div id="p14" class="photo1"><img src="img1\/4.jpg"><\/div>\r\n  <div id="p15" class="photo1"><img src="img1\/5.jpg"><\/div>\r\n  <!-- \u30b7\u30ea\u30fc\u30ba\uff12 -->\r\n  <div id="p2_1" class="t_img2"><a href="#p21"><img src="img2\/s1.jpg"><\/a><\/div>\r\n  <div id="p2_2" class="t_img2"><a href="#p22"><img src="img2\/s2.jpg"><\/a><\/div>\r\n  <div id="p2_3" class="t_img2"><a href="#p23"><img src="img2\/s3.jpg"><\/a><\/div>\r\n  <div id="p2_4" class="t_img2"><a href="#p24"><img src="img2\/s4.jpg"><\/a><\/div>\r\n  <div id="p2_5" class="t_img2"><a href="#p25"><img src="img2\/s5.jpg"><\/a><\/div>\r\n  <div id="p2_6" class="t_img2"><a href="#p26"><img src="img2\/s6.jpg"><\/a><\/div>\r\n  <div id="p2_7" class="t_img2"><a href="#p27"><img src="img2\/s7.jpg"><\/a><\/div>\r\n  <label for="r2">\r\n  <div class="item2_2"><img src="images\/nav2_2.jpg"><\/div>\r\n  <div class="item2"><img src="images\/nav2.jpg"><\/div>\r\n  <\/label>\r\n  <div id="p21" class="photo2"><img src="img2\/1.jpg"><\/div>\r\n  <div id="p22" class="photo2"><img src="img2\/2.jpg"><\/div>\r\n  <div id="p23" class="photo2"><img src="img2\/3.jpg"><\/div>\r\n  <div id="p24" class="photo2"><img src="img2\/4.jpg"><\/div>\r\n  <div id="p25" class="photo2"><img src="img2\/5.jpg"><\/div>\r\n  <div id="p26" class="photo2"><img src="img2\/6.jpg"><\/div>\r\n  <div id="p27" class="photo2"><img src="img2\/7.jpg"><\/div>\r\n  <!-- \u30b7\u30ea\u30fc\u30ba\uff13 -->\r\n  <div id="p3_1" class="t_img3"><a href="#p31"><img src="img3\/s1.jpg"><\/a><\/div>\r\n  <div id="p3_2" class="t_img3"><a href="#p32"><img src="img3\/s2.jpg"><\/a><\/div>\r\n  <div id="p3_3" class="t_img3"><a href="#p33"><img src="img3\/s3.jpg"><\/a><\/div>\r\n  <div id="p3_4" class="t_img3"><a href="#p34"><img src="img3\/s4.jpg"><\/a><\/div>\r\n  <div id="p3_5" class="t_img3"><a href="#p35"><img src="img3\/s5.jpg"><\/a><\/div>\r\n  <div id="p3_6" class="t_img3"><a href="#p36"><img src="img3\/s6.jpg"><\/a><\/div>\r\n  <label for="r3">\r\n  <div class="item3_2"><img src="images\/nav3_2.jpg"><\/div>\r\n  <div class="item3"><img src="images\/nav3.jpg"><\/div>\r\n  <\/label>\r\n  <div id="p31" class="photo3"><img src="img3\/1.jpg"><\/div>\r\n  <div id="p32" class="photo3"><img src="img3\/2.jpg"><\/div>\r\n  <div id="p33" class="photo3"><img src="img3\/3.jpg"><\/div>\r\n  <div id="p34" class="photo3"><img src="img3\/4.jpg"><\/div>\r\n  <div id="p35" class="photo3"><img src="img3\/5.jpg"><\/div>\r\n  <div id="p36" class="photo3"><img src="img3\/6.jpg"><\/div>\r\n<\/div>\r\n<\/pre>\n
\u672c\u30b5\u30f3\u30d7\u30eb\u8868\u793a\u7528CSS<\/h4>\n
\r\nbody { background:#000; }\r\n\/* \u30ae\u30e3\u30e9\u30ea\u30fc\u306e\u7dcf\u67a0 *\/\r\n#stage { max-width:1000px;margin:1% auto 0 auto;height:100%;position:relative;}\r\n\/* \u30e9\u30b8\u30aa\u30dc\u30bf\u30f3\u3092\u975e\u8868\u793a *\/\r\n#r1,#r2,#r3 { display:none; }\r\n\/* \u30b5\u30e0\u30cd\u30a4\u30eb\u306e\u521d\u671f\u4f4d\u7f6e *\/\r\n.t_img1,.t_img2,.t_img3 {\r\n\tposition:absolute;\r\n\twidth:10%;\r\n}\r\n.t_img1 { top:0;left:0; }\r\n.t_img2 { top:15%;left:0; }\r\n.t_img3 { top:30%;left:0; }\r\n\/* \u30b5\u30e0\u30cd\u30a4\u30eb\u30b5\u30a4\u30ba\u3092\u53ef\u5909\u306b *\/\r\n.t_img1 img,.t_img2 img,.t_img3 img { width:100%; }\r\n\/* \u30b7\u30ea\u30fc\u30ba\u306e\u30bf\u30a4\u30c8\u30eb\u8a2d\u5b9a *\/\r\n.item1,.item2,.item3,.item1_2,.item2_2,.item3_2 {\r\n\tposition:absolute;\t\r\n\twidth:10%;\r\n\tcolor:#fff;\r\n}\r\n.item1,.item1_2 { top:0;left:0; }\r\n.item2,.item2_2 { top:15%;left:0; }\r\n.item3,.item3_2 { top:30%;left:0; }\r\n.item1:hover,.item2:hover,.item3:hover { cursor:pointer; }\r\n.item1 img,.item2 img,.item3 img,.item1_2 img,.item2_2 img,.item3_2 img { width:100%; }\r\n.item1 img:hover,.item2 img:hover,.item3 img:hover { opacity:0; }\r\n\/* \u5199\u771f\u8868\u793a\u90e8 *\/\r\n.screen { max-width:900px;margin-left:12%; }\r\n.screen img { width:100%; }\r\n\/* \u30b5\u30e0\u30cd\u30a4\u30eb\u79fb\u52d5\u306etransition\u8a2d\u5b9a *\/\r\n#p1_1 { transition:all 1s 0.4s ease-out ; }\r\n#p1_2 { transition:all 1s 0.3s ease-out ; }\r\n#p1_3 { transition:all 1s 0.2s ease-out ; }\r\n#p1_4 { transition:all 1s 0.1s ease-out ; }\r\n#p1_5 { transition:all 1s 0.0s ease-out ; }\r\n#p2_1 { transition:all 1s 0.6s ease-out ; }\r\n#p2_2 { transition:all 1s 0.5s ease-out ; }\r\n#p2_3 { transition:all 1s 0.4s ease-out ; }\r\n#p2_4 { transition:all 1s 0.3s ease-out ; }\r\n#p2_5 { transition:all 1s 0.2s ease-out ; }\r\n#p2_6 { transition:all 1s 0.1s ease-out ; }\r\n#p2_7 { transition:all 1s 0.0s ease-out ; }\r\n#p3_1 { transition:all 1s 0.5s ease-out ; }\r\n#p3_2 { transition:all 1s 0.4s ease-out ; }\r\n#p3_3 { transition:all 1s 0.3s ease-out ; }\r\n#p3_4 { transition:all 1s 0.2s ease-out ; }\r\n#p3_5 { transition:all 1s 0.1s ease-out ; }\r\n#p3_6 { transition:all 1s 0.0s ease-out ; }\r\n\/* \u30b7\u30ea\u30fc\u30ba\u30bf\u30a4\u30c8\u30eb\u30af\u30ea\u30c3\u30af\u6642\u306e\u30a4\u30d9\u30f3\u30c8\u3001\u30b5\u30e0\u30cd\u30a4\u30eb\u306e\u79fb\u52d5\u8a2d\u5b9a *\/\r\n#r1:checked ~ #p1_1,#r2:checked ~ #p2_1,#r3:checked ~ #p3_1 { top:101%;left:12%; }\r\n#r1:checked ~ #p1_2,#r2:checked ~ #p2_2,#r3:checked ~ #p3_2 { top:101%;left:22.3%; }\r\n#r1:checked ~ #p1_3,#r2:checked ~ #p2_3,#r3:checked ~ #p3_3 { top:101%;left:32.6%; }\r\n#r1:checked ~ #p1_4,#r2:checked ~ #p2_4,#r3:checked ~ #p3_4 { top:101%;left:42.9%; }\r\n#r1:checked ~ #p1_5,#r2:checked ~ #p2_5,#r3:checked ~ #p3_5 { top:101%;left:53.2%; }\r\n#r1:checked ~ #p1_6,#r2:checked ~ #p2_6,#r3:checked ~ #p3_6 { top:101%;left:63.5%; }\r\n#r1:checked ~ #p1_7,#r2:checked ~ #p2_7,#r3:checked ~ #p3_7 { top:101%;left:73.8%; }\r\n\/* \u5225\u30b7\u30ea\u30fc\u30ba\u306e\u30af\u30ea\u30c3\u30af\u6642\u306b\u3001\u8868\u793a\u3055\u308c\u3066\u3044\u308b\u5199\u771f\u3092\u6d88\u3059 *\/\r\n#r1:checked ~ .photo2,#r1:checked ~ .photo3 { opacity:0; }\r\n#r2:checked ~ .photo1,#r2:checked ~ .photo3 { opacity:0; }\r\n#r3:checked ~ .photo1,#r3:checked ~ .photo2 { opacity:0; }\r\n\/* \u5199\u771f\u306e\u521d\u671f\u8a2d\u5b9a\u3001transition\u8a2d\u5b9a *\/\r\n.photo1,.photo2,.photo3 { \r\n\topacity:0;\r\n\tposition:absolute;\t\r\n\ttop:0;\r\n\tleft:12%;\r\n\tmax-width:900px;\r\n\ttransition:all 1s ease-out;\r\n}\r\n\/* \u30af\u30ea\u30c3\u30af\u3055\u308c\u305f\u8a72\u5f53\u5199\u771f\u3092\u8868\u793a *\/\r\n:target {\r\n\topacity:1;\r\n}\r\n\/* \u5199\u771f\u30b5\u30a4\u30ba\u3092\u753b\u9762\u306b\u5408\u308f\u305b\u3066\u53ef\u5909\u306b *\/\r\n.photo1 img,.photo2 img,.photo3 img {\r\n\twidth:100%;\r\n}\r\n<\/pre>\n
CSS\u306e\u30dd\u30a4\u30f3\u30c8\u8aac\u660e<\/h4>\n
\u30fb\u30ae\u30e3\u30e9\u30ea\u30fc\u8868\u793a\u306e\u7dcf\u67a0(#stage)\u306f\u3001\u5e45\u306eMax\u304c1000px\u3068\u3057\u3066\u3044\u308b\u304c\u3001\u4f5c\u6210\u30da\u30fc\u30b8\u306b\u3088\u3063\u3066\u8abf\u6574\u3059\u308b\u3002
\n\u30fb#stage\u5185\u306b\u5207\u63db\u3048\u30dc\u30bf\u30f3\u3001\u30b9\u30af\u30ea\u30fc\u30f3\u3001\u30b5\u30e0\u30cd\u30a4\u30eb\u3001\u5199\u771f\u3092position:absolute;\u3067\u914d\u7f6e\u3059\u308b\u3002
\n\u3000\u30b5\u30e0\u30cd\u30a4\u30eb\u3001\u5199\u771f\u306f\u3001\u3059\u3079\u3066\u540c\u3058\u4f4d\u7f6e\u306b\u91cd\u306d\u3066\u914d\u7f6e\u3059\u308b\u3002
\n\u30fb\u30dc\u30bf\u30f3\u3001\u30b5\u30e0\u30cd\u30a4\u30eb\u3001\u5199\u771f\u306e\u30b5\u30a4\u30ba\u306f%\u6307\u5b9a\u3068\u3059\u308b\uff08\u753b\u9762\u30b5\u30a4\u30ba\u306b\u5bfe\u5fdc\u3055\u305b\u308b\u305f\u3081\uff09\u3002
\n\u30fbmargin\u306e\u6307\u5b9a\u3082\uff05\u6307\u5b9a\u3068\u3059\u308b\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
\u3000\u8907\u6570\u30b7\u30ea\u30fc\u30ba\u306e\u30b5\u30e0\u30cd\u30a4\u30eb\u7fa4\u3092\u3001\u30dc\u30bf\u30f3\u30af\u30ea\u30c3\u30af\u3067\u5207\u308a\u66ff\u3048\u3001\u30b5\u30e0\u30cd\u30a4\u30eb\u306e\u30af\u30ea\u30c3\u30af\u3067\u5199\u771f\u304cFadeIn\u8868\u793a\u3055\u308c\u308b\u30bf\u30a4\u30d7\u306e\u30ae\u30e3\u30e9\u30ea\u30fc\u3067\u3042\u308b\u3002 \u3000\u30b5\u30e0\u30cd\u30a4\u30eb\u7fa4\u304c\u3001\u5207\u63db\u3048\u30dc\u30bf\u30f3\u306e\u4f4d\u7f6e\u304b\u3089\u3001\u8868\u793a\u4f4d\u7f6e\u307e\u3067\u821e\u3044\u964d\u308a\u308b\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u4ed8\u52a0 … \u7d9a\u304d\u3092\u8aad\u3080 →<\/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-969","post","type-post","status-publish","format-standard","hentry","category-4"],"_links":{"self":[{"href":"https:\/\/css.programming.jp\/index.php?rest_route=\/wp\/v2\/posts\/969","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=969"}],"version-history":[{"count":4,"href":"https:\/\/css.programming.jp\/index.php?rest_route=\/wp\/v2\/posts\/969\/revisions"}],"predecessor-version":[{"id":973,"href":"https:\/\/css.programming.jp\/index.php?rest_route=\/wp\/v2\/posts\/969\/revisions\/973"}],"wp:attachment":[{"href":"https:\/\/css.programming.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=969"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css.programming.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=969"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css.programming.jp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=969"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}