HTML入門トレーニング

記述リスト

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
用語と説明のリストである、記述リストを定義するための、dl要素、dt要素、dd要素について学びます。
講師:
08:35

字幕

このレッスンでは用語と説明のリストである 記述リストを定義するための DL要素 DT要素 DD要素について学びます 記述リストは用語と説明の セットで構成されるリストです その構文は非常に柔軟であるため 一見複雑な構造になっています 実際に試してみましょう コードエディタでサンプルファイルの HTMLを開いています ここにはこれから作る 記述リストのタイプに合わせて 3つのリストがあります 1つ目には基本的な記述リストを作るための テキストのかたまり 2つ目には複数の用語を持つ 記述リストを作るためのテキストのかたまり そして最後は複数の説明を持つための テキストのかたまりです それではまず基本的な記述リストについて 紹介していきましょう 記述リストはそのリストの全体を DL要素で囲みます 実際に記述します DLタグで 全体の頭と後ろを タグで囲みます そして記述リストには 用語と説明が必ず1つずつ必要になります 用語はDTタグでマークアップします ここでは用語と呼んでいますが それは辞書などを マークアップする時にも使えますし あるいは スタッフのクレジットを 作るためにも使えるかもしれません つまり 何かの言葉に対して その言葉の説明が必要な リストを作る時に使うのです その説明については DD要素でマークアップします DDタグの開始タグと終了タグを 説明の前後にマークアップします 用語と説明は1つでセットですので 他のものについても同じように マークアップしていきましょう まず用語が 「順序付きリスト」というテキスト そしてその説明が この順序付きのリスト項目の 集まりというテキストです 同じように最後も マークアップしていきます このように用語とその説明が順序良く 順番に来るようにマークアップしていきます 用語 説明の順番で マークアップができました 保存して ブラウザで 表示してみましょう 先ほどと違って 用語がこのように表示され その説明は 少しインデントして 表示されました この表示の方法は ブラウザによって異なりますが ほとんどのブラウザでは このように表示されるはずです もし見た目をカスタマイズしたい場合は CSS でスタイルを指定します さて これが基本的な 記述リストの作成の仕方です 基本的な記述リストでは 用語と説明を1つずつのセットで記述しました しかしこれは絶対条件ではありません 例えば複数の用語に対して 1つの説明を付ける事もできます 実際にマークアップしていきましょう コードエディタに戻り 少し下にスクロールします ここにあるテキストのかたまりに対して マークアップをしていきましょう 先ほどと同様に記述リストを作るには まず全体をDLタグでマークアップします そして用語についてマークアップする時は 1つひとつの用語を DTタグでマークアップします ここではまず DLというテキストに対して 1つの用語として認識させたいため DTタグでマークアップしました さらに同じように「記述リスト」という 単語に対してDTタグでマークアップ また同じように 「定義リスト」と言う言葉に対しても DTタグでマークアップします このように 複数の用語が 連続してマークアップされても 記述リストの中では 構文として間違っていません この後に必ず1つ説明が来れば それで問題ないのです それではこの長いテキストを 説明であるDDタグで マークアップしましょう さてこの用語や その説明のDTタグ DDタグの中には テキスト以外のタグについても マークアップする事ができます ここまでは全て テキストをマークアップしてきましたが この中に画像が入っても テーブルが入っても構いません 試しに ここでは「p」 通常の段落をマークアップしてみましょう ここで 1文目を1つの段落 もうひとつを2つ目の段落として マークアップし それをDTタグ 説明としてマークアップします このような書き方でも 構文は問題ありません さて ここまでを保存し ブラウザで表示してみましょう すると この「DL」「記述リスト」 「定義リスト」という 3つの用語に対する説明がインデントで 2つの段落として表示されています このようなマークアップでは 複数の用語に対して 説明を加える といったマークアップが可能になります 最後に 複数の説明を持つ記述リストを 作成してみましょう コードエディタに戻ります 先ほどと同様に 全体をDLタグでマークアップしておきます そして1つの用語を DTタグでマークアップします ここでは「コース」という文字列を DTタグでマークアップします これに対する説明は DDタグでマークアップします これは通常の記述リストの書き方と 変わりありませんね 同じようにマークアップを続けていきます DTタグで用語をマークアップしたら DDタグでその説明を並べていきます DTは用語 そして DDでその用語の説明です そしてここで初めて 複数の説明を設けてみましょう この「テクニカルレビュワー (Original)」という用語に対して 3人の人の名前が並んでいます この3人の人の名前は全て この「テクニカルレビュワー (Original)」 という用語に属していますので この1つひとつをDDタグで マークアップしていきます つまり この3人の人は 全員がテクニカルレビュワー というマークアップになるわけです これでマークアップができました 保存して ブラウザで確認すると このコース 著者 プロデューサーは 1つひとつの用語と説明 そしてこのテクニカルレビュワーは 1つの用語に対して 複数の説明が属しています 記述リストでは このような構成の リストを作成する事もできます このように記述リストを使って 用語とその説明というかたまりのリストを マークアップする事ができました このレッスンでは用語と説明のリストである 記述リストを定義するための DL要素 DT要素 DD要素について学びました

HTML入門トレーニング

HTMLはWebページを作るうえでもっとも重要な言語です。これがきちんと定義されなければ、Webページは正しく表示されません。このコースではHTMLの成り立ちから基本的な構文の書き方、さまざまなタグの意味やその使い方まで幅広い内容を学ぶことができます。またHTMLと並んで重要な言語であるCSSやJavaScriptについても、それぞれその概要を説明します。

5時間43分 (48 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2015年05月01日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。