JavaScript + jQueryで作るLightbox

Lightboxの紹介と完成版のプレビュー

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
このレッスンでは、Lightboxとはどういうものか、そして、そのLightboxを実装が完了した完成版のファイルを確認しながら、学習のポイントを確認していきます。
講師:
02:16

字幕

このレッスンではこれからJavaScript と jQuery を使ってLightbox を実装していくにあたりLightbox とはどういったものなのかのご紹介と実際にこのコースで制作していくLightbox の完成版を見ながら今後のレッスンで学んでいく学習のポイントを確認しておきます。Lightbox とはその名前を知らなくても普段わたしたちがウェブサイトを見ている際にもよく見かける技法となります。言葉で説明するより実際に目で見て頂いた方が分かりやすいかもしれませんのでここではその Lightbox をこれから私達がこのコースで制作していく完成版で確認してみたいと思います。今画面に映っているのがその完成版となります。このボタンをクリックするとこのように画面の中央にコンテンツが表示されその後ろには黒い透過のかかった背景が表示されます。これが Lightbox です。さてこれからこの Lightbox を実際に自分達で学習しながら制作していくわけですがここではいくつかの学習のポイントについて確認しておきたいと思います。まずはこのボタンをクリックしたときにLightbox を表示させる方法についてそして表示された Lightbox をどのように HTML と CSS で実装するかという点さらにこの白いコンテンツ部分をブラウザの中央に表示させる方法について最後にこの黒い背景部分をクリックすることによってLightbox を非表示にさせる方法について以上の点がこのコースの主な学習のポイントとなりますのでしっかりと頭に留めておきましょう。 これらの点について HTML CSS JavaScriptの3つの観点から解説していきます。以上でレッスンは終了です。今回は Lightbox のご紹介と以降のレッスンにおける学習のポイントについて確認いたしました。

JavaScript + jQueryで作るLightbox

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

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

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

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

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