「ライトボックス機能」部分のHTML/CSSの作成方法 - jQueryのチュートリアル

このレッスンでは　jQuery と jKit プラグインを使って― ライトボックス機能を実装する為の HTML　CSS の― コーディング方法について いくつかのポイントを― ご紹介していきたいと思います まずは ダウンロードしてきた こちらの lightbox-html ― フォルダーの中に入っている こちらの index.html ファイルと― そして　こちらの css フォルダーの中に入っている― この style.css ファイルを エディッターで開いてください そして これがそれらのファイルを 開いた状態です 左側には index.html ファイル そして右側には style.css ファイルを― 表示させている状態です これらのファイルを使って今回の レッスンの解説を進めていきたいと思います それでは 早速レッスンを始めていきましょう まずは html ファイルの方から 見ていきたいと思います 今回 注目して頂きたい部分は こちらの部分となります まずは photoGallery という ID を付けたセクションで― コンテンツの大枠を作って その中に h2 タグで タイトル画像を設置しています そして 実際にライトボックスを 実装していくのがこちらの部分ですね まず ul 要素を作って その中に li タグを4つ書いています そして その li タグの中には それぞれ画像を１枚ずつ設置しています これでライトボックス機能を実装する為の HTML コーディングは完了となります 基本的には いつも通りのHTML コーディングで問題ありません それでは 次に こちらの HTML に対して設定する スタイルシートの方を―見ていきましょう こちらの style.css の こちらの部分がそれに該当します それではこちらの CSS に対して いくつかのポイントを見ていきたいと思います まずは こちらの部分を見てみましょう こちらの部分では 先程の 4 枚の画像を 横軸に均等に配置させる設定を行っています このように display と書いて そして ベンダープリフェックスである― webkit と書いています そして box と書いていますね そして その下には 同じように ベンダープリフェックスを書いて― box-pack というプロパティを作って そして…