今回は「サイドメニュー」のある『作者紹介』ページのコーディングをします。唯一削除する部分がないページになります。
「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ファイル)