言語を学ぶ

HTML&CSSでつくるモーダルウィンドウ

HTML&CSSでつくるモーダルウィンドウ

チャプター:7

「モーダルウィンドウ」とは、何らかの処理を行う際、ページ内で子ウィンドウを表示するためのウィンドウです。jQueryなどと連携して フェードイン、ポップアップするのが通例です。このブックではモーダルウィンドウのレイアウト部分に重点を置いて、その仕組みを見ていきます。

1.HTML構造をつくる

このチャプターでは全体の根幹をなすHTML構造を作成していきます。

28P

2.モーダルウィンドウをつくる

このチャプターでは、モーダルウィンドウのHTML構造を作成していきます。

30P

3.全体の装飾

このチャプターではページ全体を囲む部分(html, body)のCSSによる装飾を行います。

30P

4.「contents」の装飾

このチャプターでは、ページ内のコンテンツ部分である、クラス名「contents」の要素をCSSで装飾していきます。

36P

5.「modal」の装飾

このチャプターではモーダルウィンドウを実現するための要素群をCSSで装飾していきます。

32P

6.「modal_mask」の装飾

このチャプターでは、モーダルウィンドウが表示されている際の半透明の黒背景部分をCSSで実現します。

38P

7.「modal_content」の装飾

このチャプターでは、モーダルウィンドウとなる要素をCSSにより装飾します。

40P