COMMEND

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

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

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

前回の続きで、複数のボックスの高さの最大値を揃える方法を説明していく。複数のボックスを段組みにして配置する際に、問題になってくるのがボックスの高さの違い。特にレスポンシブWebデザインでは「p要素」の文字が可変となる場合があるので、対策を施してやらねばならない。下画像を見てもらえば分かりやすいと思うが、例えば、「Article2」の「p要素」の文章が極端に短かったとしよう。当然、文字の分だけ「Article1」のボックスと違いが出てきて、ボックスが一つ抜けている状態になる。
　
マルチカラムの高さ
　
これを解決していくために、TRIAINAでは「jQuery」を使用していく。
　
【jquery.heightLine.js】
　
上記のリンク先からソースをコピーして、テキストエディタを開き保存。「jquery.heightLine.js」と名前をつけ、「sample」フォルダ内の「js」フォルダの中に入れる。次に「jQuery」本体と、さきほどの「jquery.heightLine.js」をHTMLの「head」内に読み込む。

<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/jquery.heightLine.js">
</script>

続いて、高さを揃えたい要素をセレクタで指定して実行する。

<script type="text/javascript">
$(window).on("load",function(){
    $(".news").heightLine();
});
</script>

もちろんセレクタ指定するのは、ボックスのスタイルである「.news」。

#main .news {
  width: 50%;
  float: left;
  margin-bottom: 20px;
}

　
今回追加するコードを含めたHTMLは下記。ハイライト部分が追加する内容だ。ソース黒枠をマウスオーバーして右上の「ソースを表示」からコピーして、前回までのHTMLに加えていただきたい。
　
「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>

<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/jquery.heightLine.js">
</script>
<script type="text/javascript">
$(window).on("load",function(){
    $(".news").heightLine();
});
</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>
		<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>

　
それでは実際に見ていただこう。分かりやすいように「Article2」と「Article3」の文章だけ短くしてある。PCでブラウザ幅を伸縮させて見てもらいたい。
　
【ブロックレベル要素の高さを揃える】
　
マルチカラムの高さ
　
ブラウザを狭くすると、画像のようにそれぞれのカラムの高さが揃っているのが分かるだろう。もちろん、タブレット向けスタイルとPC用固定スタイルの「メディアクエリ」指定内には、まだ記述していないので、どのブラウザ幅でも2段のままである。次回は「メディアクエリ」を使い、この2段組みのボックスを、3段組み→6段組みへと可変していく。
　