HTML5でグリッドレイアウト サンプル（IEでも対応）
HTML5でグリッドレイアウト サンプル IEでも対応しています。
HTML5とCSSだけでこのように画像を配置できます。
floatの特性を生かしてチャレンジしてみて下さい。
私の場合は画像を3列に分けることで、レイアウトしやすくしています。
行ごとに分けても可能なので、チャレンジしてみるのもいいかと思います。
大きい画像は300px X 300px, 小さい画像は140px X 140px, marginは20pxです。
【index.html】
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>HTML5でグリッドレイアウト</title> <link rel="stylesheet" href="style.css"> <!--[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]--></head> <body> <div id="container"> <div class="col"> <header> <h1><img src="img/logo01.png" width="300" height="300" alt=""></h1> </header> <nav> <ul> <li class="mar"><img src="img/nav01_01.png" width="140" height="140" alt=""></li> <li><img src="img/nav02_01.png" width="140" height="140" alt=""></li> <li class="mar"><img src="img/nav03_01.png" width="140" height="140" alt=""></li> <li><img src="img/nav04_01.png" width="140" height="140" alt=""></li> </nav> <section> <ul> <li><img src="img/ph26_l.jpg" width="300" height="300" alt=""></li> </section> <section> <ul> <li class="mar"><img src="img/ph36_mt.jpg" width="140" height="300" alt=""></li> <li><img src="img/ph19_s.jpg" width="140" height="140" alt=""></li> <li><img src="img/ph37_s.jpg" width="140" height="140" alt=""></li> </section> <section> <ul> <li><img src="img/ph23_my.jpg" width="300" height="140" alt=""></li> <li class="mar"><img src="img/ph28_s.jpg" width="140" height="140" alt=""></li> <li><img src="img/ph05_s.jpg" width="140" height="140" alt=""></li> </section> </div> <!--/.col--> <div class="col"> <section> <ul> <li><img src="img/ph12_my.jpg" width="300" height="140" alt=""></li> <li class="mar"><img src="img/ph02_s.jpg" width="140" height="140" alt=""></li> <li><img src="img/ph22_s.jpg" width="140" height="140" alt=""></li> </section> <section> <ul> <li><img src="img/ph10_l.jpg" width="300" height="300" alt=""></li> </section> <section> <ul> <div class="double"> <li><img src="img/ph21_s.jpg" width="140" height="140" alt=""></li> <li><img src="img/ph03_s.jpg" width="140" height="140" alt=""></li> </div> <!--/.double--> <li><img src="img/ph07_mt.jpg" width="140" height="300" alt=""></li> </section> <section> <ul> <li><img src="img/ph09_l.jpg" width="300" height="300" alt=""></li> </section> <section> <ul> <li class="mar"><img src="img/ph13_s.jpg" width="140" height="140" alt=""></li> <li><img src="img/ph27_s.jpg" width="140" height="140" alt=""></li> <li><img src="img/ph24_my.jpg" width="300" height="140" alt=""></li> </section> </div> <!--/.col--> <div class="col"> <section> <ul> <li><img src="img/ph11_l.jpg" width="300" height="300" alt=""></li> </section> <section> <ul> <div class="double"> <li><img src="img/ph18_s.jpg" width="140" height="140" alt=""></li> <li><img src="img/ph17_s.jpg" width="140" height="140" alt=""></li> </div> <!--/.double--> <li><img src="img/ph01_mt.jpg" width="140" height="300" alt=""></li> </section> <section> <ul> <li class="mar"><img src="img/ph20_s.jpg" width="140" height="140" alt=""></li> <li><img src="img/ph06_s.jpg" width="140" height="140" alt=""></li> <li><img src="img/ph15_my.jpg" width="300" height="140" alt=""></li> </section> <section> <ul> <li class="mar"><img src="img/ph25_s.jpg" width="140" height="140" alt=""></li> <li><img src="img/ph08_s.jpg" width="140" height="140" alt=""></li> <li class="mar"><img src="img/ph16_s.jpg" width="140" height="140" alt=""></li> <li><img src="img/ph04_s.jpg" width="140" height="140" alt=""></li> </section> <section> <ul> <li><img src="img/ph14_l.jpg" width="300" height="300" alt=""></li> </section> </div> <!--/.col--> </div> <!--/#container--> </body> </html>
【style.css】
@charset "UTF-8";
/*RESET*/
body, div, ul, li, img, h1 {
margin: 0;
padding: 0;
}
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section { display: block; }
/*STYLE*/
#container {
width: 960px;
margin: 0 auto;
overflow: hidden;
}
.col {
width: 300;
float: left;
margin-right: 20px;
}
section {
width: 300px;
overflow: hidden;
}
nav {
width: 300px;
}
ul {
overflow: hidden;
}
li {
float: left;
list-style: none;
}
.double {
width: 160px;
float: left;
}
li.mar {
margin-right: 20px;
}
img {
margin-bottom: 20px;
}
