実践コーディングスキル - 第10章 Lesson4

第15回:定義型リストで記事一覧をマークアップしよう

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

ウェブマガジンの記事一覧部分をマークアップする方法を解説しています。
ここでは、定義型リストのタグを利用して、記事一覧をマークアップします。



この動画で学べること

・新着記事一覧をマークアップする方法



新着記事一覧をマークアップする方法

新着記事一覧をマークアップしていきましょう。
記事一覧は同じようなデザインが繰り返されているので、1つ1つのボックスは<li>タグで、中身はランキング一覧と同じで定義型リストを使ってマークアップしたいと思います。



では実際に書いていきましょう。
HTMLファイルの前回作成した見出しの下に、<ul>と<li>タグを書き、その中に<dl><dt><dd>を記述します。
<dt>タグには画像とカテゴリタグを、<dd>タグにはタイトルや日付、記事の本文などのテキストを表示させます。
記事内容の最後にある「...続きを読む」はそこをクリックをしたときに別のページに飛ばすようにしたいので、<a>タグで囲んでおきましょう。



<ul>
<li>
<dl>
<dt>
<img src="images/tmb_5.jpg" height="152" width="247">
</dt>
<dd>
<h4><a href="#">記事タイトルがここに入ります。記事タイトルがここに入ります。</a></h4>
<span class="new_date">2013年5月19日</span>
<span class="tag">キーワード1, キーワード2</span>
<p>記事本文がここに入ります。記事本文がここに入ります。記事本文がここに入ります。<a href="#">...続きを読む</a></p>
</dd>
</dl>
</li>
</ul>



では保存してブラウザで見てみましょう。
HTMLに記述した画像と文章がこのように並べばOKです。