COMMEND

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

Vol.7 フルードイメージを体感する

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

前回では、レスポンシブWebデザインの基本構造を学んだ。今回は「フルードイメージ」を実際に体感する。
　
●フルードイメージ

ブラウザのウィンドウ幅に合わせて、画像のサイズを拡大・縮小する手法。CSSのみで実装。

　
Vol.6では実際に自分で基本構造を構築してもらった。
【レスポンシブWebデザインの基本構造】
引き続き、そのコードに手を加えていこう。まずは、スタイルシートの作成から。前回の基本構造のHTMLには、「style.css」を読み込む記述があったが、style.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;
}
/*==========================================
 ヘッダーのスタイル
===========================================*/
header {
  text-align:center;
  margin:0 auto;
}
header img {
  width:100%;
  height:auto;
}

　
このコード黒枠内の右上「ソースを表示」をクリックしてコピー。テキストエディタを開き、張り込んで、「style.css」と名前をつけ保存。それを前回作成した「sample」フォルダ内の「css」フォルダの中に入れる。
　
ここで説明しておく箇所は1点だけ。「width: 100%;」の説明である。body要素に「width: 100%;」を指定せずに例えば、「width: 1024px;」と指定していたとすると、その子要素を相対値に変更してもページの幅は固定されたままになるのだ。まず、body要素に「width: 100%;」と記述すること。
　
bodyにはその他、背景と文字の色を指定。フォントは〝TRIAINA流最強フォント指定〟であり、ヘルベチカなどを使用した一般的ではない指定となっているが、通常は…

body {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

上記あたりが多いのではないだろうか。
　
次に「header」部分のトップ画像を作成していく手順を説明する。下の画像の中の一番大きなトップ画像にあたる部分である。
　
レスポンシブwebデザイン
　
まず「header」全体を中央揃えにする記述をする。基本的には「margin:0 auto;」だけでいいのだが、IE6以下を考慮して、「text-align:center;」を追加。注意してほしいのは、header内の子要素のテキストもセンター揃えになってしまうということ。左揃えに直したい場合は、子要素に対して「text-align:left;」を指定してあげればいい。
　
そして、「フルードイメージ」の最も重要である記述を「width:100%;」と「height:auto;」を書き込んでほしい。これで画像の縦横比を保持したまま、画面内に配置することができる。次に、トップ画像を下記からダウンロード。
　
【→topimage.jpg（zip）】
　
「sample」フォルダ内に「images」と名前をつけたフォルダを作成して、先ほどダウンロードして、解凍した画像を「images」フォルダ内に放り込む。続いて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>

<!--[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> 
		<img src="images/topimage.jpg" alt="俺のブログ">
	</header>

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

非常に単純なコードである。<div id="wrap"> で内包された部分が今回追加された部分。<header>内には先ほどの画像のパスを指定してあげるだけである。では実際にどのように見えるのか体感していただこう。PCでブラウザの横幅を色々と変えてみてほしい。
　
【フルードイメージ】
　
ブラウザの横幅にぴったりとフィットしているのがお分かりだろう。これが「フルードイメージ」である。何も難しいことはない。
　
現段階ではブラウザ幅いっぱいに表示されているが、今度はPC用の固定レイアウト用の記述をCSSに追加する。現在、作成中のサイトのPC向け固定レイアウトでは、トップ画像の横幅960pxとなるように指定する。
　
「style.css」

header img {
  width:100%;
  height:auto;
  max-width:960px;
}

「max-width」で幅の最大値を決めてあげるだけである。ではPCで見てみよう。
　
【フルードイメージ】
　
961px以上では幅が固定され、960px以下にブラウザの幅を縮めると、画像が小さくなっていく。これが「フルードイメージ」である。非常にシンプルなコードで実装できるものだということを覚えておいてほしい。今回は以上！
　