JavaScript + jQueryで作るLightbox

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

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

ぜひご覧ください。

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

字幕

このレッスンでは JavaScript と jQuery を使って Lightbox を実装するにあたりLightbox 本体の中にあるコンテンツ枠部分となるHTML のコーディングの方法について解説いたします。まずはダウンロードしてきたこちらの「 content_html 」フォルダーの中に入っているこれら3つのファイルをエディタで開いてください。そしてこれがそれらのファイルを開いた状態です。これらのファイルを使って今回のレッスンの解説を進めていきたいと思います。それでは早速レッスンを始めていきましょう。コンテンツ枠部分とは Lightbox の背景の上で画面の中央に表示させる表示させたいコンテンツを格納する部分のことを指します。それでは実際にこのコンテンツ枠部分のHTML コーディングをやっていきたいと思います。こちらの Lightbox の背景部分のdiv の下に書いていきます。まずは div と書いてそしてdiv 閉じるタグを書きます。そしてこちらで改行を置いてこの中に p タグを書きます。このように p タグとp タグ閉じるを書きます。そしてここでも改行を置きます。そしてこの中に表示させるコンテンツを書いていきましょう。 ここではサンプルとしてこのように書いておきましょう。ここには「 Lightbox 」のコンテンツが入ります。このように書いておきます。そして最後にこちらの div ですね、こちらの div に目印となるid を付けておきましょう。id="" と書いてこの "" の中にここでは lb_content と書いておきましょう。これで Lightbox のコンテンツ枠部分のHTML コーディングが完了しました。一点注意していただきたいのがこの Lightbox のコンテンツ枠部分ですが背景の上に乗っているからといってこちらの背景の div の中に書いてはいけないということです。これはどうしてかというとこの Lightbox の背景、後々に CSS で透過の処理をかけます。もしこのコンテンツ枠部分がこの背景の中に入ってしまうとこのコンテンツ枠部分に関しても同じように透過がかかってしまい、肝心の表示させたい内容が半透明のような状態で表示されてしまうからです。この点は注意して覚えておきましょう。それでは一度この状態でindex.html を保存します。保存のキーボードショートカットはMac でしたら Command+SWindows でしたら Control+S の同時押しでしたね。 それでは保存します。そしてこちらの index.html をブラウザで開いてみましょう。するとこのように表示されてきますね。以上で Lightbox の HTML コーディングは終了となります。それではエディタに戻ります。以上で今回のレッスンは終了です。今回は Lightbox の本体のコンテンツ枠となる部分のHTML コーディングについて解説いたしました。以降のレッスンではこれまでに作成したHTML コーディング部分にスタイルシートを当てて Lightbox のデザインを整える方法について解説いたしますのでそちらも合わせてご覧ください。

JavaScript + jQueryで作るLightbox

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

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

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

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

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