WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

レスポンシブデザイン　グリッドレイアウト

レスポンシブデザイン

グリッドレイアウトとは

グリッドとは「格子状の」という意味がありますが、画面をいくつかのサイズのブロックで組み合わせ、コンテンツを配置していく画面設計手法のひとつです。元々紙媒体でよく使われたレイアウト方法ですが、Webでもレスポンシブデザインとの親和性が高く、最近よく見かけるレイアウトの1つです。


グリッドデザインを使用しているサイト
firadis.net


www.fujiya-peko.co.jp



今回のパターンはブレイクポイントごとにカラム落ちしていくパターンで、
PCでは３カラム
タブレットでは２カラム
スマホでは１カラム
になるレイアウトです。
通常、レスポンシブレイアウトは幅などに固定値を使用せず、フルード化（可変）していきますが、今回のようにカラムの中の大きさが変わらない場合はフルードレイアウトとは違い、横幅などが今までと同じように固定値を指定出来るので簡単に作る事が出来ます。


画面幅に合わせてカラムが落ちていくグリッドデザイン
和洋女子大学


PCレイアウト　3カラム（960px以上）
f:id:yachin29:20170105133643p:plain


タブレットレイアウト　2カラム（959px～641px以下）
f:id:yachin29:20160519093632p:plain


スマホレイアウト　1カラム（640px以下）
f:id:yachin29:20160519093719p:plain

使用素材

http://yachin29.com/photoshop/okazu.zip



index.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>グリッドデザイン</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div id="container">
<div class="column">
<header>
<h1>タイトル</h1>
<nav>
<ul>
<li><a href="#"><img src="img/nav01_01.png" alt=""></a></li>
<li><a href="#"><img src="img/nav02_01.png" alt=""></a></li>
<li><a href="#"><img src="img/nav03_01.png" alt=""></a></li>
<li><a href="#"><img src="img/nav04_01.png" alt=""></a></li>
</ul>
</nav>
</header>
<ul>
<li><a href="#"><img src="img/ph01_l.jpg" alt=""></a></li>
<li class="right"><a href="#"><img src="img/ph02_mt.jpg" alt=""></a></li>
<li><a href="#"><img src="img/ph03_s.jpg" alt=""></a></li>
<li><a href="#"><img src="img/ph04_s.jpg" alt=""></a></li>
<li><a href="#"><img src="img/ph05_my.jpg" alt=""></a></li>
<li><a href="#"><img src="img/ph06_s.jpg" alt=""></a></li>
<li><a href="#"><img src="img/ph07_s.jpg" alt=""></a></li>
</ul>
</div>

<div class="column">
<ul>
<li><a href="#"><img src="img/ph08_my.jpg" alt=""></a></li>
<li><a href="#"><img src="img/ph09_s.jpg" alt=""></a></li>
<li><a href="#"><img src="img/ph10_s.jpg" alt=""></a></li>
<li><a href="#"><img src="img/ph11_l.jpg" alt=""></a></li>
<li><a href="#"><img src="img/ph12_s.jpg" alt=""></a></li>
<li class="right"><a href="#"><img src="img/ph13_mt.jpg" alt=""></a></li>
<li><a href="#"><img src="img/ph14_s.jpg" alt=""></a></li>
<li><a href="#"><img src="img/ph15_l.jpg" alt=""></a></li>
<li><a href="#"><img src="img/ph16_s.jpg" alt=""></a></li>
<li><a href="#"><img src="img/ph17_s.jpg" alt=""></a></li>
<li><a href="#"><img src="img/ph18_my.jpg" alt=""></a></li>
</ul>
</div>

<div class="column third">
<ul>
<li><a href="#"><img src="img/ph19_l.jpg" alt=""></a></li>
<li><a href="#"><img src="img/ph20_s.jpg" alt=""></a></li>
<li class="right"><a href="#"><img src="img/ph21_mt.jpg" alt=""></a></li>
<li><a href="#"><img src="img/ph22_s.jpg" alt=""></a></li>
<li><a href="#"><img src="img/ph23_s.jpg" alt=""></a></li>
<li><a href="#"><img src="img/ph24_s.jpg" alt=""></a></li>
<li><a href="#"><img src="img/ph25_my.jpg" alt=""></a></li>
<li><a href="#"><img src="img/ph26_s.jpg" alt=""></a></li>
<li><a href="#"><img src="img/ph27_s.jpg" alt=""></a></li>
<li><a href="#"><img src="img/ph28_s.jpg" alt=""></a></li>
<li><a href="#"><img src="img/ph29_s.jpg" alt=""></a></li>
<li><a href="#"><img src="img/ph30_l.jpg" alt=""></a></li>
</ul>
</div>
</div>
<footer>
<p><small>Copyright &copy; 2017 ○○ All Rights Reserved.</small></p>
</footer>
</body>
</html>


スタイルシート

@charset "utf-8";
/* CSS Document */

html,body,h1,p,ul,li {
margin:0;
padding:0;
line-height:1.0;
}
ul {
list-style:none;
}
a {
text-decoration:none;
}
img {
vertical-align:bottom;
}

/*PCレイアウト*/
#container {
width:960px;
margin:10px auto;
overflow:hidden;
}
h1 {
width:300px;
height:300px;
background:url(img/logo01.png) no-repeat;
text-indent:100%;
white-space:nowrap;
overflow:hidden;
}
.column {
width:320px;
float:left;
}
h1,li {
float:left;
margin:10px;
}
li.right {
float:right;
}
footer {
  width: 100%;
  height: 100px;
  background: #281605;
}
footer p {
  text-align: center;
  color: #FFF;
  font-size: 18px;
  line-height: 100px;
}
footer#sp {
display:none;
}
/*タブレットレイアウト*/
@media screen and (max-width:959px){
#container {
width:640px;
}
.third {
width:640px;
}
footer#sp {
display:block;
width:300px;
height:300px;
background: #281605;
float:left;
margin:10px;
}
footer#pc {
display:none;
}
}

/*スマホレイアウト*/
@media screen and (max-width:640px){
#container {
width:320px;
}
.third {
width:320px;
}

}