ホーム > ホームページの作り方 > イラスト(ギャラリー)ページをコーディングする

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

さて、それではいよいよメインになるページ「イラスト(ギャラリー)」ページを作っていきます。


まずは今までどおり必要な画像だけ切り出します。(取りあえず今回は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ファイル)


次のお話

「ホームページ作成講座」に関連するオススメ記事

フリー漫画素材

無料で使える漫画素材です

ホームページの作り方

初心者向けHP作成講座

同人サークル専用HP

ホームページ作ります!

Copyright (C) 牛屋へ.com, All Rights Reserved.