AboutデジタルIT・インターネットホームページ作成Colorboxの使い方:jQueryで簡単モーダルウインドウホームページ作成Colorboxの使い方:jQueryで簡単モーダルウインドウjQueryでモーダルウインドウUIを簡単に作れるColorboxの使い方を解説。ウェブページ全面を暗転し、中央に重ねたボックスをモーダルウインドウ風に見せるUIは、Lightbox系jQueryプラグイン「Colorbox」を使えば、ほんの3行程度のJavaScriptを書くだけで作れます。モーダルウインドウ内には、装飾された文章でも画像でも「別HTMLの中身」でも何でも表示できて便利です。文宏ホームページ作成ガイドモーダルウインドウとはモーダルウインドウとは、何らかの操作をするまで元の画面には戻さないサブウインドウのことです。モーダルウインドウが表示されている間は元の画面にあるUI(ユーザ・インターフェイス)を操作できないので、絶対に何らかの反応(選択や回答など)をしてもらいたい場合や、読み飛ばされると困る情報を表示する際などに使われます。Windowsでソフトウェアをインストールする際には、画面全体が暗転して中央に「このコンピュータへの変更を許可しますか?」という質問が出てくることがあります。これもモーダルウインドウです。ユーザは何らかの操作をしてこのウインドウを消さない限り、元の画面には戻れません。このように、ユーザの反応を確実に得たい場面で使われます。Windowsが表示する「このアプリがデバイスに変更を加えることを許可しますか?」の質問も、モーダルウインドウとして表示されているユーザに回答や選択を促すサブウインドウのことを「ダイアログボックス」と呼びますので、上図のような質問ウインドウは特に「モーダルダイアログ」とも呼ばれます。ウェブ上で使われるモーダルウインドウのような表示例モーダルウインドウのような表示形態はウェブ上でもよく見かけます。JavaScriptで簡単に表示できるアラートボックスもモーダルウインドウの一種ですが、特に「現在のウェブページ上に重ねて表示されたボックスを消すまで、他の操作をできなくする」というUIのこともモーダルウインドウと呼ばれています。サブウインドウのように見える装飾を使って実現しているのであって、本当に独立したウインドウを出すわけではありません。以下のような使用例があります。■ウェブ上でのモーダルウインドウの例1:Twitterでのツイートやプロフィールの表示Twitterで特定のツイートをクリックすると、下図のようにページ全体が暗転されて、そのツイートの詳細がモーダルウインドウのような形で表示されます。別のページには移動しないため、閉じるボタンを押すか暗転部分を押すだけで素早く元の画面に戻れて便利です。Twitterでユーザ名をクリックすると、プロフィールページがモーダルウインドウのように表示される■ウェブ上でのモーダルウインドウの例2:Lightbox系スクリプトによる拡大画像枠その場で拡大画像を重ねて表示できるLightbox系スクリプトは、多数のウェブサイトで使われています。その場で拡大画像を表示する4つの方法」でも解説しました。このLightboxでも、拡大画像の表示時にはページ全体が暗転して、サブウインドウのように見えるボックスが中央に重なって表示されますから、モーダルウインドウ風のUIだと言えます。その場で拡大画像を表示するLightbox系スクリプトも、モーダルウインドウのように見える小窓を生成するウェブページでモーダルウインドウのような表示形態を使うメリットモーダルウインドウのような表示形態がウェブ上でよく使われるのは、ブラウザの別ウインドウを強制的に表示したり、別タブを強制的に開いたりすることと比較すると、分かりやすくて操作に手間がかからない(元の画面に戻りやすい)メリットがあるからでしょう。■暗転した画面の背後に元のページが見えているので分かりやすい画面全体が暗転するものの、元のページは背後にうっすら見えているため「別のページに移動したわけではない」ことが明確です。このような表示形態なら、モーダルウインドウに表示されている内容と、元の画面との関連が分かりやすいでしょう。■すぐに元の画面に戻れるため操作が簡単モーダルウインドウ部分に表示されている「閉じる」ボタンをクリックするか、モーダルウインドウの外側に見えている暗転部分をクリックすればすぐに元の画面に戻れます。ページの移動が必要ないため、操作に手間がかかりません。待ち時間もなく素早く戻れて便利です。ウェブ上でのモーダルウインドウ風UIの活用例ページを移動させることなく、モーダルウインドウのような形態で別のコンテンツを重ねて表示する方法は、例えば以下のような場合などに活用できます。長めの注意事項を表示したい→常に表示するとクドいので、普段は隠しておきたい。通販の送料一覧表を表示したい→複数のページから参照される補足情報は、独立ページに分離しておくと管理が容易。解説用の動画を表示したい→YouTubeなどの動画は表示に広い空間を占有するので、通常は非表示にしておきたい。これらの情報を見せるためだけに、わざわざ別のページに移動させる仕様だと閲覧者に手間をかけることになります。今見ているウェブページの上に重ねて表示できると便利でしょう。jQueryでモーダルウインドウを表示できるColorboxスクリプトが便利Lightboxでは主に画像だけを表示しますが、これと同様のUIを使って、装飾された文章などを含む任意のHTML要素で作られた複合的なボックスをモーダルウインドウとして表示したり、別のウェブページまるごとをモーダルウインドウとして表示したりできると便利です。そのようなモーダルウインドウ風UIをウェブページ上に作るには、自力でJavaScriptソースを書かなくても手軽に使えるスクリプトが多数公開されていますから、それらを活用するのがおすすめです。本記事では、jQueryを使って作られたColorboxスクリプトの使い方を解説いたします。上図は、Colorboxを使ってモーダルウインドウを表示した例です。背後でページ全体が暗転しており、手前に見える枠内に補足情報が表示されています。背景やモーダルウインドウのデザインが5種類から選べるLightboxのように画像を表示できるだけでなく、文章など任意の要素を表示できる同一HTML内に含まれる情報だけでなく、別HTMLの内容も表示できるスクリプト本体は十数KB程度と軽いので、読み込み待ち時間が少ないかなり古いブラウザでも動作する(IE7でも動作可能)など、機能も豊富で便利なスクリプトとしておすすめです。最初にセットアップする手間はかかりますが、1度セットアップしてしまえば後は簡単です。別HTMLの内容をモーダルウインドウに表示することもできるColorboxでは、現在のページを作っているHTMLではなく、別のHTML(別のウェブページ)の内容をそのままモーダルウインドウに表示することもできます。Aboutのトップページをモーダルウインドウに表示した例です。別のHTMLをそのままモーダルウインドウ内に表示できるため、モーダルウインドウの中身は普通のウェブページと同様に作れます。自由度の高い表示ができるでしょう。複数のページから参照させたい補足情報などは、独立したHTMLファイルで作っておいてこの方法で読み込めば、すべてのページに同じ情報を書いておく必要がなくなって管理が楽です。別HTMLではなく同一HTML内に存在する特定の要素だけをモーダルウインドウ内に表示することもできますから、表示内容を複数ファイルに分散させることなくコンパクトにまとめておくこともできます。HTMLを分離するか同一にするかは、用途や管理の都合に合わせて決めると良いでしょう。それでは次のページから、Colorboxスクリプトのセットアップ方法と使い方を解説いたします。About公式SNS日々の生活や仕事を楽しむための情報を毎日お届けします。