JavaScript + jQueryで作るLightbox

背景部分のCSSコーディング

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Lightboxの透過された背景部分のCSSコーディングについて解説致します。
講師:
05:18

字幕

このレッスンでは JavaScript と jQuery を使って Lightbox を実装するにあたりLightbox 本体の背景部分にスタイルシートを当ててデザインを調整する方法について解説いたします。まずはダウンロードしてきたファイルの中にあるこの background_css というフォルダーのこちらの3つのファイルこれら3つのファイルをエディタで開いてください。そして、これがそれらのファイルを開いた状態です。これらのファイルを利用して、今回のレッスンの解説を進めていきたいと思います。それでは早速レッスンを始めていきましょう。今回スタイルシートを当てていく箇所はHTML ソースでいうと、この Lightbox の背景この div 部分となります。それと合わせてこちらの Lightbox 本体の大枠ですね。こちらの div の方にもスタイルシートを当てていきます。それでは stylesheet.css のファイルをエディタで見てみましょう。すると、このようになっていますね、このファイルでは、すでに今回実装するLightbox の大枠部分とそして Lightbox の背景部分のスタイルシートの設定が完了している状態となっています。 それでは、いくつかポイントを見てみたいと思います。まずは Lightbox の大枠部分からです。まず Lightbox の大枠はposition: absolute を指定してtop: 0 そして left: 0 を指定しています。こうすることによって Lightbox がブラウザの画面の左上から表示されるようになります。そして、こちらのwidth: 100% と height: 100%このように書くことでブラウザの表示領域の横幅一杯そして縦幅一杯に表示させることができます。最後に、こちらの z-index: 0 ですね。こちらの部分に関しては Lightbox の中での表示の重なり順で一番底辺ですね。そこに、この Lightbox の大枠を設置するというような形になっています。それでは次に、その下にある Lightbox の背景部分について見ていきたいと思います。まずは大枠部分と同じようにposition: absolutetop: 0left: 0 という形で画面の左上から表示させるようにしています。そして、こちらのbackground-color: #000 でLightbox の背景の色を黒色に指定しています。 そして、こちらの width: 100% とheight: 100% は大枠のときと同じで画面の横幅および縦幅一杯にこの背景を表示させるといった指定をしています。次に、この opacity: 0.7 ですがこれは、この Lightbox の背景の透明度を指定しています。opacity が 1 で完全に透明ではなくそして opacity: 0 と指定しておくと完全に透明な要素になります。今回は opacity: 0.7 と指定しておきます。そして最後に、こちらの z-index: 10 ですが先ほどの、この大枠の 0 に対して 10 を指定することによって大枠よりも重なり順が上に表示されるように指定しています。それでは、この状態で一度この index.html をブラウザで開いて見え方を確認しておきます。先ほどの、こちらの index.html をブラウザで開きますとこのような形で表示されてきます。先ほど CSS で指定した通りに画面の横幅縦幅一杯に Lightbox の背景が表示されていますね。そして opacity で指定した通りに少し透過された状態で背景が表示されていますね。それではエディタに戻ります。 それでは最後に、こちらの Lightbox の大枠の CSS の部分ですね、この部分の最後に書かれているこのコメントアウトされた display: none の部分のコメントを外しあげましょう。このようにすることで、このindex.html をブラウザで開いた時に初期状態で Lightbox を隠しておくという指定ができました。あとはボタンを押したときにこの Lightbox を表示させるという処理を加えれば大丈夫ですね。以上で今回のレッスンは終了です。今回は Lightbox 背景部分に対してCSS でデザインを調整する方法について解説いたしました。以降のレッスンでは Lightbox 本体の中で表示するコンテンツ枠部分に対してスタイルシートを当ててデザインを調整する方法を解説いたしますのでそちらも合わせてご覧ください。

JavaScript + jQueryで作るLightbox

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

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

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

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

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