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

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

グリッドレイアウトをフルードグリッドにする

授業で作った固定カラムレイアウトのCSSファイルを書き換えて、フルードグリッドにします。

フルードグリッド

 フルードグリッドは、Webページの要素を罫線や升目に沿って配置する「グリッドデザイン(Grid Design)」と、ブラウザーの横幅が変わってもレイアウトを維持したまま要素のサイズを調整する「フルードデザイン(Fluid Design)」を合わせたものです。レスポンシブWebデザインでは、最初にグリッドデザインによって部品や表示領域をpx単位で配置していき、レイアウトが整った後に、値を%に変換してフルードデザインに変更します。



index.html

<!DOCTYPE HTML>
<html><head>
<meta charset="utf-8">
<title>3カラムのグリッドレイアウト</title>
<meta name="viewport" content="width=device-width">
<!-- iOS用 -->
<meta name="apple-mobile-web-app-title" content="楽しいおかず">

<!-- Android版chrome用 -->
<meta name="application-name" content="楽しいおかず">

<link rel="stylesheet" href="css/style2.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<!-- iOS Safari and Chrome -->
<link rel="apple-touch-icon" sizes="192x192" href="icon.png">
<!-- Android標準ブラウザ(一部) -->
<link rel="shortcut icon" href="icon.png">


<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 class="size-2x2">楽しいおかず</h1>
<nav>
<ul>
<li id="CONCEPT" class="size-1x1"><a href="#">CONCEPT</a></li>
<li id="MENU" class="size-1x1"><a href="#">MENU</a></li>
<li id="ACCESS" class="size-1x1"><a href="#">ACCESS</a></li>
<li id="NEWS" class="size-1x1"><a href="#">NEWS</a></li>
</ul>
</nav>
</header>
<ul>
<li class="size-2x2"><a href="#"><img src="img/ph01_l.jpg" alt="#"></a></li>
</ul>
<ul>
<li class="size-1x2"><a href="#"><img src="img/ph02_mt.jpg" alt="#"></a></li>
<li class="size-1x1"><a href="#"><img src="img/ph03_s.jpg" alt="#"></a></li>
<li class="size-1x1"><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 class="size-1x1"><a href="#"><img src="img/ph06_s.jpg" alt=""></a></li>
<li class="size-1x1"><a href="#"><img src="img/ph07_s.jpg" alt=""></a></li>
</ul>
</div>

<div class="column">
<ul>
<li class="size-2x1"><a href="#"><img src="img/ph08_my.jpg" alt=""></a></li>
<li class="size-1x1"><a href="#"><img src="img/ph09_s.jpg" alt=""></a></li>
<li class="size-1x1"><a href="#"><img src="img/ph10_s.jpg" alt=""></a></li>
</ul>

<ul>
<li class="size-2x2"><a href="#"><img src="img/ph11_l.jpg" alt=""></a></li>
</ul>

<ul>
<li class="size-1x1"><a href="#"><img src="img/ph12_s.jpg" alt=""></a></li>
<li class="right size-1x2"><a href="#"><img src="img/ph13_mt.jpg" alt=""></a></li>
<li class="size-1x1"><a href="#"><img src="img/ph14_s.jpg" alt=""></a></li>
</ul>

<ul>
<li class="size-2x2"><a href="#"><img src="img/ph15_l.jpg" alt=""></a></li>
</ul>

<ul>
<li class="size-1x1"><a href="#"><img src="img/ph16_s.jpg" alt=""></a></li>
<li class="size-1x1"><a href="#"><img src="img/ph17_s.jpg" alt=""></a></li>
<li class="size-2x1"><a href="#"><img src="img/ph18_my.jpg" alt=""></a></li>
</ul>
</div>

<div class="column three">
<ul>
<li class="size-2x2"><a href="#"><img src="img/ph19_l.jpg" alt=""></a></li>
</ul>

<ul>
<li class="size-1x1"><a href="#"><img src="img/ph20_s.jpg" alt=""></a></li>
<li class="right size-1x2"><a href="#"><img src="img/ph21_mt.jpg" alt=""></a></li>
<li class="size-1x1"><a href="#"><img src="img/ph22_s.jpg" alt=""></a></li>
</ul>

<ul>
<li class="size-1x1"><a href="#"><img src="img/ph23_s.jpg" alt=""></a></li>
<li class="size-1x1"><a href="#"><img src="img/ph24_s.jpg" alt=""></a></li>
<li class="size-2x1"><a href="#"><img src="img/ph25_my.jpg" alt=""></a></li>
</ul>

<ul>
<li class="size-1x1"><a href="#"><img src="img/ph26_s.jpg" alt=""></a></li>
<li class="size-1x1"><a href="#"><img src="img/ph27_s.jpg" alt=""></a></li>
<li class="size-1x1"><a href="#"><img src="img/ph28_s.jpg" alt=""></a></li>
<li class="size-1x1"><a href="#"><img src="img/ph29_s.jpg" alt=""></a></li>
</ul>

<ul>
<li class="size-2x2"><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">
<i class="fa fa-arrow-circle-o-up fa-4x" aria-hidden="true"></i>
</a>
</p>

</div>

<footer id="pc">
<h2><a href="#">なんかのアイコン</a></h2>
<p>
<small>Copyright &copy; 2016 ○○○ All Rights Reserved.</small>
</p>
</footer>
</body>
</html>

style.css

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

html,body,h1,h2,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 center center/contain;

}
nav li#MENU a{
  background:url(../img/nav02_01.png) no-repeat center center/contain;
}
nav li#ACCESS a{
  background:url(../img/nav03_01.png) no-repeat center center/contain;
}
nav li#NEWS a{
  background:url(../img/nav04_01.png) no-repeat center center/contain;
}
.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;
  position: fixed;
  right:100px;
  bottom:80px;
}

#to-top .fa {
  color:#333;
}
h2 a{
  display:block;
  white-space:nowrap;
  text-indent:100%;
  overflow:hidden;
}
h2:before {
  content:"\f1f9";
  font-family: FontAwesome;
  color:#FFF;
}

@media screen and (max-width:959px){
/*レイアウト部分*/
#container {
  width:100%;/*960pxが100%*/
}
.column {
  width:33.33%;/*3つのカラムを均等幅に*/
}
h1 {
  width:94%;
  height:0;
  margin:3%;/*320pxに対して10pxを四捨五入して3%とする*/
  padding-bottom:94%;
  background-size:cover;
}

nav li {
  width:44%;/*3+44+3+3+44+3=100%*/
  height:44%;
}
nav li a {
  width:100%;
  height:0;
  padding-bottom:100%;
}
.colum ul {
  width:33.33%;
}
.column li {
  margin:3%;
}

li.size-2x2 {
  width:94%;
  height:auto;
}
li.size-2x1 {
  width:94%;
  height:auto;
}
li.size-1x2 {
  width:44%;
  height:auto;
}
li.size-1x1 {
  width:44%;
  height:auto;
}
img {
  max-width:100%;/*フルードイメージ*/
}

footer p {
  font-size:18px;
  padding:20px;
}
a#to-top {
  right:4%;
  bottom:80px;
}


}

@media screen and (max-width:639px){
#container {
  width:320px;
}
.column {
  width:100%;
  float:none;
}
.three ul {
  float:none;
}
footer#pc {
  display:none;
}
footer#sp {
  display:block;
  clear:both;
  width:300px;
  height:300px;
  margin:10px;
}
}