フレキシブル・イメージ＆メディア
レイアウトの幅をパーセントなどの相対値にして可変にすると、テキストは自動で流れ込みますが、画像やビデオのようなメディアは、サイズを指定していると幅が狭くても広くても固定された同じサイズでの表示が保持されます。そこで必要になるのがイメージやメディアを可変で表示させるフレシキブル・イメージという手法です。ここでは、フレシキブル・イメージの手法とレスポンシブWebデザインにおける画像の取り扱いの問題について見ていきます。 １．フレシキブル・イメージ＆メディアとはウェブページに画像を設置する際、<img>タグに幅と高さを指定してalt属性に画像の説明を入れるのが制作の基本でした。しかし、レスポンシブWebデザインで幅が可変するレイアウトに画像を設置する場合、画像サイズを固定してしまうと柔軟にレイアウトすることができません。そこで編み出されたのが、「フレシキブル・イメージ＆メディア」の手法です。ちょっとしたテクニックではありますが以下のようにHTMLとCSSを記述します。これにより親要素が画像サイズより大きい場合は、画像の最大サイズで、親要素が画像サイズより小さい場合は、画像は親要素の幅100％で表示されます。これで親要素が可変する場合でも、画像は親要素の幅に柔軟にフィットします。
フレキシブル・イメージのHTML記述例
01 <div id=”main”>
02 <!– widthとheightは指定しない –>
03 <img src=”cat.jpg” alt=”猫の写真” />
04 </div>
フレキシブル・イメージのCSS指定
01 #main {
02 width: 50%;
03 }
04
05 img {
06 widht: 100%;
07 max-width: 100%;
08 }
画像サイズが親要素のより小さい場合の表示
画像サイズが親要素のより大きい場合の表示