COMMEND

3つの“D”の視点から
夢あるライフスタイルづくりを提案

Vol.25 レスポンシブWebデザイン「2カラムレイアウト」フリードグリッドの完成

カテゴリー : WEBの現場から！

それでは「2カラムレイアウト」通常ページに「フリードグリッド」を導入していく。トップページ作成のときに学んだ【WEBの現場から！Vol.15 「フリードグリッド」の完成】の講座で理解しているとは思うが、まだいまいち分からないという方は、もう一度読み直してほしい。

「フリードグリッド」への変換

前回までに完成した「2カラムレイアウト」のサイトは、961px以上では固定レイアウトとなり、ウィンドウサイズを広げてもpxでそれぞれの要素の幅を指定しているので、幅は固定されたままであった。そこでPC用のブレイクポイントを920pxに改め、921px～1100pxまでをいわゆるリキッドレイアウト（可変レイアウト）にしていく。そして、リキッドに対応したグリッドデザインを特に「フルードグリッド」と言い、レスポンシブWebデザインは「フリードグリッド」を導入することで完成するのである。

960pxで固定レイアウトを作った理由

それならばなぜ最初から920pxで固定レイアウトにしなかったのか？それはグリッドデザインを行う際に、グリッドのカラム数が12や16など多くの数字で割り切れる960pxが、フレキシブルにグリッドの設計を行える数値なのだ。TRIAINAでは、この960pxを基準に固定レイアウトを作成し、その後「フリードグリッド」を導入し、pxで指定していた箇所を%へと変換していく。

カラム幅の変更

pxで指定していた値を%へ変換するには、以下のような計算式を使う。

変換したい値÷変換したい値の親要素の幅×100

PC向け固定スタイルでpx指定していた幅を、上記計算式を使って%にしていく。「#mainarea」と「aside」の親要素「#contents」の幅は960px。それぞれ計算した結果が下記ハイライト部分に記述してある。
　
「style-page.css」

/* PC向けレイアウト指定：961px以上では固定レイアウト */
@media only screen and (min-width: 961px) {
  #mainarea {
    float: left;
    width: 56.25%;
    margin: 20px 10.4166667% 20px 1.04166667%;
  }
  aside {
    float: left;
    width: 31.25%;
    margin: 20px 1.04166667% 20px 0;
  }
  .sub {
    float: none;
    width: 100%;
  }
  .top {
    float: none;
    width: 100%;
  }
  .yokosen {
    display:none;
  }
}

　
次にブレイクポイントの変更。その後「max-width: 960px;」の箇所を「max-width: 1100px;」に変えてやる。下記ハイライト部分。
　
「style-page.css」全ソース

@charset "utf-8";

/* /_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_
 全デバイス共通のスタイルとスマートフォン向けレイアウト指定
/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

/*==========================================
 body
===========================================*/
body {
  width: 100%;
  background-color: #fff;
  font-family: 'Helvetica Neue', Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
  color:#000;
  line-height: 1.6em;
  font-size: 0.9em;
}
a {
  color: #000;
  text-decoration: none;
}
a:hover {
  color: #555;
  text-decoration: underline;
}

/*==========================================
 ヘッダーのスタイル
===========================================*/
header {
  text-align: center;
  margin:0 auto;
}
header h1 {
  padding: 15px 5px 15px 5px;
}
header h1 img {
  width: 100%;
  height: auto;
  max-width: 200px;
}

/*==========================================
 グローバルナビゲーションのスタイル
===========================================*/
#gnav ul {
  text-align: center;
  margin:0 auto;
  max-width: 1100px;
  border-top: 2px solid #000;
}
#gnav ul li {
  float: left;
  width: 50%;
  border-bottom: 2px solid #000;
  padding-top: 15px;
  padding-bottom: 15px;
}
#gnav ul li a {
  display: block;
}

/*==========================================
 コンテンツエリア全体のスタイル
===========================================*/
#contents {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
  padding-bottom: 20px;
}

/*==========================================
 メインエリアのスタイル
===========================================*/
#mainarea {
  text-align: center;
  margin: 20px auto;
  width: 90%;
}
#mainarea h1 {
  font-size: 1.7em;
  font-family: "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","ＭＳ Ｐ明朝","MS PMincho",serif;
  line-height: 1.6em;
  padding: 25px 0;
  text-align: left;
}
#mainarea h3 {
  font-size: 1.2em;
  font-family: "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","ＭＳ Ｐ明朝","MS PMincho",serif;
  line-height: 1.7em;
  text-align: center;
  padding-bottom: 7px;
}
#mainarea time {
  font-size: 0.8em;
  line-height: 1.7em;
  float: right;
}
#mainarea article {
  padding: 25px 0;
  text-align: left;
}
#mainarea article img {
  width:100%;
  height:auto;
  max-width:540px;
  display: block;
  text-align: center;
  margin:20px auto;
}

/*==========================================
 サイドバーのスタイル
===========================================*/
aside {
  text-align: center;
  margin: 0 auto;
  width: 90%;
}
.sub {
  text-align: left;
  width: 100%;
}
.top {
  width:100%;
}
.top img {
  width:100%;
  height:auto;
  margin-bottom: 20px;
}

/*==========================================
 フッターのスタイル
===========================================*/
footer {
  margin: 0 auto;
  text-align: center;
  border-top: 2px solid #c0c0c0;
  padding: 15px 0 15px 0;
}
footer p {
  font-size: 0.6em;
  margin-top: 10px;
}


