ウェブ学のすすめ

Study of Web Design & Programing

可変グリッドレイアウト+ Lazy Load

CSS jQuery

昨日、divを使ってグリッドレイアウトを作りましたが（グリッドレイアウト（divバージョン） - ウェブ学のすすめ）、今度はarticleやsectionを使って書き直してみました。

書き直すと同時に以下の機能を追加してみました。

  • スクロールするごとに画像を読み込んでくれる「Lazy Load Plugin for jQuery」の導入
  • 制作サイトで使用した「Media Queries」を利用して可変グリッドに

プレビュー


↓別ウィンドウを開いて見る
可変グリッドレイアウト+ Lazy Load

↓QRコード

コード

HTML
<!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 src="jquery.lazyload.js"></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>
CSS
@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;
}