求職者支援訓練webサイト制作科授業資料

フェリカテクニカルアカデミー池袋の求職者支援訓練webサイト制作科7月クラスの授業解説ブログです。

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

グリッドレイアウトとは

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



f:id:yachin29:20150612111556p:plain

index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>3カラムのグリッドレイアウト</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
$(function() {
  $('#to-top').on('click',function() {
    $('html,body').animate({scrollTop: 0}, 500, 'swing');
  });
});
</script>
</head>

<body>
<div id="container">
<div class="column">
<header>
<h1>楽しいおかず</h1>
<nav>
<ul>
<li id="CONCEPT"><a href="#">CONCEPT</a></li>
<li id="MENU"><a href="#">MENU</a></li>
<li id="ACCESS"><a href="#">ACCESS</a></li>
<li id="NEWS"><a href="#">NEWS</a></li>
</ul>
</nav>
</header>
<ul>
<li><a href="#"><img src="img/ph01_l.jpg" alt="#"></a></li>
</ul>
<ul>
<li><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>
</ul>
<ul>
<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>
</ul>

<ul>
<li><a href="#"><img src="img/ph11_l.jpg" alt=""></a></li>
</ul>

<ul>
<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>
</ul>

<ul>
<li><a href="#"><img src="img/ph15_l.jpg" alt=""></a></li>
</ul>

<ul>
<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 three">
<ul>
<li><a href="#"><img src="img/ph19_l.jpg" alt=""></a></li>
</ul>

<ul>
<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>
</ul>

<ul>
<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>
</ul>

<ul>
<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>
</ul>

<ul>
<li><a href="#"><img src="img/ph30_l.jpg" alt=""></a></li>
</ul>
<footer id="sp">
<p>
<small>Copyright &copy; 2016 ○○○ All Rights Reserved.</small>
</p>
</footer>
</div>

<p><a id="to-top" href="#top">トップに戻る</a></p>
</div>

<footer id="pc">
<p>
<small>Copyright &copy; 2016 ○○○ All Rights Reserved.</small>
</p>
</footer>
</body>
</html>

スタイルシート

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

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

/*レイアウト部分*/
#container {
  width:960px;
  margin:0 auto;
  overflow:hidden;
}
.column {
  width:320px;
  float:left;
}
h1 {
  background:url(../img/logo01.png) no-repeat;
  width:300px;
  height:300px;
  margin:10px;
}
/*隠し文字の処理*/
h1,nav li a {
  white-space:nowrap;
  text-indent:100%;
  overflow:hidden;
}
nav li {
  width:140px;
  height:140px;
}
nav li a {
  display:block;
  height:140px;
}
nav li#CONCEPT a{
  background:url(../img/nav01_01.png) no-repeat;
}
nav li#MENU a{
  background:url(../img/nav02_01.png) no-repeat;
}
nav li#ACCESS a{
  background:url(../img/nav03_01.png) no-repeat;
}
nav li#NEWS a{
  background:url(../img/nav04_01.png) no-repeat;
}
.colum ul {
  width:320px;
  overflow:hidden;
}
.column li {
  float:left;
  margin:10px;
}
.column li.right {
  float:right;
}

footer {
  width:100%;
  background:#281605;
}
footer p {
  font-size:18px;
  color:#FFF;
  padding:20px;
  text-align:center;
}
footer#sp {
  display:none;
}

a#to-top {
  display:block;
  padding:20px;
}
@media screen and (max-width:959px){
#container {
  width:640px;
}
.three {
  width:640px;
  float: none;
}
.three ul {
  width:320px;
  float:left;
}
footer#pc {
  display:none;
}
footer#sp {
  display:block;
  width:300px;
  height:300px;
  background:#281605;
  float:left;
  margin:10px;
}
footer#sp p {
  text-align:left;
  font-size:14px;
  padding-top:240px;
}
}

@media screen and (max-width:639px){
#container {
  width:320px;
}
.column {
  float:none;
}
.three ul {
  float:none;
}
footer#sp {
  clear:left;
  float:none;
}
}

jQueryでスムーススクロール

最近多い縦長のシングルページなどでは、ページトップに戻るのにいちいちマウス操作で戻らせるのはそれだけでユーザーにとってはストレスになってしまいます。
スムーススクロールはプラグインも多くありますが、シンプルな動きであればプラグインを使わずに自身で記述しましょう。

$(function() {
  $('クリックする要素').on('click',function() {
    // スクロール
    $('html,body').animate({scrollTop: 0}, 500, 'swing');
  });
});