|
|
|---|
この連載が本になりました！
本連載で紹介したレスポンシブWebデザインの基礎に加えて、画像や動画のレスポンシブ対応、パフォーマンス改善といった商用サイト構築のノウハウを大幅に加筆。さらに、解像度に依存しないレスポンシブWebデザインの考え方やスマートテレビ対応などの応用テクも盛り込みました。
レスポンシブWebデザイン
マルチデバイス時代のコンセプトとテクニック
定価：2,625円 (本体2,500円)／形態：B5変 (232ページ)
ISBN：978-4-04-886323-0
第3回ではHTMLを用意し、ブラウザーのCSSをリセットしました。今回は、レスポンシブWebデザインに必要な技術的な要素を追加して、基本的なレイアウトを整えていきます。
「フルードイメージ」による画像の伸縮
第3回で作成したサンプルを幅320pxにしたブラウザーで表示すると、画像が横にはみ出てスクロールバーが現れます。用意した枝豆の画像がブラウザーのウィンドウサイズ（幅320px）よりも大きいためです。
画像が横にはみ出して表示されている
従来のWebサイト制作であれば、スマートフォン用、デスクトップ用といった具合にサイズの異なる画像を用意しますが、ウィンドウ幅に応じてレイアウトをフレキシブルに調整するレスポンシブWebデザインでは、画像のサイズもCSSによって動的に調整します。
画像をブラウザーの内側に収めるための技術が「フルードイメージ（Fluid Image）」です。フルードイメージは、ブラウザーのウィンドウ幅にあわせて画像のサイズをフィットさせる手法です。ウィンドウサイズより大きい画像でも、ウィンドウサイズ（または親要素の幅）に応じて、縦横比を保持したまま自動的に画像が拡大・縮小します。
具体的には、img要素に対して以下のようなスタイルを適用します。
■サンプル1[CSS:style.css]
img{ max-width : 100%}
フルードイメージを指定してブラウザーをリロードすると、画像はブラウザーウィンドウ（320px）の内側に配置され、図のように横スクロールバーが表示されなくなります）。
フルードイメージを指定すると画像が縮小され横スクロールバーが出現しなくなった
また、ウィンドウの横幅を広げると、図のように画像本来の大きさまで伸長します。
ブラウザーの横幅を広げても画像はフィットして表示される
【ワンポイント】フルードイメージの対応ブラウザー
フルードイメージを実現するmax-widthプロパティは主要なブラウザーがサポートしていますが、Internet Explorer 6〜7では利用できません。