画像の表示・活用 (HTML,CSS,JavaScript)

画像の表示サイズをブラウザのウインドウ幅や端末の画面幅に自動で合わせたい場合があります。CSSを使えば画面幅と画像サイズを合わせるのは簡単ですが「拡大されすぎ／縮小されすぎ」を防ぎたいこともあります。「画像をウインドウ幅に合わせて表示したいが、本来の大きさより拡大はしたくない」、「画像を画面幅に合わせて表示したいが、極端な拡大や縮小は避けたい」など、画像サイズの自動調整に上限や下限を設けるCSSを解説。

HTMLの背景に画像を全画面で表示させる方法を解説。ブラウザのウインドウサイズに関係なく、1枚の背景画像が縦横比を維持して必ず画面全体を覆うように表示できます。CSSのbackground関連プロパティを書くだけの簡単な方法で、フルスクリーンでの縦横中央配置ができます。画面サイズに応じて適切な解像度の画像に切り替えて読み込ませる記述方法も紹介。

ウェブ上に掲載したサムネイル画像をクリックしたときに、拡大画像を全画面で(ブラウザの描画領域全面に広げて)表示する方法をご紹介。ページ移動することなく拡大画像を全画面で表示できるスクリプト「Intense Images」の使い方を解説。スマートフォンでの操作にも対応。画面と画像との縦横比が異なる場合には、隠れた部分をマウスの動き(またはスワイプ操作)で見ることができる便利な仕様もあってお勧めです。

Retinaディスプレイなどの高精細な画面で閲覧された場合にだけ高解像度の画像を表示させたり、複数の掲載候補からディスプレイの面積に適したサイズの画像を自動選択して表示させる方法を解説。HTML5で追加されたsrcset属性を使うと、解像度の異なる複数の画像を表示候補として指定でき、表示環境に応じてブラウザ自身が適切な画像を選んで表示に使ってくれます。

CSSで指定した「1px」は、必ずしも液晶画面の「1ドット」とイコールではありません。スマートデバイスなどで使われる高精細ディスプレイでは、「太さ1px」の線が、液晶画面の2ドット以上の幅で表示されることもあります。CSS3には「1pxを何ドットで描画するか」を表すdppx(dots per 'px' unit)という単位もあります。ウェブページを高精細ディスプレイに対応させるための基礎を解説。

ボックスの背景画像は、実は「枠線(border)の真下」にも描かれています。ところが「描画開始位置」の仕様のため、半透明や点線の枠線を引くと、背景画像がずれているように見えることがあります。CSS3のプロパティ「background-clip」や「background-origin」を使えば、背景画像の表示範囲や開始位置を調節でき、ずれに対処できます。

CSSの「clipプロパティ」を使うと、画像をソフトウェアで加工したりすることなく、自由なサイズにトリミング(切り抜き)ができます。画像の周囲をカットしたり、画像の中の特定の箇所だけを見せたい場合に、画像を直接加工せずに済むので手軽です。切り抜き範囲を数値で指定するだけで、画像中の任意の部分を四角形に切り取って表示できます。

ダイナミックな効果で画像を次々に切り替えていく、とても目を引くスライドショーを作ってみましょう。jQueryで作られた「Skitter」スクリプトを使えば、カッコいい迫力ある効果を伴ったスライドショーが簡単に作れます。

画像の読み込みが完了するまでの間、画像が表示される予定の領域に「ローディング画像」を表示させて、読込中であることを示してみてはいかがでしょうか。スクリプトは不要で、数行のCSSを記述するだけで、簡単にローディング画像を掲載できます。

ウェブサイトのナビゲーションメニューを、「広い画面」では「メニューバー」の形に、「狭い画面」では「プルダウンメニュー」の形に自動で切り替える仕組みの作り方をご紹介。ul要素とli要素で作る「リスト」から「プルダウンメニュー」を自動生成してくれるスクリプト「tinynav.js」を活用すると、とても簡単です。