JavaScript + jQueryで作るLightbox

コンテンツ枠部分の画面中央表示

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Lightboxのコンテンツ枠部分を、ブラウザの中心に表示させる方法について解説致します。
講師:
07:56

字幕

このレッスンでは Lightbox を実装するにあたりJavaScript と jQuery を利用してLightbox のコンテンツ部分をブラウザの上下中央に表示させる方法について解説いたします。まずはダウンロードしてきたこちらの「 content_centering 」というフォルダーの中にあるこれら3つのファイルをエディタで開いてください。そしてこれがそれらのファイルを開いた状態です。これらのファイルを使って今回のレッスンの解説を進めていきたいと思います。それでは早速レッスンを始めていきましょう。それではまず今回のレッスンの目標を確認します。一度この状態で「 index.html 」をブラウザで開いて内容を確認してみます。こちらのファイルをブラウザで開くとこのように表示されますね。そしてこちらの「 Lightbox を表示する」ボタンをクリックします。するとこのように表示されてきます。今回のレッスンではこちらの白いコンテンツ枠部分、この部分をブラウザのこのあたり中心にですね、表示させる方法についてプログラムを書いていきたいと思います。それではエディットに戻ります。それではまず「 stylesheet.css 」を開きます。 そしてこちらの部分からこちらの div#lb_content p の要素に対して不要なマージン要素を取り除いておきましょう。この padding の下にmargin と書いてここに 0px と打っておきます。これでこの p タグの上下左右に表示される無駄なマージンの幅を消すことができました。それではこの状態で「 stylesheet.css 」を保存します。そして次に「 javascript.js 」を開きます。この JavaScript のファイルの中で具体的にコンテンツ枠部分をブラウザの上下中央に設置する方法についてプログラムを書いていきます。それでは早速やっていきましょう。プログラムを書く部分はこちらの Lightbox のフェードインの処理を書いている上の部分になります。何行か改行を空けてこちらの部分に書いていきます。それではまずブラウザの高さですねこれを取得していきます。このように書いていきます。まずは変数 var と書いてここに変数の名前を書きます。今回は browser_heightと名前を付けておきましょう。そして =この後にwindow.inner 大文字 H の Heightそして ; と書きます。 こうすることによってブラウザの表示領域の高さの値がこの変数 browser_height に格納されました。それでは次に先ほどの白いコンテンツ枠部分の高さを取得します。このように書いていきます。同じく変数を作ります。var そして変数の名前をcontent_height としておきます。そして =そしてこの後に $()そしてこの中にはコンテンツの div 要素を指定します。div#lb_content と書きます。そしてこの () の後ろに「 . 」そして height(); と書きます。こうすることでこの変数 content_height に先ほどの白いコンテンツ枠部分の高さの値が格納されました。これらの値を使ってコンテンツ枠部分をブラウザの上下中央に設置します。設置するにはこのように書いていきます。まずは $() そしてこの ()の中に コンテンツ枠を指定します。div そして #lb_content でしたね。そして . と書いて css と書きます。そして ()そしてこの () の中には{}と書いて最後の () の後ろに ; を打ちます。このように書くことでこの lb_contentという id を持つ div に対してCSS を設定するという意味合いになります。 そしてこの{}の中にその CSS の値を 指定します。それではその CSS 部分を書いてみたいと思います。改行空けてこの部分にまずは指定したい CSS のプロパティを書きます。ここでは top とします。そして「 : 」そしてこのあとに上下中央に設定する計算式を書きます。具体的にはまず () のこの中に変数をbrowser_heightこれを書きます。そして「 - 」変数 content_height と書きます。そしてこの () の後ろに/ と書いて 2 書きます。この計算式でコンテンツ枠をブラウザの上下中央に設定する値が算出されます。その値を CSS のプロパティtop に指定してあげることでこのコンテンツ枠を上下中央に表示させることが可能になります。それではこの状態で「 javascript.js 」を保存します。そしてこの「 index.html 」をブラウザで開いて実際に上下中央になっているかどうか確認してみましょう。こちらの「 index.html 」をブラウザで開きます。そしてこちらのボタンをクリックするとこのように表示されてきましたね。このブラウザの上下中央にこのコンテンツの枠が表示されているのが分かりますね。 そしてこの Lightbox の背景部分をクリックすると非表示にすることができます。それではエディットに戻ります。以上でレッスンは終了です。今回は JavaScript と jQuery を使ってLightbox のコンテンツ枠部分をブラウザの上下中央に表示させる方法について解説いたしました。今回のレッスンをもちましてLightbox の実装は完了となります。こちらをマスターしておけばいろいろな場面でLightbox を表示させることができるようになり、Lightbox の中で表示させるコンテンツにも画像や動画の表示に応用させていくことができますのでしっかりとマスターしておきましょう。

JavaScript + jQueryで作るLightbox

Lightboxとは半透明な黒を背景に四角いウィンドウ内にコンテンツを表示する機能です。このコースではJavaScriptとjQueryを使ってサイトのページにLightboxを作成する手順を解説します。JavaScripとjQueryの説明からHTMLやCSSでのコーディング、そして実際にLightboxの表示を切り替えなどを順を追って解説します。

55分 (12 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年06月04日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。