/* タブレット向けレイアウト指定：521px～920px */
@media only screen and (min-width: 521px) {
  #gnav {
    border-top: 1px solid #000;
    border-bottom: 5px double #000;
    margin-top: 10px;
  }
  #gnav ul {
    border-top: none;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  #gnav ul li {
    width: 16.6666667%;
    border-bottom: none;
  }
  .sub {
    float: right;
    width: 48%;
  }
  .top {
    float: left;
    width:48%;
  }
}

/* PC向けレイアウト指定：921px～1100px（1101px以上は固定レイアウト） */
@media only screen and (min-width: 921px) {
  #mainarea {
    float: left;
    width: 56.25%;
    margin: 20px 10.4166667% 20px 1.04166667%;
  }
  aside {
    float: left;
    width: 31.25%;
    margin: 20px 1.04166667% 20px 0;
  }
  .sub {
    float: none;
    width: 100%;
  }
  .top {
    float: none;
    width: 100%;
  }
  .yokosen {
    display:none;
  }
}

　
最後にトップページ作成と同じように「head」内に「jQuery」読み込みの記述を加える。下記「page.html」の全ソース。ハイライト部分が「jQuery」の読み込み。
　
「page.html」全ソース

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style-page.css">
<link rel="stylesheet" href="css/responsiveslides.css">
<link rel="stylesheet" href="css/meanmenu.css">
<title>MY BLOG</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/function-page.js"></script>
<script type="text/javascript" src="js/scrolltopcontrol.js"></script>
<script type="text/javascript" src="js/jquery.meanmenu.js"></script>

<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->

<!--[if lt IE 9]>
<script src="js/css3-mediaqueries.js"></script>
<![endif]-->

</head>

<body>
<div id="wrap"> 
<!-- ヘッダー -->
	<header> 
		<h1><img src="images/logo.jpg" alt="俺のブログ"></h1>
	</header>

<!-- グローバルナビゲーション -->
	<nav id="gnav">
		<ul class="cf">
			<li><a href="#">HOME</a></li>
			<li><a href="#">COLUMN</a></li>
			<li><a href="#">SNS</a></li>
			<li><a href="#">PROFILE</a></li>
			<li><a href="#">ABOUT</a></li>
			<li><a href="#">CONTACT</a></li>
		</ul>
	</nav>

<!-- コンテンツエリア -->
	<div id="contents" class="cf">
<!-- 投稿記事 -->
		<div id="mainarea">
			<h3>
			COLUMN ＞ カテゴリ名
			</h3>
			<time>2014/11/11</time> 
			<h1>
			タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル
			</h1>
			<article>
ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。

<img src="images/topimage2.jpg" alt="ピックアップ">

ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。
			</article>
		</div>
<!-- サイドバー -->
<hr class="yokosen">
	<aside>
	<div class="top" class="cf">
		<img src="images/topimage.jpg" alt="ピックアップ">
		<img src="images/topimage2.jpg" alt="ピックアップ">
		<img src="images/topimage3.jpg" alt="ピックアップ">
	</div>
	<div class="sub">
ここはサイドバー。記事ランキングとピックアップが入ります。ここはサイドバー。記事ランキングとピックアップが入ります。ここはサイドバー。記事ランキングとピックアップが入ります。ここはサイドバー。記事ランキングとピックアップが入ります。ここはサイドバー。記事ランキングとピックアップが入ります。ここはサイドバー。記事ランキングとピックアップが入ります。
	</div><!-- #sub end -->
	</aside>
	</div><!-- #contents end -->

<!-- フッター -->
	<footer>
		<img src="images/logo.jpg" width="100" height="17" alt="俺のブログ">
		<p>Copyright &copy; 2014 MY BLOG All Rights Reserved.</p>
	</footer>

</div><!-- #wrap end -->
</body>
</html>

　
注意点はトップページ作成の際に記述していた「heightLine.js」「responsiveslides.js」「responsiveslides.min.js」の読み込みは、通常ページでは不要なので消しておく。また、「function.js」に書き込んである「レスポンシブスライダーのオプション設定」と「ボックスの高さを揃える要素指定」は不要となるので、「function.js」をコピーして「レスポンシブメニューオプション」のみ残して「function-page.js」と名前をつけて同じ階層（「js」フォルダ内）に保存する。
　
「function-page.js」

/* レスポンシブメニューオプション */
$(function() {
	$('#gnav').meanmenu({
	meanMenuClose: "x", // クローズボタン
	meanMenuCloseSize: "18px", // クローズボタンのフォントサイズ
	meanMenuOpen: "<span /><span /><span />", // 通常ボタン
	meanRevealPosition: "right", // 表示位置
	meanRevealColour: "", // 背景色
	meanScreenWidth: "480", // 表示させるウィンドウサイズ(ブレイクポイント)
	});
  });

　
これで一通りの「2カラムレイアウト」通常ページが完成した。下記リンクからPCで見て、ウィンドウ幅を縮めたり広げたりして確かめてみてほしい。
　
【2カラムレイアウト「フリードグリッド」】
　
次回はこの「2カラムレイアウト」ページの微修正を行う。レスポンシブWebデザインは、全てのデバイスに有効でなければならない。ある特定のウィンドウサイズのときだけ、微妙に見にくかったり、表示が崩れてしまってはいけないのである。サイト完成後は様々なテストを行い、さらに見やすいレスポンシブWebデザインのサイトを目指していってほしい。
　

このエントリーをはてなブックマークに追加

トリアイナ
新着記事

連載

ランキング

    • It is up to oneself to make an uninteresting world interesting.