ホーム > ホームページの作り方 > 作者紹介ページをコーディングする

作者紹介ページをコーディングする

今回は「サイドメニュー」のある『作者紹介』ページのコーディングをします。


唯一削除する部分がないページになります。


「member.html」「member_01.html」「member_02.html(サンプルにはありません)」が今回つくるファイルです。


イラストページと同じく、「一覧」→「個別」の順に作成しますが、コーディングのコツは、必ずサイドメニューにリンクを設置することです。


サイドメニューのリンクを忘れずに!


この作業をしないと、「member.html」から「member_01.html」を複製した際にリンクが引き継がれず、後から全ページ修正と、とても面倒なことになります。


HTML(member.htmlの「sidebar」部分)


さて一覧ページの中身を作っていきます。


これまでのページと同様に、雛形を複製して「member.html」に変更したら、contents内をdivで囲んでCSSを記述します。


HTML(member.html)



CSS(style.css)



デザインを見てもらうとわかるように、レイアウトがほぼ一緒ですので、一覧ページ(member.html)をコーディングしたものを、そのまま複製して個別ページ(member_01.html)も作成できます。


違いは一覧ページでは「続きを見る」、個別ページでは「一覧ページで見る」にし、それぞれリンクを変更して残りを追記するだけです。


HTML(member.html)



HTML(member_01.html)



ただ「member.html」→「member_01.html」に移動しているだけですが、開閉しているように見えますね。


開閉ボタン風レイアウト


似ているコードは、なるべく流用することで作業を短縮することができます。


ID・クラスを統一することで、メンテナンスも楽になります。


さて、次は最後のページ「お問い合わせ」ページになります。


>>今回作ったページ1(作者一覧ページ)


>>今回作ったページ2(作者紹介ページ)


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


次のお話

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

フリー漫画素材

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

ホームページの作り方

初心者向けHP作成講座

同人サークル専用HP

ホームページ作ります!

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