このページの本文へ

DESIGN ゼロから始めるレスポンシブWebデザイン入門 ― 第4回

フルードイメージの導入とタイポグラフィの設定

2012年06月26日 11時00分更新

菊池 崇/Web Directions East

  • この記事をはてなブックマークに追加
本文印刷
responsive

この連載が本になりました!

本連載で紹介したレスポンシブWebデザインの基礎に加えて、画像や動画のレスポンシブ対応、パフォーマンス改善といった商用サイト構築のノウハウを大幅に加筆。さらに、解像度に依存しないレスポンシブWebデザインの考え方やスマートテレビ対応などの応用テクも盛り込みました。

レスポンシブWebデザイン
マルチデバイス時代のコンセプトとテクニック

定価:2,625円 (本体2,500円)/形態:B5変 (232ページ)
ISBN:978-4-04-886323-0

 第3回ではHTMLを用意し、ブラウザーのCSSをリセットしました。今回は、レスポンシブWebデザインに必要な技術的な要素を追加して、基本的なレイアウトを整えていきます。

「フルードイメージ」による画像の伸縮

 第3回で作成したサンプルを幅320pxにしたブラウザーで表示すると、画像が横にはみ出てスクロールバーが現れます。用意した枝豆の画像がブラウザーのウィンドウサイズ(幅320px)よりも大きいためです。

2-3-zu01.png
画像が横にはみ出して表示されている

 従来のWebサイト制作であれば、スマートフォン用、デスクトップ用といった具合にサイズの異なる画像を用意しますが、ウィンドウ幅に応じてレイアウトをフレキシブルに調整するレスポンシブWebデザインでは、画像のサイズもCSSによって動的に調整します。

 画像をブラウザーの内側に収めるための技術が「フルードイメージ(Fluid Image)」です。フルードイメージは、ブラウザーのウィンドウ幅にあわせて画像のサイズをフィットさせる手法です。ウィンドウサイズより大きい画像でも、ウィンドウサイズ(または親要素の幅)に応じて、縦横比を保持したまま自動的に画像が拡大・縮小します。

 具体的には、img要素に対して以下のようなスタイルを適用します。

サンプル1[CSS:style.css]


img{ max-width : 100%}

 フルードイメージを指定してブラウザーをリロードすると、画像はブラウザーウィンドウ(320px)の内側に配置され、図のように横スクロールバーが表示されなくなります)。

2-3-zu02.png
フルードイメージを指定すると画像が縮小され横スクロールバーが出現しなくなった

 また、ウィンドウの横幅を広げると、図のように画像本来の大きさまで伸長します。

2-3-zu03.png
ブラウザーの横幅を広げても画像はフィットして表示される

【ワンポイント】フルードイメージの対応ブラウザー

フルードイメージを実現するmax-widthプロパティは主要なブラウザーがサポートしていますが、Internet Explorer 6〜7では利用できません。

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング