実践コーディングスキル - 第9章 Lesson3

第10回:ランキング一覧のHTMLを記述しよう

   

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

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

ウェブマガジンサイトのランキング一覧をマークアップする方法を解説しています。
ここでは、ランキング一覧のHTMLをリストタグを利用してマークアップします。



この動画で学べること

・ランキング記事のマークアップ方法



ランキング記事一覧のマークアップをしよう

ランキング記事一覧を作っていきましょう。
ランキング記事は、同じようなデザインが何度も繰り返されているので、<li>タグを使って書いていきます。
記事の左側は画像、右側は記事タイトルとなっていますので、<li>タグの中にさらに定義型リストを書いて作っていきたいと思います。
定義型リストを使うことで、class名を使わなくてもよくなるので、HTMLがシンプルになります。
では、実際に書いていきましょう。



<ul>
<li>
<dl>
<dt><img src="images/tmb_1.jpg" alt="ランキング画像01"></dt>
<dd><h3>もうすぐバレンタインデー!美味しい・安い・ハイセンスな義理チョコ15選</h3>
<span id="ranking_tag">ウェブデザイン</span>
</dd>
</dl>
</li>
</ul>



このように、<dt>タグの中には<img>タグで画像のパスを入力し、<dd>タグには<h3>で記事のタイトルを入れていきます。
また、カテゴリタグは<span>で囲んで<h3>の次に記述をしておきましょう。
このように1つめの記事のマークアップができたら、まずスタイルをかけて完成させてから、記事を複製していきましょう。