JavaScript + jQueryで作るLightbox

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

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

ぜひご覧ください。

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

字幕

このレッスンでは JavaScript とjQuery を使ってLightbox を実装するにあたりLightbox 本体の背景部分となる HTML のコーディングの方法について解説いたします。まずはダウンロードしてきたファイルこちらの「 background.html 」というフォルダーの中に入っているこれら3つのファイルをエディタで開いてください。そしてこれがそれらのファイルを開いた状態です。これらのファイルを使いながら今回のレッスンを進みていきたいと思います。それでは早速レッスンを始めていきましょう。Lightbox の背景部分ということですが、これは黒く透過されてブラウザの表示領域一杯に広がる部分のことを言います。今回はこの部分について HTML のコーディングを行っていってみたいと思います。それでは早速コードを書いていってみたいと思います。この trigger となる button の下に書いていきます。背景の部分を作る前にまずは Lightbox 本体の枠組みを作ってあげましょう。まずは divそして div 閉じるタグを書きます。そしてこちらの div に目印となるid を作っておきます。 id="" と打ってこの中に lightbox と書いてあげましょう。これで Lightbox の本体の枠組みが出来上がりました。それではこの枠組みの中に背景を書いていきたいと思います。改行してこの div の中にこのように書いていきます。同じく div そして div 閉じるタグを書いてこちらの div にも背景とわかるid を付けておいてあげます。ここでは例えばこのように書きます。lb_background と書いておきましょう。以上で背景部分の HTMLコーディングは終了です。思いのほかシンプルでしたね。以上でレッスンは終了です。今回は Lightbox の本体の背景となる部分のHTML コーディングについて解説致しました。以降のレッスンではLightbox 本体の中にあるコンテンツ枠部分の HTML コーディングについても解説いたしますのでそちらも合わせてご覧ください。

JavaScript + jQueryで作るLightbox

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

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

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

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

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