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

求職者支援訓練webサイト制作科1月クラス

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

フルードグリッド

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


フルードグリッド

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


index.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>フルードグリッドレイアウトの練習</title>
<meta name="apple-mobile-web-app-title" content="楽しいおかず">
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.ico"/>
<!-- iOS Safari and Chrome -->
<link rel="apple-touch-icon" sizes="192x192" href="touch-icon.png">

<!-- Android標準ブラウザ(一部) -->
<link rel="shortcut icon" href="http://〇〇〇〇.com/touch-icon.png">
</head>
</head>
<body>
<div id="container">
<div class="column">
<header>
<h1>楽しいおかず</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"><img src="img/ph01_l.jpg" alt=""></li>
<li class="size_1x2"><img src="img/ph02_mt.jpg" alt=""></li>
<li class="size_1x1"><img src="img/ph03_s.jpg" alt=""></li>
<li class="size_1x1"><img src="img/ph04_s.jpg" alt=""></li>
<li class="size_2x1"><img src="img/ph05_my.jpg" alt=""></li>
<li class="size_1x1"><img src="img/ph06_s.jpg" alt=""></li>
<li class="size_1x1"><img src="img/ph07_s.jpg" alt=""></li>
</ul>
</div>
<div class="column">
<ul>
<li class="size_2x1"><img src="img/ph08_my.jpg" alt=""></li>
<li class="size_1x1"><img src="img/ph09_s.jpg" alt=""></li>
<li class="size_1x1"><img src="img/ph10_s.jpg" alt=""></li>
<li class="size_2x2"><img src="img/ph11_l.jpg" alt=""></li>
<li class="size_1x1"><img src="img/ph12_s.jpg" alt=""></li>
<li class="right size_1x2"><img src="img/ph13_mt.jpg" alt=""></li>
<li class="size_1x1"><img src="img/ph14_s.jpg" alt=""></li>
<li class="size_2x2"><img src="img/ph15_l.jpg" alt=""></li>
<li class="size_1x1"><img src="img/ph16_s.jpg" alt=""></li>
<li class="size_1x1"><img src="img/ph17_s.jpg" alt=""></li>
<li class="size_2x1"><img src="img/ph18_my.jpg" alt=""></li>
</ul>
</div>
<div class="column three">
<ul>
<li class="size_2x2"><img src="img/ph19_l.jpg" alt=""></li>
<li class="size_1x1"><img src="img/ph20_s.jpg" alt=""></li>
<li class="right size_1x2"><img src="img/ph21_mt.jpg" alt=""></li>
<li class="size_1x1 odd"><img src="img/ph22_s.jpg" alt=""></li>
</ul>
<ul>
<li class="size_1x1"><img src="img/ph23_s.jpg" alt=""></li>
<li class="size_1x1"><img src="img/ph24_s.jpg" alt=""></li>
<li class="size_2x1"><img src="img/ph25_my.jpg" alt=""></li>
<li class="size_1x1"><img src="img/ph26_s.jpg" alt=""></li>
<li class="size_1x1"><img src="img/ph27_s.jpg" alt=""></li>
<li class="size_1x1"><img src="img/ph28_s.jpg" alt=""></li>
<li class="size_1x1"><img src="img/ph29_s.jpg" alt=""></li>
<li class="size_2x2"><img src="img/ph30_l.jpg" alt=""></li>
</ul>
</div>
</div><!--/container-->

<footer>
<p><small>Copyright &copy; 2017 ○○○ All Rights Reserved.</small></p>
</footer>

</body>
</html>


スタイルシート

@charset "utf-8";
/* CSS Document */
html, body, h1, ul, li, p, small {
  margin: 0;
  padding: 0;
  line-height: 1.0;
}
ul {
  list-style: none;
}
a {
	text-decoration: none;
}
img {
  border: none;
  vertical-align: bottom;
}

/*レイアウト*/
body {
  background:#666666;
}

#container {
  width:980px;
  overflow:hidden;
  margin: 0 auto;
  padding:10px;
  box-sizing:border-box;
  background:#FFFFFF;
}
.column {
  width:320px;
  float:left;
}
h1 {
  width:300px;
  height:300px;
  background:url(img/logo01.png) no-repeat;
  margin:10px;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
}
nav li a {
  display:block;
  width:140px;
  height:140px;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
}
li#concept a {
  background:url(img/nav01_01.png) no-repeat;
}
li#menu a {
  background:url(img/nav02_01.png) no-repeat;
}
li#access a {
  background:url(img/nav03_01.png) no-repeat;
}
li#news a {
  background:url(img/nav04_01.png) no-repeat;
}
ul {
  overflow:hidden;
}
li {
  float:left;
  margin:10px;
}
li.right {
  float:right;
}
footer{
  width: 100%;
  height: 50px;
  background: #281605;
}
footer p {
  text-align: center;
  color: #FFF;
  font-size: 18px;
  line-height: 50px;
}

@media screen and (max-width:979px){
body {
  background:#666666;
}
#container {
  width:100%;
  overflow:hidden;
  margin: 0 auto;
  padding:10px;
  box-sizing:border-box;
  background:#FFFFFF;
}
.column {
  width:33.33%;
  float:left;
}
h1 {
  width:93.75%;
  height:0;
  padding-bottom:93.75%;
  background:url(img/logo01.png) no-repeat center/cover;
  margin:3.125%;
}

nav li a {
  width:100%;
  height:0;
  padding-bottom:100%;
}
nav li#concept a {
  background:url(img/nav01_01.png) no-repeat center/cover;
}
li#menu a {
  background:url(img/nav02_01.png) no-repeat center/cover;
}
li#access a {
  background:url(img/nav03_01.png) no-repeat center/cover;
}
li#news a {
  background:url(img/nav04_01.png) no-repeat center/cover;
}
ul {
  width:100%;
  overflow:hidden;
}
li {
  float:left;
  margin:3.125%;
}
li.size_2x2 {
  width:93.75%;
  height:93.75%;
}
li.size_2x1 {
  width:93.75%;
  height:43.75%
}
li.size_1x2 {
  width:43.75%;
  height:93.75%;
}
li.size_1x1 {
  width:43.75%;
  height:43.75%;
}

img {
  max-width:100%;
}

}
@media screen and (max-width:659px){
#container {
  width: 340px;
  margin:0 auto;
}
.column {
  width:320px;
  float:none;
}

}
広告を非表示にする