JavaScript + jQueryで作るLightbox

トリガーボタン部分のHTMLコーディング

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Lightboxを表示するトリガーとなる表示ボタン部分のHTMLコーディングについて解説致します。
講師:
03:51

字幕

このレッスンでは JavaScript とjQuery を使ってLightbox を実装するにあたりまずは Lightbox を表示するためのトリガーとなるボタンのHTML コーディングの方法について解説いたします。まずはダウンロードしてきたファイル、こちらの「 button.html 」というフォルダーの中にあるこの3つのファイル、これらのファイルをエディタで開いてください。そしてこれがそのファイルを開いた状態です。これらのファイルを使って今回のレッスンの解説を進めていきたいと思います。それでは早速レッスンを始めていきましょう。まずはこれらの3つのファイルが今現状どのようになっているかを確認しておきましょう。まずはこちらの index.htmlこちらは HTML の基本的なフォーマットのみを書いている状態となっています。実際にこちらの body タグの間に今回の Lightbox のコーディングを行っていきます。そしてこちらの stylesheet.cssそして javascript.jsこれらのファイルには今まだ何も書かれていない状態ですね。それでは index.html に戻ります。 それでは早速こちらの body タグの中に今回のレッスンで作成するボタンですね、Lightbox を起動するためのトリガーボタンこちらのコーディングを行ってみたいと思います。まずは普通に button タグを作りましょう。そして button 閉じるタグを作ります。そしてその次にこの button タグの間に分かり易い様にこのよ打っておきます。「 Lightbox を表示する」と書いておきましょう。そして最後にこちの button タグに目印となる id を付けておきましょう。このように id="" と書いてこちらの "" の中に今回は triggerと書いておきます。このようにすることで id="trigger" が付いたボタンが生成されました。それではこの状態で index.html を保存してみます。保存するためのキーボードショートカットはMac ですと Command+S の同時押し、Windows ですと Control+S の同時押しでしたね。それでは保存します。保存が終わったら今の状態をブラウザで確認してみましょう。この index.html をブラウザで開いてみます。利用するブラウザは今回は Chrome ブラウザを利用します。 それでは開いてみましょう。するとこのようにボタンが生成されていますね。今はクリックしても何も起きません。今後のレッスンでは実際にこちらのボタンをクリックしたときにLightbox が表示されるように実装していきますが今回のレッスンはこの HTML コーディングまでで完了となります。それではエディタに戻ります。以上でレッスンは終了です。今回は JavaScript と jQuery を使って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宛までご連絡ください。