COMMEND

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

Vol.11 レスポンシブWebデザイン！可変する段組(マルチカラム)を極める（1）

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

グローバルナビゲーションを設置し、いよいよメインのコンテンツエリアに突入する！考え方はグローバルナビゲーションのときと同じで、ボックスを%で指定して、カラムが2段組み→3段組み→6段組みへと可変していく。まずはスマートフォン向けスタイルの2段組みを作成する。
　
レスポンシブwebデザイン
　
「index.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.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>
		<img src="images/topimage.jpg" alt="俺のブログ">
	</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"> 
		<section id="main" class="cf">
		<h2><img src="images/new.png" width="100" height="50" alt="works"></h2>
			<section class="news">
			<img src="images/new1.jpg" width="184" height="184" alt="work1">
			<h3>Article1</h3>
			<p>レスポンシブWebデザインとは、あらゆるデバイスに最適化したWebサイトを、一つのHTMLで…</p>
			</section>
			<section class="news">
			<img src="images/new2.jpg" width="184" height="184" alt="work1">
			<h3>Article2</h3>
			<p>実現できるシンプルな制作手法。CSSを調整することによって、画面サイズを基準にサイトの…</p>
			</section>
			 <section class="news">
			<img src="images/new3.jpg" width="184" height="184" alt="work1">
			<h3>Article3</h3>
			<p>切り替えが可能に。フルードイメージとは、ブラウザのウィンドウ幅に合わせて、画像のサイズを…</p>
			</section>
			<section class="news">
			<img src="images/new4.jpg" width="184" height="184" alt="work1">
			<h3>Article4</h3>
			<p>拡大・縮小する手法。CSSのみで実装。メディアクエリとは、「画像解像度」「ウィンドウの幅」…</p>
			</section>
			<section class="news">
			<img src="images/new5.jpg" width="184" height="184" alt="work1">
			<h3>Article5</h3>
			<p>「デバイスの向き」などを条件に、サイズに応じたCSSにスタイルを切り替えることができる。…</p>
			</section>
			<section class="news">
			<img src="images/new6.jpg" width="184" height="184" alt="work1">
			<h3>Article6</h3>
			<p>フルードグリッドとは、「グリッドデザイン」と、「リキッドレイアウト」を合わせたものである。…</p>
			</section>
		</section>
	</div><!-- #contents end -->
	
</div><!-- #wrap end -->
</body>
</html>

　
上記HTMLのハイライト表示されたコンテンツエリア部分が今回、新たに追加した部分。下記cssのハイライト部分が、今回追加するコード。スマートフォン向けスタイルに記述していく。
　
「style.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;
}
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;
}
header img {
  width:100%;
  height:auto;
  max-width:960px;
}

/*==========================================
 グローバルナビゲーションのスタイル
===========================================*/
#gnav ul {
  text-align:center;
  margin:0 auto;
  max-width: 960px;
}
#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;
}
/*==========================================
 コンテンツエリア -> NEWのスタイル
===========================================*/
#main h2 {
  margin-bottom: 15px;
}
#main .news {
  width: 50%;
  float: left;
  margin-bottom: 20px;
}
#main .news img {
  width: 100%;
  height: auto;
  max-width: 90%;
} 
#main .news h3 {
  text-align: left;
  font-size: 0.9em;
  font-weight: bold;
  line-height: 2.0em;
  padding: 0 5%;
}
#main .news p {
  text-align: left;
  font-size: 0.7em;
  line-height: 2.0em;
  padding: 0 5%;
}

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

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

}

まずは、「コンテンツエリア全体のスタイル」から説明。

#contents {
  max-width: 960px;
  margin: 0 auto;
  text-align:center;
  padding-bottom: 20px;
}

HTMLでは、idセレクタ「contents」で全体を囲んでいたのが分かったかと思う。CSSには「#contents」にセンター揃えを指定している。これは「ヘッダー」や「グローバルナビゲーション」のときと同じ。そして「max-width: 960px;」とし、コンテンツエリアの最大値を指定する。
　
次に「contents」内に「section要素」のidセレクタ「main」を入れ、コンテンツエリア全体の見出しとなる<h2>を加える。さらに「main」内をセクショニングする。
　
「セクショニング」

<!-- コンテンツエリア -->
	<div id="contents"> 
		<section>
		<h2>〜</h2>
			<section>
			<h3>Article1</h3>
			</section>
			<!-- 中略 -->
			<section>
			<h3>Article6</h3>
			</section>
		</section>
	</div><!-- #contents end -->

<h2>を含む<section>タグ内に、<h3>を含む<section>タグが6つ並んでいるのが分かるだろう。この<h3>を含む<section>は、将来WordPressと連結させたときに、投稿記事の新着情報の抜粋がアップされるようにしていく予定だ。<h2>タグにコンテンツの見出しとなる画像を入れていく。以下から画像をダウンロードして解凍。
　
【→new.png（zip）】
　
ダウンロードした画像を「images」フォルダ内に入れる。続いて<h2>部分のCSSを記述していく。

#main h2 {
  margin-bottom: 15px;
}

これでコンテンツ全体の見出しとなる画像のスタイルが完了。そして6つのボックス内のスタイルを指定していく。

#main .news {
  width: 50%;
  float: left;
  margin-bottom: 20px;
}
#main .news img {
  width: 100%;
  height: auto;
  max-width: 90%;
} 
#main .news h3 {
  text-align: left;
  font-size: 0.9em;
  font-weight: bold;
  line-height: 2.0em;
  padding: 0 5%;
}
#main .news p {
  text-align: left;
  font-size: 0.7em;
  line-height: 2.0em;
  padding: 0 5%;
}

2段組を作成するので、それぞれのボックスのスタイルの「#main .news」には「width: 50%;」と指定し、「float: left;」を記述する。これは前回の「グローバルナビゲーション」を作成したときと同じ考え方である。ボックス内の画像のスタイル「#main .news img」には、「width: 100%;」「height: auto;」と「フルードイメージ」にしてから、最大値を「max-width: 90%;」としてやる。これで画像の左右には余白ができ、見やすいレイアウトとなる。次にボックス内の画像6つをダウンロード。
　
【→new1-6（zip）】
　
解凍してできたフォルダ内の6つの画像を「images」フォルダ内に入れる。続いて、ボックス内の見出し「h3要素」と文章の「p要素」をそれぞれ指定する。どちらも「padding」の左右の値を5%とすることで、最大値90%に指定したボックス内の画像と左右のつらが揃うようにしている。では見ていただこう。
　
【コンテンツエリア2段組みボックス】
　
当然だが、タブレット向けスタイルとPC用固定スタイルには、まだ記述していないので、ブラウザ幅を広げても2段のまま拡大するだけである。今度はこの2段組みのボックスを、3段組み→6段組みへと可変していかなければならない。その前に問題が1点。お気づきの方もいるかもしれないが、あるブラウザ幅にしたときに下の画像のようにボックスが一つ抜けている状態になっている。
　

カラムの幅を揃える
　
そもそも文章量は、それぞれのボックスによって異なってくる。そしてボックスを可変にすることにより、「p要素」の文章もウインドウ幅によって可変になるため、特定のブラウザ幅では文末の文字が送り込まれ、ボックスの高さに違いが出てくるためである。当然、ボックスの高さを揃えてあげる必要がある。それも含めて次回に説明していく。
　

▼　▼　▼

　
次回は複数のボックスの高さの最大値を揃える方法と、「メディアクエリ」でボックスを2段組み→3段組み→6段組みにしていく。
　

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

トリアイナ
新着記事

連載

ランキング

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