HTMLとCSSによる表現を考える 複数のサムネイル画像を並べておき、画像をクリックするとモーダルウィンドウで拡大画像を表示するWebページを作成します。はじめに、HTML/XHTML(以下、HTML)とCSSでどのようにモーダルウィンドウを表現するか、静的なページを作って考えてみましょう。 HTMLは、ul/li要素で並べたサムネイル画像の後に、「glayLayer」と「overLayer」というid属性をつけたdiv要素を配置します。glayLayerはページ全体に重ねる半透明のレイヤーを表示するための要素で、overLayerは子ウィンドウを表示するための要素です。子ウィンドウに表示したい要素(今回はimg要素)はoverLayer内に配置します。 ▼サンプル01(HTML部分) <h1>jQueryを利用したモーダルウィンドウの作成</h1> <ul> <li><a href="i
![ASCII.jp:jQueryによるLightbox風モーダルウィンドウの作り方|Web制作の現場で使えるjQuery UIデザイン入門](https://cdn-ak-scissors.b.st-hatena.com/image/square/2c5cc038747f851a6643024dc05c0165ccaeecdd/height=288;version=1;width=512/https%3A%2F%2Fascii.jp%2Fimg%2F2009%2F07%2F22%2F240489%2Fl%2F947ffd95838c8645.jpg)