{"id":623,"date":"2011-02-21T20:17:07","date_gmt":"2011-02-21T11:17:07","guid":{"rendered":"http:\/\/www.myu-zin.com\/webridge\/?p=623"},"modified":"2011-02-21T20:17:07","modified_gmt":"2011-02-21T11:17:07","slug":"css%e3%81%ae%e3%81%bf%e3%81%a7%e3%82%b9%e3%83%a9%e3%82%a4%e3%83%89%e3%82%b7%e3%83%a7%e3%83%bc%e3%82%92%e5%ae%9f%e7%8f%be%e3%81%99%e3%82%8b-pure-css-slideshow","status":"publish","type":"post","link":"https:\/\/www.myu-zin.com\/webridge\/archives\/623.html","title":{"rendered":"CSS\u306e\u307f\u3067\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\u3092\u5b9f\u73fe\u3059\u308b Pure CSS Slideshow"},"content":{"rendered":"

CSS\uff13\u3092\u6d3b\u7528\u3057\u3066\u753b\u9762\u5168\u4f53\u3092\u30b9\u30e9\u30a4\u30c9\u3059\u308b\u300cPure CSS Slideshow\u300d\u3092\u3054\u7d39\u4ecb\u3002<\/p>\n

\u307e\u3060CSS\uff13\u3092\u672c\u683c\u7684\u306b\u5b9f\u88c5\u3067\u304d\u306a\u3044\u3053\u306e\u72b6\u6cc1\u3067\u306f\u3001\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\u3092\u5b9f\u73fe\u3057\u3088\u3046\u3068\u601d\u3063\u305f\u3089jQuery\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u306a\u3069\u3092\u6d3b\u7528\u3059\u308b\u3053\u3068\u306b\u306a\u308b\u3068\u601d\u3044\u307e\u3059\u3002CSS\uff13\u304c\u6c4e\u7528\u5316\u3059\u308b\u306b\u306f\u307e\u3060\u6642\u9593\u304c\u304b\u304b\u308b\u3068\u601d\u3044\u307e\u3059\u304c\u3001\u500b\u4eba\u30b5\u30a4\u30c8\u306a\u3069\u3067\u306f\u7a4d\u6975\u7684\u306b\u6d3b\u7528\u3057\u3066\u3044\u304d\u305f\u3044\u3068\u3053\u308d\u3067\u3059\u3002<\/p>\n

Javascript\u3092\u4f7f\u308f\u306a\u3044\u5206\u3001\u5bfe\u5fdc\u30d6\u30e9\u30a6\u30b6\u3067\u78ba\u8a8d\u3057\u3066\u307f\u308b\u3068\u975e\u5e38\u306b\u30b9\u30e0\u30fc\u30ba\u306a\u52d5\u304d\u3092\u3057\u3066\u304f\u308c\u307e\u3059\u3002<\/p>\n

\u30c7\u30e2\u30da\u30fc\u30b8\u3092\u898b\u308b<\/a><\/p>\n

\"\"<\/p>\n

html<\/h3>\n

html\u306fdiv\u306e\u30dc\u30c3\u30af\u30b9\u3092\u5207\u308a\u66ff\u3048\u308b\u3088\u3046\u306a\u5f62\u3067\u3059\u3002<\/p>\n

\r\n<div id="a1">\r\n <div id="a2">\r\n  <div id="a3">\r\n   <!-- Top Navigation. Ya, tables are evil. -->\r\n   <table>\r\n    <tbody><tr>\r\n     <td><a href="#a1" id="p1">1<\/a><\/td>\r\n     <td><a href="#a2" id="p2">2<\/a><\/td>\r\n     <td><a href="#a3" id="p3">3<\/a><\/td>\r\n    <\/tr>\r\n   <\/tbody>\r\n  <\/table>\r\n\r\n   <!-- Fallback -->\r\n   <div id="i0" class="page">\r\n    <h1>Your browser sucks.<\/h1>\r\n   <\/div>\r\n\r\n   <!-- First Page #a1 -->\r\n   <div id="i1" class="page">\r\n    <a href="#a3" class="backbutton"><\/a>\r\n    <a href="#a2" class="nextbutton"><\/a>\r\n    <h1>Pure CSS Slideshow<\/h1>\r\n    <img src="pure-css-slideshow-1.png">\r\n   <\/div>\r\n\r\n   <!-- Second Page #a2 -->\r\n   <div id="i2" class="page">\r\n    <a href="#a1" class="backbutton"><\/a>\r\n    <a href="#a3" class="nextbutton"><\/a>\r\n    <h1>Simplified Demo<\/h1>\r\n    <img src="pure-css-slideshow-2.png">\r\n   <\/div>\r\n\r\n   <!-- Third Page #a3 -->\r\n   <div id="i3" class="page">\r\n    <a href="#a2" class="backbutton"><\/a>\r\n    <a href="#a1" class="nextbutton"><\/a>\r\n    <h1>Check the Source Code<\/h1>\r\n    <img src="pure-css-slideshow-3.png">\r\n   <\/div>\r\n\r\n  <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<\/pre>\n
CSS<\/h3>\n
css\u306f\u30d6\u30e9\u30a6\u30b6\u306e\u5e45\u3092100%\u3067\u53d6\u5f97\u3067\u304d\u3066\u3044\u308b\u3088\u3046\u306a\u8a18\u8ff0\u3067\u3059\u3002\uff08\u51fa\u6765\u3066\u3044\u308b\u3093\u3067\u3057\u3087\u3046\u306d\u3002\u304d\u3063\u3068\uff09\u3002\u3042\u3068\u6c17\u306b\u306a\u3063\u305f\u306e\u304c\u3001style\u306e\u8a18\u8ff0\u304cbody\u5185\u306b\u3055\u308c\u3066\u3044\u308b\u3068\u3053\u308d\u3002head\u5185\u3067\u306a\u304f\u3066\u3082\u3088\u3044\u306e\u3067\u3059\u304b\u306d\u3002\u3053\u306e\u8fba\u306e\u60c5\u5831\u306f\u672a\u78ba\u8a8d\u3067\u3059\u3002<\/p>\n
\r\n\/* The Basic Style for all Pages *\/\r\n\r\n.page {\r\nposition: absolute;\r\nwidth: 100%;\r\nheight: 100%;\r\n}\r\n\r\n\/* The Pages *\/\r\n\r\n#i1 { left: 0%; background-color: #fff; }\r\n#i1 { left: 100%; background-color: #fff; }\r\n#i2 { left: 200%; background-color: #bbb; }\r\n#i3 { left: 300%; background-color: #777; }\r\n\r\n\/* The Transition Effect *\/\r\n\r\n.page {\r\n-webkit-transition: -webkit-transform 0.8s;\r\n-moz-transition: -moz-transform 0.8s;\r\n-o-transition: -o-transform 0.8s;\r\n}\r\n\r\n\/* The Sliding Action *\/\r\n\/* TranslateX for better Performance. Translate3D for better Performance on Ipad. *\/\r\n\r\n#a1:target .page { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -o-transform: translateX(0%); }\r\n#a2:target .page { -webkit-transform: translateX(-200%); -moz-transform: translateX(-200%); -o-transform: translateX(-200%); }\r\n#a3:target .page { -webkit-transform: translateX(-300%); -moz-transform: translateX(-300%); -o-transform: translateX(-300%); }\r\n\r\n\/* The First Page - Initial Positioning without Anchor *\/\r\n\r\n.page {\r\n-webkit-transform: translateX(-100%); -moz-transform: translateX(-100%);\r\n}\r\n\r\n\/*======== footer\u90e8\u306b\u8a18\u8ff0 ==================*\/\r\n\/* Basic Styles *\/\r\n\r\n* { margin: 0; padding: 0; }\r\nbody { overflow: hidden; color: #222; font-family: helvetica, arial; line-height: 1.2; } a:active { outline: none;}\r\n.nextbutton, .backbutton { position: absolute; top: 0; height: 100%; width: 50%; }\r\n.nextbutton { cursor: url('right.png'), e-resize; right: 0; }\r\n.backbutton { cursor: url('left.png'), w-resize; left: 0; }\r\nh1 { text-align: center; padding: 0 50px; margin-top: 150px; font-size: 50px; }\r\nimg { margin: 0 auto; display: block; margin-top: 50px;}\r\nfooter { z-index: 2; position: fixed; bottom: 60px; left: 50%; width: 600px; margin-left: -300px; text-align: center; }\r\nfooter a.link { color: #111; font-size: 15px; font-weight: bold; text-decoration: none; border-bottom: solid 2px; }\r\nfooter a.link:hover { color: red; }\r\n\r\n\/* Top Navigation.  *\/\r\n\r\ntable {\r\ndisplay: table;\r\nwidth: 100%;\r\ncellspacing: 0;\r\nborder-collapse: collapse;\r\nposition: fixed;\r\nz-index: 5000;\r\ntop: -1px;\r\nleft: 0;\r\nright: 0;\r\n}\r\n\r\ntable a {\r\nline-height: 54px;\r\nfont-family: helvetica, arial;\r\nfont-size: 11px;\r\nfont-weight: bold;\r\ntext-decoration: none;\r\ncolor: #aaa;\r\ndisplay: block;\r\ntext-align: center;\r\nmargin: 0;\r\nbackground-color: #111;\r\n-moz-transition: all 1s;\r\n-webkit-transition: all 1s;\r\n-o-transition: all 1s;\r\ntransition: all 1s;\r\n}\r\n\r\n#a1:target #p1,\r\n#a2:target #p2,\r\n#a3:target #p3 { background-color: red; color: #fff; }\r\n\r\ntable a:hover {\r\nbackground-color: #444;\r\n-moz-transition: background 0s;\r\n-webkit-transition: background 0s;\r\n-o-transition: background 0s;\r\ntransition: background 0s;\r\n}\r\n\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
CSS\uff13\u3092\u6d3b\u7528\u3057\u3066\u753b\u9762\u5168\u4f53\u3092\u30b9\u30e9\u30a4\u30c9\u3059\u308b\u300cPure ...<\/p>\n","protected":false},"author":1,"featured_media":624,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[47],"tags":[],"class_list":["post-623","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.myu-zin.com\/webridge\/wp-json\/wp\/v2\/posts\/623","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.myu-zin.com\/webridge\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.myu-zin.com\/webridge\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.myu-zin.com\/webridge\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.myu-zin.com\/webridge\/wp-json\/wp\/v2\/comments?post=623"}],"version-history":[{"count":1,"href":"https:\/\/www.myu-zin.com\/webridge\/wp-json\/wp\/v2\/posts\/623\/revisions"}],"predecessor-version":[{"id":625,"href":"https:\/\/www.myu-zin.com\/webridge\/wp-json\/wp\/v2\/posts\/623\/revisions\/625"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.myu-zin.com\/webridge\/wp-json\/wp\/v2\/media\/624"}],"wp:attachment":[{"href":"https:\/\/www.myu-zin.com\/webridge\/wp-json\/wp\/v2\/media?parent=623"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.myu-zin.com\/webridge\/wp-json\/wp\/v2\/categories?post=623"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.myu-zin.com\/webridge\/wp-json\/wp\/v2\/tags?post=623"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}