1. その場で画像を拡大表示

小さな画像を並べて掲載しておいて、任意の画像がクリックされたときに、その都度拡大したい……という場面が多々あります。拡大画像を表示するためにわざわざページを移動したり別ウインドウを出したりすると煩わしくなってしまいます。移動も別窓もなく、その場で拡大画像を表示させる方法をぜひ押さえておきましょう。

別窓を開かずに、その場で拡大画像を表示する方法

サムネイル画像のクリックで拡大画像を表示するページを作る際、ポップアップウインドウを出したり拡大画像用ページへ移動させたりするのでは操作が面倒です。JavaScriptで作られた「Lightbox Plus」を使って、その場で拡大画像を表示させる方法をご紹介。

出典: 別窓を開かずに、その場で拡大画像を表示する方法 [ホームページ作成] All About

2. 画像サイズをウインドウ幅に合わせて自動調整

ウェブページが表示されるウインドウ幅は閲覧者によって様々です。どんな環境で閲覧されても、画面サイズにぴったり合致したサイズで画像を掲載できる方法も、しっかり押さえておきましょう。

ウインドウ幅に合わせて画像サイズを変化させる方法

CSSだけを使って、表示領域の横幅に合わせて画像サイズを(縦横比を維持したまま)変化させる方法を解説。レスポンシブ・ウェブデザインを採用したページや、「描画領域の横幅全体に画像を広げて掲載したい」場合に活用できます。

出典: ウインドウ幅に合わせて画像サイズを変化させる方法 [ホームページ作成] All About

3. 画像にキャプションを付けた状態で並べて配置

たくさんの画像を並べる場合は、画像1つ1つに「キャプション(タイトルや説明文など)」を付けたいこともあります。画像とキャプションをセットにして縦横に綺麗に並べる方法も、知っておくと便利です。

キャプション付き画像を横向きに並べて配置する方法

アルバムのように、キャプション(タイトル名)を加えた画像を横方向にたくさん並べてみましょう。横に並ぶ数を指定せず、ウインドウサイズに応じて自動的に配置される「リキッドレイアウト」で実現する方法をご紹介。

出典: キャプション付き画像を横向きに並べて配置する方法 [ホームページ作成] All About

画像にマウスを載せた際に、半透明の説明を重ねる方法

画像の上にマウスを載せたときにだけ、半透明の説明文(キャプション)が、アニメーション効果と共に下方からスライドして表示される、という表示効果の作り方をご紹介。jQueryを使って簡単に作れます。写真をたくさん並べて掲載するようなページで、デザイン面でちょっと凝ったことをしてみたい場合にお勧めです。

出典: 画像にマウスを載せた際に、半透明の説明を重ねる方法 [ホームページ作成] All About

4. 画像が見える位置までスクロールされてから読み込む

1ページ内にたくさんの画像を掲載している場合は、読み込みに時間がかかってしまいます。「今見えている画像」だけを優先して読み込んでおき、「見えていない位置にある画像」は後から読み込む方法を使うと、余計な通信量を減らせ、待ち時間も短く見せることができて便利です。

閲覧者がスクロールするまで画像の読み込みを待つ方法

掲載画像の多いページでは、「ページの下の方にある画像」を読み込む処理のために、「今見えている部分」の読み込みが遅れてしまうことがあります。それを防ぐために、1画面目以降の(すぐには見えない位置にある)画像に関しては、閲覧者がスクロールするまで画像を読み込まないようにする方法をご紹介。

出典: 閲覧者がスクロールするまで画像の読み込みを待つ方法 [ホームページ作成] All About

5. 画像をランダムに表示

見せたい画像が多いものの、すべてを掲載している空間はない……という場合は、複数の画像の中から1つを抜き出してランダムに表示させる方法を使ってみてはいかがでしょうか。

ランダムに画像を表示したい

JavaScriptを使って、ページが表示されるたびに画像リストの中からランダムに1つの画像が表示されるようにしてみましょう。ソースは簡単ですし、HTML内でコピー&ペーストで使用可能です。

出典: ランダムに画像を表示したい [ホームページ作成] All About