教科書2冊共に無かったので、今日はdlを徹底的に。
dlとは「定義リスト」です。
定義リストでは、dlの中にdt(定義する用語のリスト)と、dd(用語の説明のリスト)が必ず対になってマークアップされているリストの固まりの事です。
tableじゃ駄目なの?何故なら定義リストなので HTML 文章の論理構造が保たれます。つまり、検索エンジンが理解できる構文になっているのでSEO的によろしいという事です。
htmlに10通りのスタイルを当てる演習をします。
こちらの演習問題ページにあるdl001〜dl010の出来上がり見本の画像の様にcssをコーディングしなさい。cssはhead内に記述し、htmlはそれぞれ、問題の名前にしなさい。(例 dl001.html)
いつものパスワードで進入しなさい。
dl001〜dl006は共通のhtmlです。
<dl> <dt>Internet Explorer</dt><dd>Microsoft 社で開発されたブラウザ</dd> <dt>Mozilla Firefox</dt><dd>オープンソース環境で開発されたブラウザ</dd> <dt>chrome</dt><dd>googleが開発したブラウザ</dd> </dl>
dl007はdt1に対するddが2個、dt2に対するddが3個です。
テーブルの様に、dtをマージする必要はありません。
以下のようなとてもシンプルな構文です。
<dl> <dt>dt1</dt> <dd>dd1<br>dd1(2行目)</dd> <dd>dd2</dd> <dt>dt2</dt> <dd>dd3<br>dd3(2行目)</dd> <dd>dd5</dd> </dl>
dl008は006までと同じ、シンプルなdlなのでhtmlもコーディングしてください。
使用画像のURLです。ダウンロードして使用して下さい。
【dl003 】 list2.gif
【dl006】 bg_dt_blue.gif bg_dt_orange.gif bg_dt_pink.gif bg_dd.gif