今回は定番中の定番、Lightbox2を使った画像のポップアップ表示について、基本から応用まで幅広く解説していきます。 Lightboxは有名なのでご存じかと思いますが今まで紹介してなかったのでご紹介します。 CSSでの基本設定 まずは、Lightbox2を使うための基本的なCSSを設定します。ここでは、サムネイル画像に適用するスタイルを定義します。ポイントは、見た目の美しさと使いやすさのバランスを取ることです。 lightbox.min.cssファイルを読み込みます。サムネイル(a[data-lightbox] img)のCSS記述です。 <style> body { margin: 20px 10px; padding: 0; font-size: 18px; text-align: center; } h1{ text-align: center; font-size: 22px;