実践コーディングスキル - 第8章 Lesson8

第7回:ピックアップ記事のHTMLを書いてみよう

   

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

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

ウェブマガジンのピックアップ記事を作成する方法を解説しています。
ここでは、必要な画像や文字をHTMLを使ってマークアップしていきます。



この動画で学べること

・ピックアップ記事のマークアップ方法



ピックアップ記事のマークアップ方法

今回は、ピックアップ記事のマークアップをしていきましょう。
<div>id名top_pickupの中に、必要なタグを書いていきたいと思います。
まずは、<img>タグで表示させる画像のパスを指定し、<p>タグで囲んで行きます。
そして、記事のタイトル部分を定義型リストで作っていきますので、タイトルを<dt>タグ、日付を<dd>タグで囲みましょう。



<div id="top_pickup">
 <p id="pickup_thumb">
<img src="images/pickup.jpg" alt="Mobile Web Design">
</p>
<dl>
<dt><a href="#">スマホサイトのデザイン時に参考になるWebサイトのギャラリーまとめ</a></dt>
<dd>2015.12.12</dd>
</dl>
</div><span></span>



ここまでできたら保存してブラウザで見てみます。
文字がこのようにちゃんと表示されているかを確認してください。
次回はこのマークアップした文字にスタイルをかけて、見本に近づけていきましょう。