【無料で読める】ピンポイントCSS講座1 画像が自動リサイズ(拡大/縮小)されるスタイルシートの書き方4選 (にししふぁくとりー叢書)

本書では、ウェブ閲覧者の環境(＝端末の画面サイズやブラウザのウインドウサイズ)に合わせて、画像サイズが自動的にリサイズ(拡大/縮小)されるようにするHTML＋CSSの書き方について、下記に示す便利な4通りの方法を画面イメージとサンプルソース付きで詳しく解説しています。レスポンシブWebデザインを採用してウェブページを製作している場合に特に便利な書き方です。詳しい内容は、下記の目次をご覧下さい。

(1) 画像の縦横比を維持したまま単純にリサイズ(拡大/縮小)するCSSの書き方
　→《最も単純なリサイズ方法》
(2) 画像を画面幅に合わせて自動リサイズするCSS＋原寸より大きくはしないCSSの書き方
　→《閲覧環境に適した自動サイズ調整方法》
(3) 背景画像を描画領域の面積ぴったりに自動で合わせるCSSの書き方６種類
　→《背景画像を望み通りのサイズと配置で見せる方法》
(4) 画像は原寸のままで、描画領域に合わせて横スクロール(スワイプ)可能にするCSSの書き方
　→《画像を含むボックス側のサイズを自動調節する方法》

どれも、とても短いHTML＋CSSソースで作成でき、JavaScriptなどのスクリプトは一切不要です。シンプルで簡単なので、ソースをほぼそのまま転記することでもご活用頂けるでしょう。表示例の画面イメージと共に詳しく解説していますから、応用も簡単です。

===【本書の目次】===
▼序章：画像の自動リサイズ方法４種類の概要
・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

目次を参考にして必要な箇所だけをお読み頂く用途にも使えますが、まずは全体をざっと通してお読み頂くと「どのような画像のリサイズ方法があって、自分の望み通りのリサイズを実現するにはどの方法を使えば良いのか」が選びやすくなるでしょう。ぜひ、全体を通してお読みになることをおすすめ致します。

※本書は、B6サイズ換算だと99ページの分量があります（リフロー型なので閲覧端末によって総ページ数は異なります）。表示例を掲載したブラウザの画面イメージを多く使って解説していますので、ざっと斜め読みするだけでも目的のリサイズ方法を探しやすいでしょう。

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

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

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