言語を学ぶ

HTML&CSS&JSでつくるサムネイルグリッド

HTML&CSS&JSでつくるサムネイルグリッド

チャプター:9

このブックでは、HTML, CSS, JavaScriptを使用して、並べられた縮小店舗イメージ画像にマウスを乗せる事で 大きな画像が表示されるような、サムネイルグリッド型のレイアウトを作成していきます。

1.HTML構造をつくる

このチャプターでは、全体の骨組みとなるレイアウトをHTMLで作成していきます。

38P

2.全体の装飾

このチャプターでは全体のレイアウトの調整として、ページ全体とタイトルをCSSで装飾します。

32P

3.「images_area」の装飾

このチャプターでは、お店紹介ページのレイアウト全体を囲む「images_area」の装飾をCSSで行っていきます。

28P

4.「thumb」の装飾

このチャプターでは、小さな画像を囲む部分であるクラス名「thumb」の要素をCSSで装飾していきます。

32P

5.サムネイル画像リストの装飾

このチャプターでは、画像一覧のリストをCSSにて装飾していきます。

54P

6.サムネイル画像の装飾

このチャプターでは 画像一覧のサムネイル画像そのものをCSSで装飾していきます。

30P

7.「top」の装飾

このチャプターでは、マウスオーバーされた画像を拡大表示する部分である「top」というクラス名の要素をCSSにて装飾していきます。

34P

8.トップ画像の装飾

このチャプターではトップ画像となる部分のCSSを装飾していきます。

32P

9.マウスを乗せたら画像を変える

このチャプターでは、実際にjQueryを使用して マウスを乗せたら画像が変わるようにしていきます。

34P