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

第3回:リストタグを使ってメニュー一覧を記述しよう

   

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

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

リストタグを使ってメニュー一覧を作成する方法を解説しています。



この動画で学べること

・メニュー一覧の見出しの作成方法
・メニュー一覧をマークアップする方法



メニュー一覧の見出しを作成する方法

今回は、トップページの新着情報の部分をメニュー一覧に書きけていきたいと思います。
まず見出しですが、中みだしのところで<h2>を使ってしまっているので、HTMLの「新着情報」の部分を「Basic Menu」に変え、<h3>で囲みます。
それに応じて<h2>と同じスタイルを<h3>にも適応できるように、セレクタに書き加えていきましょう。



div#right h2
div#right h3 {
font-size: 17px;
font-weight: bold;
line-height: 23px;
border-left: 5px solid #ba3009;
padding-left: 10px;
}



メニュー一覧をマークアップする方法

メニュー一覧の作成に入って行きましょう。
ここは定義型リストを使ってマークアップしたいと思いますので、中の文章を<dl><dt><dd>タグで囲んで、作っていきましょう。
中の文章は、こちらをコピーしてご使用ください。


<dl>
<dt>Cut</dt>
<dd>
一般 ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ 5,800yen
学生 ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ 4,800yen
小学生以下 ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ 2,800yen
</dd>
<dt>Color</dt>
<dd>
ショート ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ 5,800yen
ミディアム ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ 4,800yen
ロング ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ 2,800yen
</dd>
<dt>Perm</dt>
<dd>
ショート ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ 5,800yen
ミディアム ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ 4,800yen
ロング ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ 2,800yen
</dd>
</dl>



保存してブラウザで見てみます。
記述した定義型リストが表示されました。
次回、スタイルをかけて見やすくしていきたいと思います。