COMMEND

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

Vol.21 レスポンシブWebデザインで2カラムレイアウトのページをつくる〜基本構造〜

2014/11/20 up カテゴリー : WEBの現場から！

サイトのトップ画面の制作を終え、一通りレスポンシブWebデザインを理解していただけただろうか。まだ理解不十分だという人は、下記リンクから講座を見直してほしい。

【→完成したトップページを見てみる】
【→実践講座の第一章から始める】
【→完成したトップページのソースをダウンロードする】

ファイルを用意する

さて、今回からはサイトの通常ページを2カラムレイアウトで作成していく。といってもトップページを元に制作していくだけなので、難しく考える必要はない。前回までに作成したサイトのファイルが内包されている「sample」フォルダを開き、その中にある「index.html」を同じ階層（「sample」フォルダ内）にコピーして、ファイル名を「page.html」とする。次に「css」フォルダ内の「style.css」を同じ階層（「css」フォルダ内）にコピーして、ファイル名を「style-page.css」とする。

「page.html」の不必要部分を削除

「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">
<title>MY BLOG</title>

<!--[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">
ここにコンテンツが入ります。ここにコンテンツが入ります。ここにコンテンツが入ります。ここにコンテンツが入ります。ここにコンテンツが入ります。ここにコンテンツが入ります。ここにコンテンツが入ります。ここにコンテンツが入ります。ここにコンテンツが入ります。ここにコンテンツが入ります。ここにコンテンツが入ります。ここにコンテンツが入ります。
	</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>

注意するところは、スタイルシートの読み込み部分を「style.css」から「style-page.css」に変更。コンテンツエリアにはテキストのみ記述しておく。

「style-page.css」の不必要部分を削除

先ほど作成した「style-page.css」を開き、必要ない部分を削除していく。注意する変更箇所は、タブレット向けスタイルとPC向けスタイルのブレイクポイントの変更。これはサイトトップの制作時に説明したが、PC向けスタイルを最初は固定で、960pxでグリッドレイアウトに沿って作成するためである。最後に「フリードグリッド」を導入し完成となるが、それまではこのブレイクポイントを指定しておいてほしい。
　
「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: 960px;
  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: 960px;
  margin: 0 auto;
  text-align: center;
  padding-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～960px */
@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;
  }
}

/* PC向けレイアウト指定：961px以上では固定レイアウト */
@media only screen and (min-width: 961px) {
}

ブレイクポイントを変更したのでそれに合わせて、「ヘッダー」「グローバルナビ」「コンテンツエリア」の最大幅を「max-width: 960px;」に変えておく。また通常ページでは、トップページにあったスライダーはなくなるので、「グローバルナビ」上部にボーダー線を追加してデザインを整えてある。これで通常ページの基本構造ができあがった。では見ていただこう。
　
【通常ページ基本構造】
　
次回からは「コンテンツエリア」に、2カラムの一般的なレスポンシブWebデザインのページの作り方を説明していく。
　