にしし ふぁくとりー:西村文宏 個人サイト

電子書籍「画像が自動リサイズ(拡大/縮小)されるスタイルシートの書き方4選」

2018/10/03 出版

■Web製作系実用書

2018年10月3日(水)に、Kindle電子書籍として発売された電子書籍です。
西村文宏(にしし)の著書としては6冊目で、出版社を介さない自己製作の電子書籍としては1冊目です。

ピンポイントCSS講座1

「画像が自動リサイズ(拡大/縮小)されるスタイルシートの書き方4選」

画像が自動リサイズ(拡大/縮小)されるスタイルシートの書き方4選:西村文宏(著)
書籍情報(電子書籍)
著者西村 文宏
形態電子書籍
対応端末Kindle、Kindleアプリ
販売形態Kindle Unlimited対応
発売日2018年10月3日
ASINB07HYZK5N8
サイズ約9.7MB

※この本は、試しに電子書籍を作ってみようと考えて、ブログ記事をベースに発展させた実験的な電子書籍です。 当サイトで当該JavaScript TIPSブログ記事をお読みの場合、必ずしも本書の解説が必要とは限りません。(^_^;) そういう感じが前提の頒布価格になっております。

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

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

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

Kindle Unlimited対応なので、Unlimitedな方々は購入することなくKindleアプリ等でお読み頂けます。

本書の内容

目次

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

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

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

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

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

※この電子書籍は、Kindle端末またはKindleアプリでのみお読み頂けます。Kindle端末がなくても、iOS用やAndroid用のKindleアプリを使ってお読み頂けます。

※紙版の出版はされておりません。

※お読み頂く際の画面サイズは「タブレット以上」をお勧めしています。それより小さいと、図表が縮小されすぎて読みにくいためです。

Last modified: 2022/01/18.

--- 当サイト内を検索 ---