実践コーディングスキル - 第2章 Lesson6

第13回:お知らせの見出しと一覧をマークアップしよう

   

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

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

お知らせ部分のマークアップ方法を、初心者向けに解説しています。
ここでは、見出しタグを使った見出しの作成と、定義型リストを使ったお知らせ一覧の作成をします。



この動画で学べること

・お知らせの見出しを作成する方法
・定義型リストを作成する方法



お知らせの見出しを作成する方法

今回は、「お知らせ」の見出しを作っていきましょう。
まず、HTMLの<div id="right">の中に見出しを作るための<h2>タグを追加します。



<div id="right">
<h2>お知らせ</h2>
</div>



保存してCSSに移り、見出しにスタイルをかけていきます。
Photoshopでテキストのサイズや色などのスタイルを調べ、CSSにその通り指定していきましょう。



div#right h2 {
font-size: 18px;
font-weight: bold;
color: #555555;
}



保存してブラウザで見てみると、見出し部分のスタイルが変更されたことがわかります。




定義型リストを作成する方法

では次に、お知らせ一覧を定義型リストを使って作っていきましょう。
HTMLに定義型リストのタグを書き、文章を入力します。
一つできたらそれをコピーして中身だけを書き換えていきましょう。



<dl>
<dt>2014.12.12</dt><dd><a href="#">ネストクリニック10周年記念コンサートのお知らせ</a></dd>
<dt>2014.12.12</dt><dd><a href="#">平和記念図書館の開館日変更についてのお知らせ</a></dd>
<dt>2014.12.12</dt><dd><a href="#">年末年始も休まず営業します</a></dd>
<dt>2014.12.12</dt><dd><a href="#">募金活動の結果</a></dd>
<dt>2014.12.12</dt><dd><a href="#">元気が出る珈琲試飲会のお知らせ</a></dd>
</dl>



一度保存し、CSSでスタイルを適応させていきましょう。
またPhotoshopで調べ、文字の大きさと色を<dt>タグ、<dd>タグにかてください。


div#right h2 dt {
font-size: 12px;
color: #b8b8b8;
}

div#right dd {
font-size: 13px;
}



保存してブラウザで見てみます。
文字のスタイルが変更されたことがわかります。
次回、もう少し詳しくこの定義型リスト部分のスタイルのかけかたを見ていきましょう。