作者紹介ページをコーディングする
今回は「サイドメニュー」のある『作者紹介』ページのコーディングをします。唯一削除する部分がないページになります。
「member.html」「member_01.html」「member_02.html（サンプルにはありません）」が今回つくるファイルです。
イラストページと同じく、「一覧」→「個別」の順に作成しますが、コーディングのコツは、必ずサイドメニューにリンクを設置することです。
この作業をしないと、「member.html」から「member_01.html」を複製した際にリンクが引き継がれず、後から全ページ修正と、とても面倒なことになります。
HTML（member.htmlの「sidebar」部分）
|
1 2 3 4 5 |
<h3><a href="member.html">作者一覧</a></h3> <ul> <li><a href="member_01.html">武誰応志</a></li> <li><a href="">たけだおうし</a></li> </ul> |
さて一覧ページの中身を作っていきます。
これまでのページと同様に、雛形を複製して「member.html」に変更したら、contents内をdivで囲んでCSSを記述します。
HTML（member.html）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div id="member_contents"> <dl> <dt><img src="images/member_ico_01.png"></dt> <dd> <p class="big">武誰応志</p> <ul> <li>サークル「complice」漫画担当</li> <li>好きなキャラクター： マッシュ</li> <li>マイブーム：掃除</li> </ul> </dd> <dd class="more_btn"><a href="member_01.html">続きを読む</a></dd> </dl> </div> |
CSS（style.css）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
/*作者紹介 はじめ*/ #member_contents dl { border: solid 1px #cccccc; padding-top: 15px; padding-left: 15px; padding-right: 15px; margin-bottom: 30px; min-height: 140px; } #member_contents dt { display: inline-block; vertical-align: top; } #member_contents dt img { border: solid 1px #cccccc; margin-right: 20px; } #member_contents dd { display: inline-block; width: 400px; vertical-align: top; } #member_contents dd.more_btn { display: block; background-color: #eccece; text-align: center; padding: 5px; width: 100px; font-size: 14px; margin-left: auto; margin-right: auto; } #member_contents dd.more_btn a { color: #000000; text-decoration: none; } #member_contents dd ul { list-style: none; font-size: 16px; line-height: 24px; margin-top: 15px; } #member_contents dd ul li { margin-bottom: 5px; } /*作者紹介 おわり*/ |
デザインを見てもらうとわかるように、レイアウトがほぼ一緒ですので、一覧ページ（member.html）をコーディングしたものを、そのまま複製して個別ページ（member_01.html）も作成できます。
違いは一覧ページでは「続きを見る」、個別ページでは「一覧ページで見る」にし、それぞれリンクを変更して残りを追記するだけです。
HTML（member.html）
|
1 |
<dd class="more_btn"><a href="member_01.html">続きを読む</a></dd> |
HTML（member_01.html）
|
1 |
<dd class="more_btn"><a href="member.html">作者一覧に戻る</a></dd> |
ただ「member.html」→「member_01.html」に移動しているだけですが、開閉しているように見えますね。
似ているコードは、なるべく流用することで作業を短縮することができます。
ＩＤ・クラスを統一することで、メンテナンスも楽になります。
さて、次は最後のページ「お問い合わせ」ページになります。
＞＞今回作ったページ1（作者一覧ページ）
＞＞今回作ったページ2（作者紹介ページ）
＞＞サンプルデータをダウンロード（zipファイル）
- 次のお話
- お問い合わせページをコーディングする
