読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

グリッドレイアウト

レスポンシブWebデザイン

グリッドレイアウト

f:id:web-0818:20170107003918p:plain


<!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 &copy 2017 グリッドレイアウト</small></p>
</footer>
</div><!--  /.block-->
</div><!--  /#container-->
<footer id="pc">
<p><small>Copyright &copy 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;
}

}


f:id:web-0818:20170107005628p:plain