OL, UL, DLの間違いにくい覚え方と使い方解説

OL, UL, DLの間違いにくい覚え方と使い方解説

平成30年度 第1回のウェブデザイン技能検定3級から、HTMLのリストに関する問題を解説していく。三種類のリストの覚え方や使い方を解説しながら、この問題を一緒に解いていこう。

第 12 問
HTML文書において順序なしリストを作成するための組み合わせとして、最も適切なものはどれか。以下より1つ選択しなさい。

  1. ul要素とli要素を使用する。
  2. ul要素とol要素を使用する。
  3. dl要素とdt要素を使用する。
  4. blockquote要素とq要素を使用する。

※ 平成30年度 第1回のウェブデザイン技能検定3級 学科試験より引用

問題文を読んでみよう「順序なしリストを作成する~」とある。まずは、ここから説明しておこう。HTMLには順序ありリスト、順序なしリスト、そして定義リストという三種類があり、見た目も使い方も異なる。OL, UL, DLの三つだが、語源とセットに覚えるのがコツだ。

OLは順序あり(数字入り)リスト

最初にOLからいこう。OLはOdered Listの頭文字を取ったものだ。Orderedは「順序づけられた」という意味。私たちが日常で聞いたり使ったりしている、あの「オーダー」。スポーツではスタメンをスターティングオーダーと言ったりもする。蛇足となるが、お店で注文するときに使うオーダーも同じ綴りだ。受けた注文を順序に沿って注文書に記入したり、調理したりといった語源があるのかもしれない。

そのオーダー(Order)の形容詞がオーダード(Ordered)で、オーダードリスト(Ordered List)は「順序のあるリスト」となる。実際のHTMLとブラウザに表示される結果を見ておこう。

開始タグ<ol>と終了タグ</ol>の中に、<li>と</li>で挟んだ文字がリスト内容として表示される。ここで、LIの説明もしておこう。LIはList Itemの頭文字だ。日本語に訳すとリスト項目となる。リスト自体は日常の会話でも使われているし、日本語に訳す必要もないだろう。

HTMLでは、Ordered Listで「順序のあるリストですよ」と示してあげて、List Itemに実際のリスト内容を明記してあげるのだ。そうすると書いた順に上から1.~2.~3.~と自動的にブラウザが番号を付けてくれる。

ULは順序なしリスト

HTMLの学習を始めて間もないうちは、「OLとULのどっちが順番入りだっけ?」と迷うことがあると思うが、ULがUnordered Listの頭文字であることを覚えてしまえば、もう迷うことはない。先のOrderedが「順序のある」であったのに対し、打ち消し(否定)を表すUnが付くUnorderedは「順序のない」リストとなる。

unhappy「不幸な」、unknown「知られていない」などunで始まる英単語を覚えさせられた経験があるのではないだろうか。「順序のない」リスト、つまり、番号の付かないリストがULだ。<ul>を見たら、「打消しのuが付く方のリストだ」と思い出せばいい。

OLとULの違いはこれだけ。中に入るLIの使い方は一緒だ。HTMLとブラウザでの表示結果も見ておこう。以下のように黒い丸で表示される。

DLは数字でも黒丸でもない定義リスト

最後に、リストの中では異色のDLをみておこう。DLはDefinition Listの頭文字で、Definition(デフィニション)は「定義」という訳になる。定義というと、何やら堅苦しい印象を受けるが、慣れてしまえば便利なリストだ。実際のHTMLを見てもらった方が理解しやすいだろう。

まずは、<dl>で定義リストだと明記しておく。そして、<dt>~</dt>で専門用語などを囲み、続けて<dd>~</dd>にその説明文を入れてあげる。上記の例では、<dt>~</dt>にPNGと書き、<dd>~</dd>でPNGの特徴を説明している。

説明リストではなく定義リストという名前が付いているのは、説明文に限らず、「〇〇は、□□だ」という形なら何を入れて構わないからだ。そう、〇〇の部分を自分で定義してあげるリストがDLなのだ。数字も黒丸も付かないため、ブラウザ上ではDDの部分を字下げして表示されるケースが多い。

それと、DTはDefinition Termの頭文字で「定義する用語」、DDはDefinition Description、「定義の説明」を意味している。他のリストと異なり、タグが三種類あるため最初は混乱しそうだが、<dt>~</dt>と<dd>~</dd>をセットで使うことさえ理解できれば十分だ。

引用を表す2つのQuote

選択肢の4番目、「4. blockquote要素とq要素を使用する。」はリストでもなんでもない。blockquoteもqも共に引用を表しており、この講座を読んでくれていれば、引っかかることもないだろう。

blockquoteとqの違いは、引用する文章の長さを基準にすると良い。比較的に長い文章(本の一節など)の場合はblockquoteを、短い文章(一行、一単語など)の場合はqを使うのだ。

もう少し補足すると、blockquote(ブロック・クオート) はBlock+Quoteで「引用するかたまり」を意味し、<blockquote>タグを使うとブラウザ上では字下げして表示されるため、その部分だけ他の文章とは異質であるとすぐに分かるようになっている。

qはQuotetionの頭文字で、こちらも「引用」を意味している。は字下げや改行を伴わないため、文章の途中で使ってもレイアウトが変わることがない。ブラウザ上では斜体で表示されることが多い。制作現場では「キュータグ」と言えば通じるはずだ。

あなたも近いうちに、他の人が書いた文章の一部を使わせてもらいたいケースがあるかもしれない。その際は、引用文の長さや、改行を意識して使い分けると良いだろう。

解答

さて、もう一度、問題文を見てみよう。

第 12 問
HTML文書において順序なしリストを作成するための組み合わせとして、最も適切なものはどれか。以下より1つ選択しなさい。

  1. ul要素とli要素を使用する。
  2. ul要素とol要素を使用する。
  3. dl要素とdt要素を使用する。
  4. blockquote要素とq要素を使用する。

※ 平成30年度 第1回のウェブデザイン技能検定3級 学科試験より引用

「順序なしリストを作成するための組み合わせ」を選べと問われている。ポイントをおさらいしておこう。

・Ordered List=オーダーリストは「順序あり」だから数字入り
・Unordered List=打消しのunが付くアン・オーダーリストは順序なし

この「un」を理解しておけば迷うことはない。正解は1か2に絞られる。1は「li要素」と続き、2は「ol要素」と続いている。OLもULも中に入るのはList Item(li)だったはずだ。

正解は1の「ul要素とli要素を使用する。」で納得してもらえただろうか。