目次

• 序章：画像の自動リサイズ方法４種類の概要
  • 0-1. 画像の縦横比を維持したまま単純にリサイズ(拡大/縮小)するCSSの書き方
  • 0-2. 画像を画面幅に合わせて自動リサイズするCSS＋原寸より大きくはしないCSSの書き方
  • 0-3. 背景画像を描画領域の面積ぴったりに自動で合わせるCSSの書き方６種類
  • 0-4. 画像は原寸のままで、描画領域に合わせて横スクロール(スワイプ)可能にするCSSの書き方
• 第1章：画像の縦横比を維持したまま単純にリサイズ(拡大/縮小)するCSSの書き方
  • 1-1. 何もしなくても縦横比が維持されるケースの例
  • 1-2. リサイズすると縦横比が崩れるケースの例
  • 1-3. どんな場合にも縦横比を維持してリサイズできる簡単な書き方
• 第2章：画像を画面幅に合わせて自動リサイズするCSS＋原寸より大きくはしないCSSの書き方
  • 2-1. 画像サイズをウインドウ幅に合わせて自動で拡大縮小するCSS
  • 2-2. 画像サイズをウインドウ幅に合わせて自動縮小したいが、原寸より拡大したくない場合のCSS
  • 2-3. 画像を自動で拡大縮小したいが、最小サイズと最大サイズを指定したい場合のCSS
• 第3章：背景画像を描画領域の面積ぴったりに自動で合わせるCSSの書き方６種類
  • 3-1. ただ背景に画像を指定した場合の表示 (比較用)
  • 3-2. 背景画像が「描画領域全体を覆い尽くす」よう拡大・縮小させる書き方
  • 3-3(A). 描画領域内に「背景画像の全体が必ず見える」よう拡大・縮小させる書き方(※繰り返し)
  • 3-3(B). 描画領域内に「背景画像の全体が必ず見える」よう拡大・縮小させる書き方(※1枚だけ)
  • 3-4. 描画領域内に(横に)必ず４個だけ表示されるように拡大・縮小させる書き方
  • 3-5. 縦横比を崩してでも、１枚の画像が全面に表示されるように拡大・縮小させる書き方
  • 3-6. 縦横比を崩してでも、指定個数だけがぴったり表示されるように拡大・縮小させる書き方
  • 3-7. 背景画像の表示サイズを具体的に指定する書き方
• 第4章：画像は原寸のままで、描画領域に合わせて横スクロール(スワイプ)可能にするCSSの書き方
  • 4-1. 表示しきれない部分は、ボックス内部でスクロールして見えるようにする方法
  • 4-2. はみ出してしまう部分は非表示で構わない場合のCSS

画像の自動リサイズはCSSを使えば簡単！

スマートフォンやタブレットなどのモバイル端末から小型・大型PCまで、閲覧者の画面サイズが多様になった現在では、ウェブページでの画像サイズの自動調整は不可欠な仕様だと言えます。閲覧者の環境に合わせて画像を自動的にリサイズさせるためのCSSソースは、意外と短くて済みます。

本書で解説しているテクニックは、本当に短いソースで実現できる基本的なことばかりです。一度わかってしまえば、あとはカスタマイズなどの応用も簡単でしょう。その「一度わかる」ためには、それぞれのバリエーションに応じた書き方をざっと知っておく必要があります。本書は、それらの点を一括して解説しています。ぜひ、試してみて下さい。

※本書はリフロー型なのでどのような大きさの画面でもお読み頂けますが、HTMLソースやCSSソースと共にキャプション付きの画面イメージ(ブラウザの表示例)を多数含んでいるため、できるだけ広い画面でお読みになる方が、より読みやすく分かりやすいでしょう。タブレット以上の大きさの画面でお読みになることを推奨しています。