ウェブ学のすすめ

Study of Web Design & Programing

グリッドレイアウト（divバージョン）

jQuery

プレビュー


↓別ウィンドウを開いて見る
グリッドレイアウト（divバージョン）

コード

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>グリッドレイアウト（divバージョン）</title>
</head>
<body>
<div id="container">
<div class="row_group">
<div id="header">
    <a href="#"><img src="http://webgaku.hotcom-web.com/image/okazu/logo01.png" width="300" height="300" alt=""><em>グリッド1</em></a>
</div>
<div id="nav">
<ul>
    <li id="nav01"><a href="#"><em>グリッド2-1</em></a></li>
    <li id="nav02"><a href="#"><em>グリッド2-2</em></a></li>
    <li id="nav03"><a href="#"><em>グリッド2-3</em></a></li>
    <li id="nav04"><a href="#"><em>グリッド2-4</em></a></li>
</ul>
</div>
<div id="first_content">    
<ul>
    <li><a href="#"><img src="http://webgaku.hotcom-web.com/image/okazu/ph26_l.jpg" width="300" height="300" alt=""><em>グリッド3</em></a></li>
</ul>
<ul>    
    <li class="row_box"><a href="#"><img src="http://webgaku.hotcom-web.com/image/okazu/ph36_mt.jpg" width="140" height="300" alt=""><em>グリッド4-1</em></a></li>
    <li class="row_box"><a href="#"><img src="http://webgaku.hotcom-web.com/image/okazu/ph19_s.jpg" width="140" height="140" alt=""><em>グリッド4-2</em></a></li>
	<li class="row_box"><a href="#"><img src="http://webgaku.hotcom-web.com/image/okazu/ph37_s.jpg" width="140" height="140" alt=""><em>グリッド4-3</em></a></li>
</ul>
<ul>
	<li class="col_box"><a href="#"><img src="http://webgaku.hotcom-web.com/image/okazu/ph23_my.jpg" width="300" height="140" alt=""><em>グリッド5-1</em></a></li>
	<li class="row_box"><a href="#"><img src="http://webgaku.hotcom-web.com/image/okazu/ph28_s.jpg" width="140" height="140" alt=""><em>グリッド5-2</em></a></li>
	<li class="row_box"><a href="#"><img src="http://webgaku.hotcom-web.com/image/okazu/ph05_s.jpg" width="140" height="140" alt=""><em>グリッド5-3</em></a></li>
</ul>  
</div>    
</div>

<div class="row_group">
<ul>
	<li class="col_box"><a href="#"><img src="http://webgaku.hotcom-web.com/image/okazu/ph12_my.jpg" width="300" height="140" alt=""><em>グリッド6-1</em></a></li>
	<li class="row_box"><a href="#"><img src="http://webgaku.hotcom-web.com/image/okazu/ph02_s.jpg" width="140" height="140" alt=""><em>グリッド6-2</em></a></li>
	<li class="row_box"><a href="#"><img src="http://webgaku.hotcom-web.com/image/okazu/ph22_s.jpg" width="140" height="140" alt=""><em>グリッド6-3</em></a></li>
</ul>
<ul>
	<li><a href="#"><img src="http://webgaku.hotcom-web.com/image/okazu/ph10_l.jpg" width="300" height="300" alt=""><em>グリッド7</em></a></li>    
</ul>
<ul>
	<li class="row_box_right"><a href="#"><img src="http://webgaku.hotcom-web.com/image/okazu/ph07_mt.jpg" width="140" height="300" alt=""><em>グリッド8-1</em></a></li>
	<li class="row_box"><a href="#"><img src="http://webgaku.hotcom-web.com/image/okazu/ph21_s.jpg" width="140" height="140" alt=""><em>グリッド8-2</em></a></li>
	<li class="row_box"><a href="#"><img src="http://webgaku.hotcom-web.com/image/okazu/ph03_s.jpg" width="140" height="140" alt=""><em>グリッド8-3</em></a></li>
</ul>
<ul>
	<li><a href="#"><img src="http://webgaku.hotcom-web.com/image/okazu/ph09_l.jpg" width="300" height="300" alt=""><em>グリッド9</em></a></li> 
</ul>
<ul>
	<li class="row_box"><a href="#"><img src="http://webgaku.hotcom-web.com/image/okazu/ph13_s.jpg" width="140" height="140" alt=""><em>グリッド10-1</em></a></li>
	<li class="row_box"><a href="#"><img src="http://webgaku.hotcom-web.com/image/okazu/ph27_s.jpg" width="140" height="140" alt=""><em>グリッド10-2</em></a></li>
	<li class="col_box"><a href="#"><img src="http://webgaku.hotcom-web.com/image/okazu/ph24_my.jpg" width="300" height="140" alt=""><em>グリッド10-3</em></a></li>
</ul>
</div>
    
<div class="row_group">
<ul>
	<li><a href="#"><img src="http://webgaku.hotcom-web.com/image/okazu/ph11_l.jpg" width="300" height="300" alt=""><em>グリッド11</em></a></li>
</ul>
<ul>
	<li class="row_box_right"><a href="#"><img src="http://webgaku.hotcom-web.com/image/okazu/ph01_mt.jpg" width="140" height="300" alt=""><em>グリッド12-1</em></a></li>
	<li class="row_box"><a href="#"><img src="http://webgaku.hotcom-web.com/image/okazu/ph18_s.jpg" width="140" height="140" alt=""><em>グリッド12-2</em></a></li>
	<li class="row_box"><a href="#"><img src="http://webgaku.hotcom-web.com/image/okazu/ph17_s.jpg" width="140" height="140" alt=""><em>グリッド12-3</em></a></li>
</ul>
<ul>
	<li class="row_box"><a href="#"><img src="http://webgaku.hotcom-web.com/image/okazu/ph20_s.jpg" width="140" height="140" alt=""><em>グリッド13-1</em></a></li>
	<li class="row_box"><a href="#"><img src="http://webgaku.hotcom-web.com/image/okazu/ph06_s.jpg" width="140" height="140" alt=""><em>グリッド13-2</em></a></li>
	<li class="col_box"><a href="#"><img src="http://webgaku.hotcom-web.com/image/okazu/ph15_my.jpg" width="300" height="140" alt=""><em>グリッド13-3</em></a></li>
</ul>
<ul>
	<li class="row_box"><a href="#"><img src="http://webgaku.hotcom-web.com/image/okazu/ph25_s.jpg" width="140" height="140" alt=""><em>グリッド14-1</em></a></li>
	<li class="row_box"><a href="#"><img src="http://webgaku.hotcom-web.com/image/okazu/ph08_s.jpg" width="140" height="140" alt=""><em>グリッド14-2</em></a></li>
	<li class="row_box"><a href="#"><img src="http://webgaku.hotcom-web.com/image/okazu/ph16_s.jpg" width="140" height="140" alt=""><em>グリッド14-3</em></a></li>
	<li class="row_box"><a href="#"><img src="http://webgaku.hotcom-web.com/image/okazu/ph04_s.jpg" width="140" height="140" alt=""><em>グリッド14-4</em></a></li>
</ul>
<ul>
	<li><a href="#"><img src="http://webgaku.hotcom-web.com/image/okazu/ph14_l.jpg" width="300" height="300" alt=""><em>グリッド15</em></a></li>
</ul>
</div>
</div>
</body>
</html>
CSS
@charset "utf-8";

* {
    margin:0;
    padding:0;
}
body {
    background-color: #eee;
    background-image:url(http://webgaku.hotcom-web.com/image/okazu/bg.png);
}
ul {
    list-style-type:none;
}
img {
    border: none;
}
em {
    visibility:hidden;
}
a {
    text-decoration:none;   
}

#container {
    width:960px;
    margin:30px auto;
}

.row_group {
    float:left;
    width:320px;
}

/* #nav */
#nav ul li {
    float:left;
    width:140px;
    height:140px;
    padding:0 20px 20px 0;
}
#nav ul li a{
    display:block;
    width:140px;
    height:140px;
}
#nav01 a:link, #nav01 a:visited { background-image:url(http://webgaku.hotcom-web.com/image/okazu/nav01_01.png); }
#nav01 a:hover { background-image:url(http://webgaku.hotcom-web.com/image/okazu/nav01_01_o.png); }

#nav02 a:link, #nav02 a:visited { background-image:url(http://webgaku.hotcom-web.com/image/okazu/nav02_01.png); }
#nav02 a:hover { background-image:url(http://webgaku.hotcom-web.com/image/okazu/nav02_01_o.png); }

#nav03 a:link, #nav03 a:visited { background-image:url(http://webgaku.hotcom-web.com/image/okazu/nav03_01.png); }
#nav03 a:hover { background-image:url(http://webgaku.hotcom-web.com/image/okazu/nav03_01_o.png); }

#nav04 a:link, #nav04 a:visited { background-image:url(http://webgaku.hotcom-web.com/image/okazu/nav04_01.png); }
#nav04 a:hover { background-image:url(http://webgaku.hotcom-web.com/image/okazu/nav04_01_o.png); }

.row_box {
    float:left;
    width:140px;
    padding:0 20px 0 0;
}
.row_box_right {
    float:right;
    width:140px;
    padding:0 20px 0 0;
}
.col_box {
    float:left;
    width:300px;
}