JavaScript + jQueryで作るLightbox

コンテンツ枠部分のCSSコーディング

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Lightboxの中に設置するコンテンツ枠部分のCSSコーディングについて解説致します。
講師:
05:01

字幕

このレッスンでは JavaScript と jQuery を使って Lightbox を実装するにあたりLightbox 本体の背景部分にスタイルシートを当ててデザインを調整する方法について解説いたします。まずはダウンロードしてきたこの「 content.css 」フォルダーの中に入っているこの3つのファイルをエディタで開いてください。そしてこれがそれらのファイルを開いた状態です。これらのファイルを使って今回のレッスンの解説を進めていきたいと思います。それでは早速レッスンを始めていきましょう。今回スタイルシートを当てる Lightbox のコンテンツ枠部分ですがHTML コードででいうとこの部分になります。それでは stylesheet.css を開いてみましょう。この stylesheet.css の下の方を見てみますとこのようにすでに今回ご説明する Lightbox のコンテンツ枠部分のスタイルシートが設定されているのが分かりますね。これを順に追って確認しながらいくつかポイントとなる点を解説していきたいと思います。それではまずコンテンツ枠部分から解説します。こちらの div 要素に対してはまず background-color で #fff要するに白色を指定している状態ですねそして position には relative の値を入れています。 そしてその次に margin上下は 0 そして左右は auto の値を入れています。こうすることによってこのコンテンツ枠この部分が画面上の横軸で中心に来るようにしています。そして width と height でそのコンテンツ枠の幅と高さの指定。そしてこの opacity: 1 で透明度を指定しています。opacity: 1 は完全に不透明であることを指定しています。そしてこちらの z-index:20 は Lightbox の背景、こちらで指定している z-index: 10より大きい値を指定することによって背景の上に表示させるということを指定しています。そして最後に font-size: 16pxこちらはその名の通りこの div 要素の中で表示させるテキストの文字サイズを16px に指定している形となります。それでは次にこちらのコンテンツ枠の中の p タグ、要するに内枠部分のスタイルの指定について見ていきたいと思います。こちらは非常にシンプルでwidth と height に autoそして padding を 20px に指定しているのみとなりますね。それではこの状態で「 index.html 」をブラウザで開いて確認してみましょう。 こちらのファイルをブラウザで開いてみるとこのような形で表示されてきますね。先ほどの CSS ファイルで指定した通りに画面上に表示されています。一点注目していただきたいのがこのコンテンツ枠の位置です。左右で見るとちょうど中心に来ていますが上下で見ると中心に来ていませんね。このコンテンツ枠を上下の中央に設置する方法は後ほど別のレッスンで解説いたしますのでそちらも参考にしてみてください。それではエディタに戻ります。最後にこちらの div#lightboxこれは Lightbox 本体の大枠ですね。こちらでコメントアウトされているこの display: none のコメントアウトを取ってあげましょう。このようにすることによってこの「 index.html 」をブラウザで開いた時に初期状態として Lightbox を非表示にしておくといった形にしておくことができます。あとはトリガーとなるボタンをクリックしたときにこの Lightbox を表示するように切り替えてあげればLightbox は完成という形になりますね。以上でレッスンは終了です。今回は Lightbox のコンテンツ枠部分に対してCSS でデザインを調整する方法について解説いたしました。 以降のレッスンではいよいよJavaScript と jQuery を利用してLightbox を表示させる手順の解説に入っていきますのでそちらも合わせてご覧ください。

JavaScript + jQueryで作るLightbox

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

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

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

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

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