この写真の記事へ

画像を自動リサイズする際に拡大縮小しすぎを防ぐCSS(画像)(16ページ目)

西村 文宏

西村 文宏

ホームページ作成 ガイド

初心者向けの「わかりやすさ」を重視した解説に定評があるウェブ系テクニカルライター。ウェブの黎明期に趣味で始めた個人サイト製作からその「楽しさ」に魅了され、作成方法に関する様々な情報を発信。企業や団体のウェブサイト製作・解説書籍の執筆なども行っている。

...続きを読む

画像サイズは原寸のままだが(拡大も縮小もしない)、見える範囲は画面幅によって自動調整される

画面幅に合わせて画像も変化
過剰に縮小されると困ることも
画像の最大幅・最小幅を限定する
サンプルページで使っている画像
際限なく拡大・縮小される
原寸サイズより拡大はしない範囲で、画面幅に合わせて自動調整
画面幅に合わせて自動調整されるが、上限サイズと下限サイズがある
表示可能な範囲だけを表示
画面幅に入るだけ繰り返す
基本は原寸で表示するものの、描画領域が狭ければ自動縮小する
閲覧者の画面サイズに合わせて、画像サイズも自動変化させられる
画像内に文字を描き込んでいる場合、小さくなりすぎると読めなくなって困ることもある
画面(ブラウザのウインドウ)幅が広ければ広いだけどこまでも自動拡大されるし、狭ければ狭いだけ自動縮小される
画像の原寸サイズより拡大はしない範囲で、画面幅に合わせて画像サイズが自動調整(=自動縮小)される
画面幅に合わせて画像サイズは自動的に拡大または縮小されるが、上限サイズと下限サイズがある
画像サイズは原寸のままだが(拡大も縮小もしない)、見える範囲は画面幅によって自動調整される
画像サイズ自動調整の例:基本は原寸で表示するものの、描画領域が狭ければ自動縮小する
画像の原寸サイズより縮小はしない範囲で、画面幅に合わせて画像サイズが自動調整(=自動拡大)される
拡大画像を全画面で表示できるスクリプトの例

ほかのギャラリーを見る

ハートマークも文字として定義されているので、色やサイズはCSSで自由に装飾できる (Edgeでの表示例)
EdgeではWebkit用の記述も有効になっている例
一度無効化されたボタンでも、再度有効な状態に戻せるようにする
よく使われるサンプル用ドメイン名のスペルミスを狙った危険なウェブサイトもある
アクセスするたびに異なる画像が表示される
ページ移動や別ウインドウを表示することなく、任意のメッセージや別ページの内容を表示できる

カテゴリー一覧

All Aboutサービス・メディア

All About公式SNS
日々の生活や仕事を楽しむための情報を毎日お届けします。
公式SNS一覧
© All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます