イラスト(ギャラリー)ページをコーディングする

さて、それではいよいよメインになるページ「イラスト(ギャラリー)」ページを作っていきます。まずは今までどおり必要な画像だけ切り出します。(取りあえず今回は1枚分)

イラストページを作ろう!

そして、「イラスト一覧」ページをコーディングするため、雛形を複製し、名前を「illust.html」に変更し、必要な箇所を修正します。 今度は下記のようにcontents内をdivで囲みます。


HTML(illust.html)



CSS(style.css)



「サムネイルをクリックすると、画像が拡大する」ようなイメージかと思われますが、実際は小さいサムネイル画像と、原寸の画像を用意し、また原寸の画像を貼るための新規ページが必要になります。

原寸の画像を無理やり縮小して、サムネイルを作る方法もあるのですが、それをすると、一覧ページのファイルが重くなり、表示に時間がかかるというデメリットがあります。

アイコンと原寸サイズの画像を用意

ここでちょっと、イメージにないデザインテクニック。下記記述で、マウスオーバー時に色が変わるようにします。



ホームページの特性で、ユーザーはバナーにカーソルを合わせた時、「色が変わる」「動く」などのアクションがあった方が、ない時に比べ圧倒的にクリックする確立が上がります。

全体の綺麗さも大事ですが、こういったユーザー目線で、イメージにない動きを追加していくことも「Webデザイナー」の仕事です。

オンマウスで色が変わるCSS

話がズレましたね。すみません。次は拡大ページを作成します。

今度は雛形ではなく「illust.html」を複製して、「illust_01.html」に名前を変更します。一覧で作ったID名「illust_list」を「illust_page」に変更します。


HTML(illust_01.html)



CSS(style.css)



パンくずリスト


ブラウザを開いて、一覧ページと個別ページを行き来してみて、リンク漏れがないかチェックしてください。ページが増えた後に、「このボタン一覧に戻れない!」などのようなことが発覚すると、全ページ修正しなくてはならなくなり、やっかいです。

一枚だけだと、さびしく感じますが、残りのページは「ホームページを更新する」の回で、追加していきますので、しばらくお待ちください。

次回は「イベント」ページをコーディングしていきます。

>>今回作ったページ1(イラスト一覧ページ)

>>今回作ったページ2(イラスト個別ページ)

>>サンプルデータをダウンロード(zipファイル)

次のお話