JavaScript + jQueryで作るLightbox

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

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

ぜひご覧ください。

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

字幕

このレッスンでは JavaScript と jQuery を使って Lightbox を実装するにあたりLightbox を表示するためのトリガーボタンに対してスタイルシートを当ててデザインを調整する方法について解説いたします。まずはダウンロードしてきたこの「 button_css 」というフォルダーの中にあるこの3つのファイルをエディタで開いてください。そしてこれがそれらのファイルを開いた状態です。これらのファイルを使って今回のレッスンを解説していきたいと思います。それでは早速レッスンを始めていきましょう。今回は以前のレッスンで制作したこちらの button タグですね。Lightbox を表示するためのボタン、こちらに CSS でデザインを調整していく方法について解説いたします。それでは stylesheet.css をエディタで見てみたいと思います。こちらがその CSS です。ご覧のようにこのファイルではすでにLightbox の表示ボタンに対してスタイルシートの記述が完了している状態となっています。ご覧の通り Lightbox を表示するボタン。だからといってとりわけ特別なことをしているわけではありません。 普段通りにこのボタンに対するマージンやパディングの指定、そして中に入っているテキストのフォントサイズの指定を行っているのみとなります。こちらに関してはご自身で作りたいと考えているデザインに合わせてCSS を調整していただければ大丈夫です。それでは index.html に戻ります。こちらの index.html ではこちらの部分に注目してください。このように stylesheet.css をこのindex.html から読み込む指定をしています。これを忘れずに記述しておいてくださいね。それではこの状態で一度この index.html をブラウザで開いて内容を確認してみましょう。こちらの index.html をブラウザで開きます。するとこのように表示されてきましたね。CSS ファイルで指定した通りにこのボタンに対するマージンやパディングそしてフォントサイズの指定が反映されている状態となっています。普段通りの CSS コーディングで問題ないので特に難しいことはないですね。こちらのボタンはまだクリックしても何も起きませんが、以降のレッスンでこちらのボタンをクリックしたときにLightbox を表示するような処理を加えていきます。 それではエディタに戻ります。以上でレッスンは終了です。今回は Lightbox のトリガーボタンに対してCSS でデザインを調整する方法について解説いたしました。以降のレッスンでは Lightbox 本体部分にスタイルシートを当ててデザインを調整する方法について解説いたしますのでそちらも合わせてご覧ください。

JavaScript + jQueryで作るLightbox

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

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

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

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

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