ライトボックスとは?│Web用語集

ライトボックス(Lightbox)というと、写真のフィルムやアニメのセル画をチェックする道具を思い浮かべる人もいるかもしれませんが、WebにおいてはJavaScriptを使用した画像表示機能のことを指します。

ライトボックスはサムネイル画像をクリックさせて、拡大画像を表示させたいときによく使用されます。
サムネイル画像をクリックしたときに別の画面に遷移したり、ポップアップウィンドウを立ち上げたりせず、黒色半透明の背景が画面を覆った上に拡大画像を表示させる。
この表現のことをライトボックスというのです。

Googleのイメージ検索で「ライトボックス」と検索すると、冒頭で述べた道具の画像ばかりが出てきますが、「lightbox web」などというワードで検索すればWebにおけるライトボックスのスクリーンショットがたくさん表示されます。

ライトボックスについてもっと知りたい方は下記をご覧ください。

目次

他のサイトでの説明
ライトボックスの種類
復習クイズ

●他のサイトでの説明

解説文中に出てくる用語にも説明ページのリンクが入っていてわかりやすいです。
https://www.weblio.jp/content/Lightbox

Wikipediaにも項目があります。
https://ja.wikipedia.org/wiki/Lightbox

 

●ライトボックスの種類

ライトボックスには画像にエフェクトをかけたり、スライドをつけたり、いろいろなアレンジを加えたものがあり、プラグイン(簡易的なプログラム)としてたくさん公開されています。

以下のページではライトボックスのさまざまな表現がまとめられているので、よろしければ参考にご覧ください。

http://kachibito.net/web-design/10-lightbox-jquery-plugins.html
(個人的に気に入ってる10のLightbox系jQueryプラグイン及び、その特徴まとめ)
ひとつひとつに解説が入っていてわかりやすいです。

http://tetra-themes.com/javascript-lightbox-341/
(Javascriptで作られたLightboxプラグインまとめ 17選)
解説はありませんが、画像が綺麗で大きいのでイメージが湧きやすいです。

Webページを制作する際、このように公開されているプラグインであれば、基本的にはそのまま取り入れることができます。

 

●復習クイズ

説明がわかりづらい、間違っているなど御指摘ありましたらお問い合わせよりご連絡いただけると幸いです。