フルードイメージの指定方法
前回は、フルードグリッドの指定方法につきまして、サンプルコードを交え記載いたしました。
レスポンシブウェブデザインの作製にパーセント指定、大事ですね。メディアクエリ・ビューポート・フルードグリッドこれでレスポンシブウェブデザインは、ほぼ完成と行きたい所ですが、ページ内の画像も画面サイズに合わせて拡大・縮小させる必要がございます。
この画像を拡大・縮小させる方法をフルードイメージ：Fluid Imageといいます。フルードイメージとフルードグリッドを組み合わせると、画像を含むすべての要素を画面サイズに合わせて調整することができます。
という事で、それでは今回はッ、
・フルードイメージの指定方法
上記について記載していこうと思います…。
フルードイメージの基本
ページ内に配置されている画像に対して、CSSでフルードイメージの指定をおこなうと、画像の縦横比を保持したまま、画像を画面内に配置することができます。
フルードイメージの指定方法は画像の配置方法によって異なります。また、画像以外のメディアに対して指定することも可能になっています。
max-width: 100%;
height: auto;
}
background-size: cover;
}
max-width: 100%;
}
フルードイメージの指定方法
簡単なサンプルページを記載して、フルードイメージの動作を確認してみます。
<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width”
<link rel=”stylesheet” href=”css/sample.css”>
<title>sample</title>
</head>
<body>
<div id=”wrapper”>
<header id=”header”>
<h1>Fluid Image</h1>
</header>
<article class=”main”>
<section id=”body_link”>
<figure>
<figure><img src=”img/test1.jpg”></figure>
<figure><img src=”img/test2.jpg”></figure>
<figure><img src=”img/test3.jpg”></figure>
</figure>
</section>
</article>
</div>
<footer id=”footer”>
<small>© MK- Design</small>
</footer>
</div>
</body>
</html>
続いてCSSサンプルを記載します。ここでは上記のimg要素に対してフルードイメージの指定を記載します。
/* clearfix */
.cf { zoom: 1; }
.cf:before, .cf:after { content: “”; display: table; }
.cf:after { clear: both; }
body {
width: 100%;
margin: 0;
padding: 0;
background-color: #fff;
}
/* wrapper */
#wrapper {
margin: 0;
}
/* header */
header {
text-align: center;
color:#fff;
background-color: #4c5482;
}
header h1 {
font-size: 2.3em;
padding: 0.4em 0 0.4em 0;
margin: 0 0 0.2em; /* 上に 0、左右 0、下に 0.2em の余白 */
}
footer {
width: 100%;
text-align: center;
}
/* Flexible Image */
img {
max-width: 100%;
height:auto;
}
これでフルードイメージの指定は完了です。表示領域の幅に応じて画像が自動的に拡大・縮小します。
今回はシンプルなHTMLですが、実際の制作現場ではimg要素の親要素が、もう少し複雑に存在することが多々ございます。今回はbody要素width:100%の内側でimg要素がwidth:100%となっていますが、figure要素が横2列（50%）だったりする場合などになります。
ここまで、レスポンシブウェブデザインの基本につきまして5回にわたり記載いたしました。レスポンシブウェブデザインの基本しか記載していませんが、具体的にどのようにしてマルチデバイスに対応するか、おおよそ全体像は理解できたことと思います。
より具体的なデザイン方法につきましては、また別記事に記載したいと思いますが、ここでひとつだけレスポンシブウェブデザインの作成方法のコツを記載いたしますと、ページ作成だけではなく、JavaScriptやVBAなども同じことが言えますが、複雑になればなるほど、パーツごとに細分化してから作成する！これが最も重要なことと思います。
とりあえず、今回はここまで…。
お仕事のご依頼は↓コチラより…、それではまた次回…。
- 投稿タグ
- css, レスポンシブウェブデザイン, フルードイメージ, Fluid Image
