グリッドレイアウト
グリッドレイアウト
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>グリッドレイアウト</title> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="container"> <div class="block"> <header> <h1><img src="img/logo01.png" alt="グリッドレイアウトロゴ"></h1> <nav> <ul> <li><a href="#"><img src="img/nav01_01.png" alt="CONCEPT"></a></li> <li><a href="#"><img src="img/nav02_01.png" alt="MENU"></a></li> <li><a href="#"><img src="img/nav03_01.png" alt="ACCESS"></a></li> <li><a href="#"><img src="img/nav04_01.png" alt="NEWS"></a></li> </ul> </nav> </header> <ul class="box"> <li><a href="#"><img src="img/01.jpg" alt=""></a></li> </ul> <ul class="box"> <li><a href="#"><img src="img/02.jpg" alt=""></a></li> <li><a href="#"><img src="img/03.jpg" alt=""></a></li> <li><a href="#"><img src="img/04.jpg" alt=""></a></li> </ul> <ul class="box"> <li><a href="#"><img src="img/05.jpg" alt=""></a></li> <li><a href="#"><img src="img/06.jpg" alt=""></a></li> <li><a href="#"><img src="img/07.jpg" alt=""></a></li> </ul> </div><!-- /.block--> <div class="block"> <ul class="box"> <li><a href="#"><img src="img/08.jpg" alt=""></a></li> <li><a href="#"><img src="img/09.jpg" alt=""></a></li> <li><a href="#"><img src="img/10.jpg" alt=""></a></li> </ul> <ul class="box"> <li><a href="#"><img src="img/11.jpg" alt=""></a></li> </ul> <ul class="box"> <li><a href="#"><img src="img/12.jpg" alt=""></a></li> <li class="right"><a href="#"><img src="img/13.jpg" alt=""></a></li> <li><a href="#"><img src="img/14.jpg" alt=""></a></li> </ul> <ul class="box"> <li><a href="#"><img src="img/15.jpg" alt=""></a></li> </ul> <ul class="box"> <li><a href="#"><img src="img/16.jpg" alt=""></a></li> <li><a href="#"><img src="img/17.jpg" alt=""></a></li> <li><a href="#"><img src="img/18.jpg" alt=""></a></li> </ul> </div><!-- /.block--> <div class="block third"> <ul class="box"> <li><a href="#"><img src="img/19.jpg" alt=""></a></li> </ul> <ul class="box"> <li><a href="#"><img src="img/20.jpg" alt=""></a></li> <li class="right"><a href="#"><img src="img/21.jpg" alt=""></a></li> <li><a href="#"><img src="img/22.jpg" alt=""></a></li> </ul> <ul class="box"> <li><a href="#"><img src="img/23.jpg" alt=""></a></li> <li><a href="#"><img src="img/24.jpg" alt=""></a></li> <li><a href="#"><img src="img/25.jpg" alt=""></a></li> </ul> <ul class="box"> <li><a href="#"><img src="img/26.jpg" alt=""></a></li> <li><a href="#"><img src="img/27.jpg" alt=""></a></li> <li><a href="#"><img src="img/28.jpg" alt=""></a></li> <li><a href="#"><img src="img/29.jpg" alt=""></a></li> </ul> <ul class="box"> <li><a href="#"><img src="img/30.jpg" alt=""></a></li> </ul> <footer id="sp"> <p><small>Copyright © 2017 グリッドレイアウト</small></p> </footer> </div><!-- /.block--> </div><!-- /#container--> <footer id="pc"> <p><small>Copyright © 2017 グリッドレイアウト</small></p> </footer> </body> </html>
@charset "UTF-8"; /* reset ------------------------------------*/ html, body, h1, p, ul, li { margin: 0; padding: 0; line-height: 1.0; } ul { list-style: none; } a { text-decoration: none; } img { border: none; vertical-align: bottom; } /* layout ------------------------------------*/ #container { overflow: hidden; width: 960px; margin: 10px auto; } header, .box { overflow: hidden; float: left; width: 320px; } li { float: left; } img { margin: 10px; } .right { float: right; } #pc { height: 100px; background-color: #281605; } #pc>p { color: #FFF; text-align: center; padding: 20px 0; } #sp { display: none; } @media screen and (max-width: 959px){ /* タブレットレイアウト */ #container { overflow: hidden; width: 640px; } .third { width: 640px; } #pc { display: none; } #sp { display: block; float: left; width: 300px; height: 300px; margin: 10px; background-color: #281605; } #sp>p { color: #FFF; text-align: center; line-height: 300px; } } @media screen and (max-width: 640px){ /*スマートフォンレイアウト */ #container { width: 100%; } .block { width: 320px; margin: auto; } .third { width: 320px; margin: auto; } #sp { display: none; } #pc { display: block; height: 60px; background-color: #281605; } #pc>p { color: #FFF; text-align: center; padding: 20px 0; } }