WebデザイナーのためのjQuery実践講座

「ライトボックス機能」部分のHTML/CSSの作成方法

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
「ライトボックス機能」を実装する為の、HTML/CSSのコーディング方法について、いくつかのポイントをご紹介致します。
講師:
05:34

字幕

このレッスンでは jQuery と jKit プラグインを使って― ライトボックス機能を実装する為の HTML CSS の― コーディング方法について いくつかのポイントを― ご紹介していきたいと思います まずは ダウンロードしてきた こちらの lightbox-html ― フォルダーの中に入っている こちらの index.html ファイルと― そして こちらの css フォルダーの中に入っている― この style.css ファイルを エディッターで開いてください そして これがそれらのファイルを 開いた状態です 左側には index.html ファイル そして右側には style.css ファイルを― 表示させている状態です これらのファイルを使って今回の レッスンの解説を進めていきたいと思います それでは 早速レッスンを始めていきましょう まずは html ファイルの方から 見ていきたいと思います 今回 注目して頂きたい部分は こちらの部分となります まずは photoGallery という ID を付けたセクションで― コンテンツの大枠を作って その中に h2 タグで タイトル画像を設置しています そして 実際にライトボックスを 実装していくのがこちらの部分ですね まず ul 要素を作って その中に li タグを4つ書いています そして その li タグの中には それぞれ画像を1枚ずつ設置しています これでライトボックス機能を実装する為の HTML コーディングは完了となります 基本的には いつも通りのHTML コーディングで問題ありません それでは 次に こちらの HTML に対して設定する スタイルシートの方を―見ていきましょう こちらの style.css の こちらの部分がそれに該当します それではこちらの CSS に対して いくつかのポイントを見ていきたいと思います まずは こちらの部分を見てみましょう こちらの部分では 先程の 4 枚の画像を 横軸に均等に配置させる設定を行っています このように display と書いて そして ベンダープリフェックスである― webkit と書いています そして box と書いていますね そして その下には 同じように ベンダープリフェックスを書いて― box-pack というプロパティを作って そして その値には― justify と入れています 今回のこのコースでは ブラウザー確認用に クロームブラウザを利用しているので― それぞれのベンダープリフェックスには この様に webkit と入れ込んでいます この様にすることで この ul 要素の中に含まれている― 4つの li タグが横軸に均等に 配置されるようになります それでは 次のポイントを見てみます 次に注目して頂きたい部分は こちらの部分となります こちらの部分では この li 要素の中の イメージタグに対して― 横幅と縦幅を指定しています ここでのポイントですが この li タグの中に入れる― 画像の縦幅 横幅のサイズですが― 実際にサムネイルとして表示させる サイズよりも少し大きめに― 作っておいてください そして その画像に対して CSS で この li タグのレイアウトに沿うように― 横幅と縦幅を指定してあげて 画像を少し小さくしておきます こうすることによって ライトボックスで 画像を表示させた時に― 少し大きめの画像を表示させることができます こちらのサムネイル画像と同じサイズを ライトボックスで表示させても― あまり意味がありませんので ライトボックスで写真などを― 表示させる際には 少し大きめの画像を 表示してあげると良いでしょう それでは 最後のポイントを見ていきましょう 最後のポイントはこちらの部分となります こちらの部分では 先程同様 CSS3 の新機能を使って― 写真の縁取りを作成しています このようにボックスシャドーという CSS3 の新しいプロパティを作って― そしてその中で― まずは 10 ピクセルの白い帯を 画像の周りに作って そして― さらにこちらの部分でその白色の帯の周りに 1 ピクセルで灰色の線を― 描くといった形を取っています こうすることによって こちらの写真それぞれに対して― 写真の縁取りを行ったようなデザインを CSS だけで付けることができます 今 ご紹介したこちらの部分と 先ほどのこちらの部分ですが― ライトボックス機能には 直接関係していませんが CSS でレイアウトを作る為のちょっとした テクニックとなっていますので― こちらも合わせて覚えておくと良いでしょう それでは この状態でこちらの index.html ファイルを― ブラウザで開いてその見た目を 確認してみたいと思います はい これがその index.html ファイルを開いた状態です このように写真が4枚縁取りされて 且つ 横軸に均等に配置されていますね ただ まだ jQuery と jKit プラグインを使って― ライトボックスの機能を実装していませんので クリックしても まだ何も起こりませんね 以降のレッスンでは 実際にこの部分に対して― ライトボックス機能を実装していく 方法についてみていきたいと思います 以上でレッスンは終了です 今回は ライトボックス機能を 実装する為の HTML CSS の― コーディング方法についていくつかの ポイントをご紹介いたしました 次のレッスンでは jQuery と jKit プラグインを使って― 実際にライトボックス機能を実装する 方法について解説していきますので そちらも合わせてご覧ください

WebデザイナーのためのjQuery実践講座

jQueryとはJavaScriptを簡単かつ便利に扱えるJavaScriptライブラリです。このコースではプログラミングの知識はそれほどないけれど日々仕事でHPを制作しているWebデザイナーの方や趣味で自分のサイトを運営している方などを対象に、jQueryとプラグインを利用してさまざまな機能や効果を手軽にサイトに実装する方法を学びます。

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

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

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

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