Forked from: vinton's グリッドレイアウト（divバージョン） View Diff (190) 可変グリッドレイアウト+ Lazy Load vinton Follow 2012-07-22 20:21:22 License: MIT License Fork1 Fav0 View3926 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 0 lines HTML 102 lines CSS 110 lines 可変グリッドレイアウト+ Lazy Load <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1"> <meta name="apple-mobile-web-app-capable" content="yes"> <title>可変グリッドレイアウト+ Lazy Load</title> <!--[if lte IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!--[if lte IE 9]> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> <![endif]--> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script> <!-- (function(a,b){$window=a(b),a.fn.lazyload=function(c){function f(){var b=0;d.each(function(){var c=a(this);if(e.skip_invisible&&!c.is(":visible"))return;if(!a.abovethetop(this,e)&&!a.leftofbegin(this,e))if(!a.belowthefold(this,e)&&!a.rightoffold(this,e))c.trigger("appear");else if(++b>e.failure_limit)return!1})}var d=this,e={threshold:0,failure_limit:0,event:"scroll",effect:"show",container:b,data_attribute:"original",skip_invisible:!0,appear:null,load:null};return c&&(undefined!==c.failurelimit&&(c.failure_limit=c.failurelimit,delete c.failurelimit),undefined!==c.effectspeed&&(c.effect_speed=c.effectspeed,delete c.effectspeed),a.extend(e,c)),$container=e.container===undefined||e.container===b?$window:a(e.container),0===e.event.indexOf("scroll")&&$container.bind(e.event,function(a){return f()}),this.each(function(){var b=this,c=a(b);b.loaded=!1,c.one("appear",function(){if(!this.loaded){if(e.appear){var f=d.length;e.appear.call(b,f,e)}a("<img />").bind("load",function(){c.hide().attr("src",c.data(e.data_attribute))[e.effect](e.effect_speed),b.loaded=!0;var f=a.grep(d,function(a){return!a.loaded});d=a(f);if(e.load){var g=d.length;e.load.call(b,g,e)}}).attr("src",c.data(e.data_attribute))}}),0!==e.event.indexOf("scroll")&&c.bind(e.event,function(a){b.loaded||c.trigger("appear")})}),$window.bind("resize",function(a){f()}),f(),this},a.belowthefold=function(c,d){var e;return d.container===undefined||d.container===b?e=$window.height()+$window.scrollTop():e=$container.offset().top+$container.height(),e<=a(c).offset().top-d.threshold},a.rightoffold=function(c,d){var e;return d.container===undefined||d.container===b?e=$window.width()+$window.scrollLeft():e=$container.offset().left+$container.width(),e<=a(c).offset().left-d.threshold},a.abovethetop=function(c,d){var e;return d.container===undefined||d.container===b?e=$window.scrollTop():e=$container.offset().top,e>=a(c).offset().top+d.threshold+a(c).height()},a.leftofbegin=function(c,d){var e;return d.container===undefined||d.container===b?e=$window.scrollLeft():e=$container.offset().left,e>=a(c).offset().left+d.threshold+a(c).width()},a.inviewport=function(b,c){return!a.rightofscreen(b,c)&&!a.leftofscreen(b,c)&&!a.belowthefold(b,c)&&!a.abovethetop(b,c)},a.extend(a.expr[":"],{"below-the-fold":function(c){return a.belowthefold(c,{threshold:0,container:b})},"above-the-top":function(c){return!a.belowthefold(c,{threshold:0,container:b})},"right-of-screen":function(c){return a.rightoffold(c,{threshold:0,container:b})},"left-of-screen":function(c){return!a.rightoffold(c,{threshold:0,container:b})},"in-viewport":function(c){return!a.inviewport(c,{threshold:0,container:b})},"above-the-fold":function(c){return!a.belowthefold(c,{threshold:0,container:b})},"right-of-fold":function(c){return a.rightoffold(c,{threshold:0,container:b})},"left-of-fold":function(c){return!a.rightoffold(c,{threshold:0,container:b})}})})(jQuery,window) --> </script> <script> <!-- $(function() { $("img.lazy").lazyload({ threshold : 250,effect : "fadeIn" }); }); --> </script> </head> <body> <article> <header> <h1><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/logo01.png" alt="" width="300" height="300"></a></h1> <nav> <ul> <li id="nav01"><a href="#"></a></li> <li id="nav02"><a href="#"></a></li> <li id="nav03"><a href="#"></a></li> <li id="nav04"><a href="#"></a></li> </ul> </nav> </header> <section> <ul> <li><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph12_my.jpg" alt="" width="300" height="140"></a></li> <li><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph02_s.jpg" alt="" width="140" height="140"></a></li> <li><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph22_s.jpg" alt="" width="140" height="140"></a></li> </ul> <ul> <li><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph11_l.jpg" alt="" width="300" height="300"></a></li> </ul> <ul> <li><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph10_l.jpg" alt="" width="300" height="300"></a></li> </ul> <ul> <li class="right"><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph01_mt.jpg" alt="" width="140" height="300"></a></li> <li><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph18_s.jpg" alt="" width="140" height="140"></a></li> <li><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph17_s.jpg" alt="" width="140" height="140"></a></li> </ul> <ul> <li><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph26_l.jpg" alt="" width="300" height="300"></a></li> </ul> <ul> <li class="right"><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph07_mt.jpg" alt="" width="140" height="300"></a></li> <li><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph21_s.jpg" alt="" width="140" height="140"></a></li> <li><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph03_s.jpg" alt="" width="140" height="140"></a></li> </ul> <ul> <li><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph20_s.jpg" alt="" width="140" height="140"></a></li> <li><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph06_s.jpg" alt="" width="140" height="140"></a></li> <li><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph15_my.jpg" alt="" width="300" height="140"></a></li> </ul> <ul> <li><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph36_mt.jpg" alt="" width="140" height="300"></a></li> <li><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph19_s.jpg" alt="" width="140" height="140"></a></li> <li><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph37_s.jpg" alt="" width="140" height="140"></a></li> </ul> <ul> <li><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph09_l.jpg" alt="" width="300" height="300"></a></li> </ul> <ul> <li><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph25_s.jpg" alt="" width="140" height="140"></a></li> <li><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph08_s.jpg" alt="" width="140" height="140"></a></li> <li><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph16_s.jpg" alt="" width="140" height="140"></a></li> <li><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph04_s.jpg" alt="" width="140" height="140"></a></li> </ul> <ul> <li><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph23_my.jpg" alt="" width="300" height="140"></a></li> <li><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph28_s.jpg" alt="" width="140" height="140"></a></li> <li><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph05_s.jpg" alt="" width="140" height="140"></a></li> </ul> <ul> <li><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph13_s.jpg" alt="" width="140" height="140"></a></li> <li><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph27_s.jpg" alt="" width="140" height="140"></a></li> <li><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph24_my.jpg" alt="" width="300" height="140"></a></li> </ul> <ul> <li><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph14_l.jpg" alt="" width="300" height="300"></a></li> </ul> </section> </article> </body> </html> 可変グリッドレイアウト+ Lazy Load @charset "UTF-8"; * { margin:0; padding:0; } body { background-image:url(http://webgaku.hotcom-web.com/image/okazu/bg.png); } article, header, nav, section { display: block; } ul { list-style-type:none; } img { border: none; margin:10px; float:left; } article { width:960px; margin:0 auto; } header { width:320px; float:left; margin:0; } /* nav */ nav { width:320px; } nav ul li { float:left; width:140px; height:140px; margin:10px; } nav ul li a{ display:block; width:140px; height:140px; } /* link、visited */ #nav01 a:link, #nav01 a:visited { background-image:url(http://webgaku.hotcom-web.com/image/okazu/nav01_01.png); } #nav02 a:link, #nav02 a:visited { background-image:url(http://webgaku.hotcom-web.com/image/okazu/nav02_01.png); } #nav03 a:link, #nav03 a:visited { background-image:url(http://webgaku.hotcom-web.com/image/okazu/nav03_01.png); } #nav04 a:link, #nav04 a:visited { background-image:url(http://webgaku.hotcom-web.com/image/okazu/nav04_01.png); } /* hover */ #nav01 a:hover { background-image:url(http://webgaku.hotcom-web.com/image/okazu/nav01_01_o.png); } #nav02 a:hover { background-image:url(http://webgaku.hotcom-web.com/image/okazu/nav02_01_o.png); } #nav03 a:hover { background-image:url(http://webgaku.hotcom-web.com/image/okazu/nav03_01_o.png); } #nav04 a:hover { background-image:url(http://webgaku.hotcom-web.com/image/okazu/nav04_01_o.png); } section ul { width:320px; float:left; } .right { float:right; } /* 641px以上、960px以下 */ @media screen and (min-width:641px) and (max-width:960px){ article { width:640px; } } /* 640px以下 */ @media screen and (max-width:640px){ article { width:320px; } } /* IE7 対策 */ *+html nav { margin:0; } *+html section { margin:0; } *+html section ul { height:320px; } *+html section ul li { float:left; margin:0 0 10px; } <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1"> <meta name="apple-mobile-web-app-capable" content="yes"> <title>可変グリッドレイアウト+ Lazy Load</title> <!--[if lte IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!--[if lte IE 9]> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> <![endif]--> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script> <!-- (function(a,b){$window=a(b),a.fn.lazyload=function(c){function f(){var b=0;d.each(function(){var c=a(this);if(e.skip_invisible&&!c.is(":visible"))return;if(!a.abovethetop(this,e)&&!a.leftofbegin(this,e))if(!a.belowthefold(this,e)&&!a.rightoffold(this,e))c.trigger("appear");else if(++b>e.failure_limit)return!1})}var d=this,e={threshold:0,failure_limit:0,event:"scroll",effect:"show",container:b,data_attribute:"original",skip_invisible:!0,appear:null,load:null};return c&&(undefined!==c.failurelimit&&(c.failure_limit=c.failurelimit,delete c.failurelimit),undefined!==c.effectspeed&&(c.effect_speed=c.effectspeed,delete c.effectspeed),a.extend(e,c)),$container=e.container===undefined||e.container===b?$window:a(e.container),0===e.event.indexOf("scroll")&&$container.bind(e.event,function(a){return f()}),this.each(function(){var b=this,c=a(b);b.loaded=!1,c.one("appear",function(){if(!this.loaded){if(e.appear){var f=d.length;e.appear.call(b,f,e)}a("<img />").bind("load",function(){c.hide().attr("src",c.data(e.data_attribute))[e.effect](e.effect_speed),b.loaded=!0;var f=a.grep(d,function(a){return!a.loaded});d=a(f);if(e.load){var g=d.length;e.load.call(b,g,e)}}).attr("src",c.data(e.data_attribute))}}),0!==e.event.indexOf("scroll")&&c.bind(e.event,function(a){b.loaded||c.trigger("appear")})}),$window.bind("resize",function(a){f()}),f(),this},a.belowthefold=function(c,d){var e;return d.container===undefined||d.container===b?e=$window.height()+$window.scrollTop():e=$container.offset().top+$container.height(),e<=a(c).offset().top-d.threshold},a.rightoffold=function(c,d){var e;return d.container===undefined||d.container===b?e=$window.width()+$window.scrollLeft():e=$container.offset().left+$container.width(),e<=a(c).offset().left-d.threshold},a.abovethetop=function(c,d){var e;return d.container===undefined||d.container===b?e=$window.scrollTop():e=$container.offset().top,e>=a(c).offset().top+d.threshold+a(c).height()},a.leftofbegin=function(c,d){var e;return d.container===undefined||d.container===b?e=$window.scrollLeft():e=$container.offset().left,e>=a(c).offset().left+d.threshold+a(c).width()},a.inviewport=function(b,c){return!a.rightofscreen(b,c)&&!a.leftofscreen(b,c)&&!a.belowthefold(b,c)&&!a.abovethetop(b,c)},a.extend(a.expr[":"],{"below-the-fold":function(c){return a.belowthefold(c,{threshold:0,container:b})},"above-the-top":function(c){return!a.belowthefold(c,{threshold:0,container:b})},"right-of-screen":function(c){return a.rightoffold(c,{threshold:0,container:b})},"left-of-screen":function(c){return!a.rightoffold(c,{threshold:0,container:b})},"in-viewport":function(c){return!a.inviewport(c,{threshold:0,container:b})},"above-the-fold":function(c){return!a.belowthefold(c,{threshold:0,container:b})},"right-of-fold":function(c){return a.rightoffold(c,{threshold:0,container:b})},"left-of-fold":function(c){return!a.rightoffold(c,{threshold:0,container:b})}})})(jQuery,window) --> </script> <script> <!-- $(function() { $("img.lazy").lazyload({ threshold : 250,effect : "fadeIn" }); }); --> </script> </head> <body> <article> <header> <h1><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/logo01.png" alt="" width="300" height="300"></a></h1> <nav> <ul> <li id="nav01"><a href="#"></a></li> <li id="nav02"><a href="#"></a></li> <li id="nav03"><a href="#"></a></li> <li id="nav04"><a href="#"></a></li> </ul> </nav> </header> <section> <ul> <li><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph12_my.jpg" alt="" width="300" height="140"></a></li> <li><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph02_s.jpg" alt="" width="140" height="140"></a></li> <li><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph22_s.jpg" alt="" width="140" height="140"></a></li> </ul> <ul> <li><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph11_l.jpg" alt="" width="300" height="300"></a></li> </ul> <ul> <li><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph10_l.jpg" alt="" width="300" height="300"></a></li> </ul> <ul> <li class="right"><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph01_mt.jpg" alt="" width="140" height="300"></a></li> <li><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph18_s.jpg" alt="" width="140" height="140"></a></li> <li><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph17_s.jpg" alt="" width="140" height="140"></a></li> </ul> <ul> <li><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph26_l.jpg" alt="" width="300" height="300"></a></li> </ul> <ul> <li class="right"><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph07_mt.jpg" alt="" width="140" height="300"></a></li> <li><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph21_s.jpg" alt="" width="140" height="140"></a></li> <li><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph03_s.jpg" alt="" width="140" height="140"></a></li> </ul> <ul> <li><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph20_s.jpg" alt="" width="140" height="140"></a></li> <li><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph06_s.jpg" alt="" width="140" height="140"></a></li> <li><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph15_my.jpg" alt="" width="300" height="140"></a></li> </ul> <ul> <li><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph36_mt.jpg" alt="" width="140" height="300"></a></li> <li><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph19_s.jpg" alt="" width="140" height="140"></a></li> <li><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph37_s.jpg" alt="" width="140" height="140"></a></li> </ul> <ul> <li><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph09_l.jpg" alt="" width="300" height="300"></a></li> </ul> <ul> <li><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph25_s.jpg" alt="" width="140" height="140"></a></li> <li><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph08_s.jpg" alt="" width="140" height="140"></a></li> <li><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph16_s.jpg" alt="" width="140" height="140"></a></li> <li><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph04_s.jpg" alt="" width="140" height="140"></a></li> </ul> <ul> <li><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph23_my.jpg" alt="" width="300" height="140"></a></li> <li><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph28_s.jpg" alt="" width="140" height="140"></a></li> <li><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph05_s.jpg" alt="" width="140" height="140"></a></li> </ul> <ul> <li><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph13_s.jpg" alt="" width="140" height="140"></a></li> <li><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph27_s.jpg" alt="" width="140" height="140"></a></li> <li><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph24_my.jpg" alt="" width="300" height="140"></a></li> </ul> <ul> <li><a href="#"><img class="lazy" src="http://jsrun.it/assets/9/t/C/p/9tCp8.gif" data-original="http://webgaku.hotcom-web.com/image/okazu/ph14_l.jpg" alt="" width="300" height="300"></a></li> </ul> </section> </article> </body> </html> @charset "UTF-8"; * { margin:0; padding:0; } body { background-image:url(http://webgaku.hotcom-web.com/image/okazu/bg.png); } article, header, nav, section { display: block; } ul { list-style-type:none; } img { border: none; margin:10px; float:left; } article { width:960px; margin:0 auto; } header { width:320px; float:left; margin:0; } /* nav */ nav { width:320px; } nav ul li { float:left; width:140px; height:140px; margin:10px; } nav ul li a{ display:block; width:140px; height:140px; } /* link、visited */ #nav01 a:link, #nav01 a:visited { background-image:url(http://webgaku.hotcom-web.com/image/okazu/nav01_01.png); } #nav02 a:link, #nav02 a:visited { background-image:url(http://webgaku.hotcom-web.com/image/okazu/nav02_01.png); } #nav03 a:link, #nav03 a:visited { background-image:url(http://webgaku.hotcom-web.com/image/okazu/nav03_01.png); } #nav04 a:link, #nav04 a:visited { background-image:url(http://webgaku.hotcom-web.com/image/okazu/nav04_01.png); } /* hover */ #nav01 a:hover { background-image:url(http://webgaku.hotcom-web.com/image/okazu/nav01_01_o.png); } #nav02 a:hover { background-image:url(http://webgaku.hotcom-web.com/image/okazu/nav02_01_o.png); } #nav03 a:hover { background-image:url(http://webgaku.hotcom-web.com/image/okazu/nav03_01_o.png); } #nav04 a:hover { background-image:url(http://webgaku.hotcom-web.com/image/okazu/nav04_01_o.png); } section ul { width:320px; float:left; } .right { float:right; } /* 641px以上、960px以下 */ @media screen and (min-width:641px) and (max-width:960px){ article { width:640px; } } /* 640px以下 */ @media screen and (max-width:640px){ article { width:320px; } } /* IE7 対策 */ *+html nav { margin:0; } *+html section { margin:0; } *+html section ul { height:320px; } *+html section ul li { float:left; margin:0 0 10px; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author vinton URLhttp://d.hatena.ne.jp/vinton/ Webマスターになるべく毎日勉強しています！ Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/aO42/js"></script> css Discussion Questions on this code? Tags css Forked sort by latest page views favorite forked 画像をホバーするとキャプションが表示する「jQuery Im vinton 00 5010 0/52/76
