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

今回は「サイドメニュー」のある『作者紹介』ページのコーディングをします。唯一削除する部分がないページになります。

「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ファイル)

次のお話