【HTMLドリル】記事の信頼性を高める「リスト」と「引用」
読みやすいブログ記事は、情報が整理されており、信頼できる裏付けがあります。今回は、それを実現する「リスト（箇条書き）」と「引用」のタグをマスターしましょう。
「使い分け」や「正しい書き方」をクイズ形式で確認して、自信を持って使えるようになりましょう！
1. 箇条書きリスト (ul) と 番号付きリスト (ol)
情報を整理するリストには2種類あります。「順番が関係ないもの（買い物リストなど）」は <ul>、「順番が重要なもの（レシピなど）」は <ol> です。中身の項目はどちらも <li> で囲みます。
やってみよう！リストの使い分けクイズ（10問）
- 順序が関係ないリスト（Unordered List）を作るためのタグは ( ) です。
答えを見る
<ul>
（箇条書きリストの親要素です。）
- 順序や手順が重要なリスト（Ordered List）を作るためのタグは ( ) です。
答えを見る
<ol>
（番号付きリストの親要素です。）
- リストの中にある個々の項目（List Item）を囲むタグは ( ) です。
答えを見る
<li>
（ul の中にも ol の中にもこれを使います。）
<ul>で作ったリストの先頭には、通常自動的に何がつきますか？答えを見る
黒丸 (・)
（順序がないことを示します。）
<ol>で作ったリストの先頭には、通常自動的に何がつきますか？答えを見る
番号 (1, 2, 3...)
（順序があることを示します。）
- 「料理のレシピ（手順）」を書くのに適しているのは
<ul>と<ol>どっち？答えを見る
<ol>
（手順の順番が変わると料理が完成しないため。）
- 「おすすめの持ち物リスト」を書くのに適しているのは
<ul>と<ol>どっち？答えを見る
<ul>
（どの順番でカバンに入れても問題ないため。）
- 迷った時の見分け方は、「項目を ( ) しても意味が通じるか」を考えることです。
答えを見る
シャッフル (入れ替え)
（通じるなら ul、通じないなら ol です。）
<ol>を使う最大のメリットは、項目の追加・削除をした時に、番号がどうなることですか？答えを見る
自動で更新される (振り直される)
（手書きで「1. 2. 3.」と書く必要がありません。）
- 商品やサービスの「特徴」を列挙する場合、通常どちらを使いますか？
答えを見る
<ul>
（特徴の順番には優劣がないことが多いため。）
2. 引用 (blockquote, q) の基本知識
他者の言葉を借りて記事の信頼性を高める「引用」。長い引用には <blockquote>、文中の短い引用には <q> を使い分けます。
やってみよう！引用タグのクイズ（10問）
- まとまった長い文章や段落を引用する際に使う、ブロックレベルのタグは ( ) です。
答えを見る
<blockquote>
（ブラウザでは通常、字下げして表示されます。）
- 文中の短いフレーズや会話などを引用する際に使う、インラインのタグは ( ) です。
答えを見る
<q>
（Quoteの略です。）
<q>タグで囲んだ部分には、ブラウザが自動的に何の記号を付けますか？答えを見る
引用符 (「」や "")
<blockquote>の中に複数の段落がある場合、それぞれの段落は何のタグで囲むと構造が明確になりますか？答えを見る
<p>
（文章の構造を維持したまま引用します。）
- 引用を行う際、記事の信頼性を守るために必ず守らなければならないマナーは何ですか？
答えを見る
出典元 (引用元) を明記する
- ことわざや格言を文中で紹介する時（例：「時は金なり」と言います）、適しているタグは？
答えを見る
<q>
- 書籍の一節をそのまま「ドーン」と載せたい時、適しているタグは？
答えを見る
<blockquote>
- 引用タグを使うことで、読者に対してだけでなく、( ) に対しても「これは引用ですよ」と伝えることができます。
答えを見る
検索エンジン (やブラウザ)
<blockquote>で囲むと、多くのブラウザでは視覚的にどのように表示されますか？答えを見る
インデント (字下げ) される
（本文と区別がつきやすくなります。）
- 引用は、自分の主張を ( ) するための強力なツールです。
答えを見る
補強 (または裏付け)
3. 信頼の証・出典の明記 (cite)
引用元を正しく伝えるための cite 属性と <cite> タグ。機械向け（URL）と人間向け（作品名）の違いを整理しましょう。
やってみよう！出典記述クイズ（10問）
- 検索エンジンなどの機械に「引用元のURL」を伝えるために使う属性は ( ) です。
答えを見る
cite 属性
（例：
<blockquote cite="...">） - 読者（人間）に「作品名（本のタイトルやサイト名）」を表示するために使うタグは ( ) です。
答えを見る
<cite> タグ
（作品のタイトルを囲みます。）
cite属性は、画面上の記事には表示されますか？答えを見る
表示されない
（これは裏側の情報として扱われます。）
<cite>タグは、作品名ではなく「作者の名前（人名）」に使ってもよいですか？答えを見る
使わない (推奨されない)
（W3Cの仕様では、作品のタイトルに使用するとされています。）
- Webサイトから引用した場合、cite属性には何を記述しますか？
答えを見る
そのページのURL
cite属性は、どのタグの中に書くことができますか？（2つ）答えを見る
<blockquote> と <q>
- 夏目漱石の『吾輩は猫である』を引用元として示す場合、
<cite>タグで囲むべき部分はどこですか？答えを見る
吾輩は猫である (作品名)
cite属性を使うことは、SEO（検索エンジン最適化）の観点から有益ですか？答えを見る
有益である
（情報の出典関係を正しくGoogleに伝えられます。）
- 引用元を示すキャプション部分（著者名や作品名）全体を囲むのによく使われるタグは
<footer>や ( ) です。答えを見る
<figcaption>
（
<figure>要素とセットで使われます。） - 正しい引用と出典の明記は、記事の ( ) を高める源泉です。
答えを見る
信頼性
4. コード完成クイズ：正しいのはどっち？
最後は実践編です！作りたいリストや引用の形に合わせて、正しいタグや属性を選んでコードを完成させましょう。
やってみよう！コード穴埋めクイズ（10問）
-
「1. 下準備」「2. 調理」という手順リストを作りたい。
<[ ? ]>
<li>下準備</li>
<li>調理</li>
</[ ? ]>選択肢： A. ul / B. ol / C. dl
答えを見る
正解： B. ol
解説： 手順など順序が重要なリストには「ol (Ordered List)」を使います。
-
「・りんご」「・みかん」という買い物リストを作りたい。
<[ ? ]>
<li>りんご</li>
<li>みかん</li>
</[ ? ]>選択肢： A. ul / B. ol / C. list
答えを見る
正解： A. ul
解説： 順序が関係ない箇条書きには「ul (Unordered List)」を使います。
-
他サイトの長い文章を引用し、GoogleにそのURLを伝えたい。
選択肢： A. src / B. href / C. cite
答えを見る
正解： C. cite
解説： 引用元のURLを指定する属性は「cite」です。hrefではありません。
-
文中で「継続は力なり」という言葉を引用符付きで引用したい。
<p>昔から<[ ? ]>継続は力なり</[ ? ]>と言います。</p>選択肢： A. q / B. blockquote / C. span
答えを見る
正解： A. q
解説： 文中の短い引用には「q」タグを使います。
-
リストの項目を記述するタグを選びたい。
<ul>
<[ ? ]>項目1</[ ? ]>
</ul>選択肢： A. ul / B. il / C. li
答えを見る
正解： C. li
解説： リストの項目 (List Item) は「li」タグです。
-
引用元の「作品名」を明示したい。
選択肢： A. title / B. cite / C. book
答えを見る
正解： B. cite
解説： 作品のタイトルを表すのは「cite」タグです。
-
olタグを使った時、ブラウザで項目の先頭に表示されるのは？
<ol>...</ol>選択肢： A. 1. 2. 3. (数字) / B. ・ (黒丸)
答えを見る
正解： A. 1. 2. 3. (数字)
解説： ol (Ordered List) なので数字が表示されます。
-
長い引用文の中に、段落を作りたい。
<blockquote>
<[ ? ]>第一段落</[ ? ]>
<[ ? ]>第二段落</[ ? ]>
</blockquote>選択肢： A. p / B. br / C. div
答えを見る
正解： A. p
解説： 段落を表す「p」タグを使って文章構造を整理します。
-
ランキング形式（1位、2位...）の記事を書きたい。正しい親タグは？
<[ ? ]>
<li>1位：Aさん</li>
<li>2位：Bさん</li>
</[ ? ]>選択肢： A. ul / B. ol
答えを見る
正解： B. ol
解説： ランキングは順序に意味があるため「ol」を使います。
-
qタグの中に cite属性を書く場合の正しい記述は？
<q [ ? ]="URL">引用文</q>選択肢： A. href / B. link / C. cite
答えを見る
正解： C. cite
解説： qタグでもblockquoteタグでも、URL指定は「cite属性」です。
