JavaScript + jQueryで作るLightbox

JavaScriptとjQueryの読み込み

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
HTMLファイルから、外部ファイルのJavaScriptのファイルと、jQueryの読み込み方法について解説致します。
講師:
05:52

字幕

このレッスンでは Lightbox を実装するにあたりHTML ファイルから JavaScript ファイルとQuery を読み込む方法について解説いたします。まずはダウンロードしてきたこの 「 load.js 」フォルダーの中に入っているこれら3つのファイルをエディタで開いてください。そしてこれがそれらのファイルを開いた状態です。これらのファイルを使って今回のレッスンの解説を進めていきたいと思います。それでは早速レッスンを始めていきましょう。JavaScript と jQuery を HTML から読み込むそのスクリプトタグを書く場所ですが今回はこちらの body 閉じるタグの直前に書くことにします。この部分ですね、それではまず jQuery の方から読み込んでみたいと思います。jQuery は jQuery のサイトからダウンロードして利用することが可能です。こちらの「 Download 」のメニューをクリックして表示されたページ、こちらから jQuery のダウンロード方法について選択することが可能です。今回は一番手軽な CDN というものを使ってjQuery を読み込みたいと思います。 CDN に関してはページの中ごろに書いています。この部分ですね、この部分からこちらに書かれている一文をコピーしてHTML ファイルに貼り付けます。それではエディットに戻ります。こちらの body タグ直前のところに先ほどのコードをペーストします。これで jQuery の読み込みは完了です。ただし今回はこの「 index.html 」をサーバー上にアップして利用するのではなくてこのローカル要するに PC 上からこの jQuery を利用したいためこちらのこの部分、ソースのダブルクォーテーションの後にこのように http を追加しておきましょう。こうすることによってローカル要するにPC 上からもこの jQuery のコードを読み込むことができます。それでは次に手元にある「 javascript.js 」先ほどのダウンロードしてきたファイルに含まれるこちらのファイルですね。こちらのファイルを読み込みましょう。読み込む場所はこの今追加したjQuery の下に追加していきます。同じように script タグを書きます。そして script タグ閉じるそしてこちらに src と書いて =""そしてこの "" の中にファイルの名前を書いてあげます。 javascript.js ですね、これで手元にある javascript.js の読み込みも完了です。それではこの jQuery と javascript.js がきちんと読み込めているかどうか確認してみたいと思います。それではこちらの「 javascript.js 」をエディタで開きます。そしてここにこのように書いていきます。まず $ と書いて ()そしてこの () の中に function そして ()そのあとに {}そして最後の() のあとに ;このように書いたあとでこちらの {} の中ですね。こちらに改行を入れてあげてそしてこの中に alert(); と打ちます。そしてこの alert() の中引数にこのように書きます。「動作サンプルです」と書いておきましょう。それではこの「 javascript.js 」のファイルを保存します。そして忘れずにこちらの「 index.html 」こちらのファイルをも保存しておきます。この状態で「 index.html 」これをブラウザで開いて確認してみましょう。こちらのファイルをブラウザで開くとこのようにアラートのダイアルが出てきて「動作サンプルです」と書いていますね。 このように表示してくればjQuery そして JavaScript とともにきちんと読み込めているという形になります。それではエディタに戻ります。最後に JavaScript と jQuery を読み込む際に1つ注意事項があります。このように JavaScript と jQuery 両方読み込む際には必ず先に jQuery を読み込んでからその後にJavaScript を読み込むようにしてください。このようにしないとせっかく書いたJavaScript のプログラムが正常に動かない可能性がありますのでこの点は注意しておきましょう。以上でレッスンは終了です。今回は Lightbox を実装するにあたりHTML ファイルから 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宛までご連絡ください。