Chapter02 テキストとリスト

概要と目標 テキスト関連の要素と、
リスト関連の要素を覚えよう。

HTMLの中でもよく使う、テキスト関連の要素とリスト関連の要素を学習しましょう。

今回のゴール

RERUN

新しいウインドウで表示する

配置ルールとカテゴリ 要素は好きなところに
配置できるわけじゃない。

これからbody要素の中で使う要素を多数紹介していくが、
HTMLの各要素は、どこにでも配置できるわけではない。
「〇〇要素の中には、△△要素が配置できる」などの配置ルールがある。
HTML5では、自分の中に配置できる要素のことを「コンテンツ・モデル」と呼ぶ。
このコンテンツ・モデルの多くは、各要素を分類するカテゴリー名で指定されており、
「〇〇要素のコンテンツ・モデルは、△△カテゴリー」というように示される。
これは、「〇〇要素の中には、△△カテゴリーに属している要素を配置してよい」という意味になる。

HTML5のカテゴリ

カテゴリーは、HTML5より前は２つのカテゴリーで要素を分類していたが、
HTML5からは、主要なカテゴリーだけでも7つある。
ただ、今はまだどの要素が、どのカテゴリーに属するかを覚える必要はないので、
さっと眺める程度にしておく。

HTMLのカテゴリ
カテゴリ 概要 要素
メタデータ・コンテンツ
（Metadata content）		 ページの情報を指定する要素などが分類されている。基本的には画面に表示されない要素。 base, command, link, meta, noscript, script, style, title
フロー・コンテンツ
（Flow content）		 フロー・コンテンツは、body要素の中なら基本的にどこにでも配置できる要素が分類されます。従って、ほとんどの要素はこのフロー・コンテンツになります。 a, abbr, address, area(map要素の子孫だった場合), article, aside, audio, b, bdi, bdo, blockquote, br, button, canvas, cite, code, command, datalist, del, details, dfn, div, dl, em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr, i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, menu, meter, nav, noscript, object, ol, output, p, pre, progress, q, ruby, s, samp, script, section, select, small, span, strong, style（scoped属性が存在している場合), sub, sup, svg, table, textarea, time, ul, var, video, wbr, テキスト
セクショニング・コンテンツ
（Sectioning content）		 章・節・項のようにアウトライン（階層構造）を形成する要素が分類されている。 article, aside, nav, section
ヘディング・コンテンツ
（Heading content）		 見出しを示す要素。 h1, h2, h3, h4, h5, h6
フレージング・コンテンツ
（Phrasing content）		 主にテキストの一部に意味や役割を与える要素が分類されている。 a(フレージング・コンテンツのみを含んでいる場合), abbr, area(map要素の子孫の場合), audio, b, bdi, bdo, br, button, canvas, cite, code, command, datalist, del(フレージング・コンテンツのみを含んでいる場合), dfn, em, embed, i, iframe, img, input, ins(フレージング・コンテンツのみを含んでいる場合), kbd, keygen, label, map(フレージング・コンテンツのみを含んでいる場合), mark, math, meter, noscript, object, output, progress, q, ruby, s, samp, script, select, small, span, strong, sub, sup, svg, textarea, time, var, video, wbr, テキスト
エンベッディッド・コンテンツ
（Embedded content）		 主にテキストの一部に意味や役割を与える要素が分類されている。 audio, canvas, embed, iframe, img, math, object, svg, video
インタラクティブ・コンテンツ
（Interactive content）		 ユーザーが何かしらの操作（クリックなど）をすることができる要素が分類されている。 a, audio(controls属性が存在している場合), button, details, embed, iframe, img(usemap属性が存在している場合), input(type属性が Hidden 状態でない場合), keygen, label, menu(type属性が toolbar 状態の場合), object(usemap属性が存在している場合), select, textarea, video(controls属性が存在している場合)

多くの要素は1つのカテゴリーにのみ属しているわけではなく、複数のカテゴリーに属していたりします。
また、どのカテゴリーにも属さない要素もあります。

プチ問題

下記の配置ルールは正しいか考えてみましょう。
h1要素のコンテンツモデル： フレージング・コンテンツ

配置ルールのプチ問題
<h1><p>吾輩は猫である。</p></h1>

見出しと段落 見出しは階層構造を意識して、
説明文や概要文は段落に。

body 要素の中で使うタグは様々なものがある。
まずはテキスト関連でよく使う見出しを表す h1 〜 h6 要素と
段落を表す p要素を学習しよう。

段落と見出しの要素
要素名 意味・役割 カテゴリ コンテンツ・モデル
h1 ~ h6 heading（ヘディング）の略で、見出しを表す
  • フロー・コンテンツ
  • ヘディング・コンテンツ
 フレージング・コンテンツ
p paragraph（パラグラフ）の略で、段落を表す フロー・コンテンツ フレージング・コンテンツ

見出しの要素を使ってみよう。

見出しは、h1 〜 h6 要素で表す。
最も上位階層の見出しが h1要素、最も下位階層の見出しが h6要素となり、
文章の各見出しはこの6つの要素を、階層構造を意識して使い分ける必要がある。

hn要素の使い方
<h1>大見出し</h1>
<h2>中見出し</h2>
<h3>小見出し</h3>
  1. 「html-lessons」 › 「chapter02」 › 「text」フォルダ内にある「index.html」をテキストエディタで開く
  2. 文章をよく読み、見出しの部分に適切な見出しの要素を記述
chapter02/text/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Dummy 株式会社</title>
</head>
<body>
  <h1>Dummy 株式会社</h1>
  私たちは、わくわくを作る会社です。
  <h2>私たちにできること</h2>
  私たちは、下記の技術でお客様のWebサイトを形に出来ます。
  <h3>HTMLで文章に意味を付ける</h3>
  Webサイトの文章に正しくタグを付けることが出来ます。
  <h3>CSSでデザインする</h3>
  CSSを使ってレイアウトや装飾を行うことが出来ます。
  ただし、まだCSSの勉強をしていないので今は無理です。
  <h3>JavaScriptで動きを付ける</h3>
  スライドショーなどの動きをつけることが出来ます。
  ただし、まだJavaScriptの勉強をしていないので今は無理です。
  <h2>新着情報</h2>
  HTMLの勉強を開始しました。
  © Dummy 2018 Dummy All Rights Reserved.
</body>
</html>

段落の要素を使ってみよう。

段落は、p 要素で表す。
Webサイト上のほとんどの説明文や、概要文はp 要素でマークアップする。

p要素の使い方
<p>説明文や概要文などの段落</p>
  1. 文章をよく読み、説明文や、概要文に段落の要素を記述
chapter02/text/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Dummy 株式会社</title>
</head>
<body>
  <h1>Dummy 株式会社</h1>
  <p>私たちは、わくわくを作る会社です。</p>
  <h2>私たちにできること</h2>
  <p>私たちは、下記の技術でお客様のWebサイトを形に出来ます。</p>
  <h3>HTMLで文章に意味を付ける</h3>
  <p>Webサイトの文章に正しくタグを付けることが出来ます。</p>
  <h3>CSSでデザインする</h3>
  <p>CSSを使ってレイアウトや装飾を行うことが出来ます。
  ただし、まだCSSの勉強をしていないので今は無理です。</p>
  <h3>JavaScriptで動きを付ける</h3>
  <p>スライドショーなどの動きをつけることが出来ます。
  ただし、まだJavaScriptの勉強をしていないので今は無理です。</p>
  <h2>新着情報</h2>
  <p>HTMLの勉強を開始しました。</p>
  <p>© Dummy 2018 Dummy All Rights Reserved.</p>
</body>
</html>
  1. 上書き保存
  2. 「html-lessons」 › 「chapter02」 › 「text」フォルダ内の「index.html」をダブルクリック。
  3. ブラウザが開くので確認する。
    （一般的なブラウザは、hn 要素の部分は文字サイズが大きくなる）
ブラウザでの表示例

RERUN

新しいウインドウで表示する

特殊な記述が必要な文字 HTMLには、直接入力できない文字がある。

「<」や「>」はHTMLのタグに使う記号なので、直接入力することができない。
これらのように、HTMLで何かしらの役割を持っていたり、
キーボードでは直接入力できない文字は、「&〇〇〇;」の書式で記述する必要がある。
これを文字参照と呼ぶ。

主な特殊な記述が必要な文字
ブラウザで表示する文字 文字参照
< &lt;
> &gt;
" &quot;
& &amp;
© &copy;
¥ &yen;

特殊な記述が必要な文字を
使ってみよう。

  1. 「html-lessons」 › 「chapter02」 › 「text」フォルダ内にある「index.html」をテキストエディタで開く
  2. 「©」マークを文字参照する
chapter02/text/index.html
<p>&copy; Dummy 2018 Dummy All Rights Reserved.</p>
  1. 上書き保存
  2. 「html-lessons」 › 「chapter02」 › 「text」フォルダ内の「index.html」をダブルクリック。
  3. ブラウザが開くので「©」が表示されているかを確認する。
ブラウザでの表示例

RERUN

新しいウインドウで表示する

改行 テキストエディタで改行しても、
ブラウザでは改行されない。

テキストエディタで、いくらエンターキーで改行してもブラウザでは改行されない。
改行を行うには、改行を表すbr要素を使う。

改行の要素
要素名 意味・役割 カテゴリ コンテンツ・モデル
br line（ライン） break（ブレーク）の略で、改行を表す
  • フロー・コンテンツ
  • フレージング・コンテンツ
 なし （空要素）

改行してみよう。

改行は、br 要素で表す。
改行したい箇所に<br>タグを記述する。
br 要素は、エンプティ要素のため、終了タグは必要ない。

  1. 「html-lessons」 › 「chapter02」 › 「text」フォルダ内の「index.html」をテキストエディタで開く
  2. 下記を参考に改行の要素を記述する
chapter02/text/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Dummy 株式会社</title>
</head>
<body>
  <h1>Dummy 株式会社</h1>
  <p>私たちは、わくわくを作る会社です。</p>
  <h2>私たちにできること</h2>
  <p>私たちは、下記の技術でお客様のWebサイトを形に出来ます。</p>
  <h3>HTMLで文章に意味を付ける</h3>
  <p>Webサイトの文章に正しくタグを付けることが出来ます。</p>
  <h3>CSSでデザインする</h3>
  <p>CSSを使ってレイアウトや装飾を行うことが出来ます。<br>
  ただし、まだCSSの勉強をしていないので今は無理です。</p>
  <h3>JavaScriptで動きを付ける</h3>
  <p>スライドショーなどの動きをつけることが出来ます。<br>
  ただし、まだJavaScriptの勉強をしていないので今は無理です。</p>
  <h2>新着情報</h2>
  <p>HTMLの勉強を開始しました。</p>
  <p>&copy; Dummy 2018 Dummy All Rights Reserved.</p>
</body>
</html>
  1. 上書き保存
  2. 「html-lessons」 › 「chapter02」 › 「text」フォルダ内の「index.html」をダブルクリック。
  3. 改行されていることを確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する

改行の注意点
br要素は、住所などの、文の分割が重要なところに利用する。
従って、スペースを空ける目的では使用しない。
視覚的な表現が目的な場合は全て、CSS（Webサイトをデザインするための言語）で行う。
br要素のサンプル
<p>
  〒550-XXXX<br>
  大阪府大阪市架空区架空町1-1-1
</p>

強調と重要 特定の単語を強調したり、
重要なメッセージを伝えたり。

「今だけ送料無料」などのように文章の一部を強調したり、
「混ぜるな危険」などの重要なメッセージを伝えたいことがある。
強調は、em要素、重要性は、strong要素で表す。
これらを含め、文章中の一部の単語や文章に使う要素は、
フレージング・コンテンツというカテゴリーに分類されている。

強調と重要の要素
要素名 意味・役割 カテゴリ コンテンツ・モデル
em emphasis（エンファサイズ）の略で、強調を表す
  • フロー・コンテンツ
  • フレージング・コンテンツ
 フレージング・コンテンツ
strong 重要であることを表す HTML5　改
  • フロー・コンテンツ
  • フレージング・コンテンツ
 フレージング・コンテンツ

em要素を使ってみる。

em要素は、強調したいテキストに利用する。
強調する箇所によって、意味やニュアンスが変わる。

em要素の使い方
<em>強調したいテキスト</em>
em要素のサンプル
<p>海賊王に、<em>おれは</em>なる</p>
  1. 「html-lessons」 › 「chapter02」 › 「text」フォルダ内の「index.html」をテキストエディタで開く
  2. 下記を参考に、h1要素の下にある、「わくわく」という文字を強調する
chapter02/text/index.html
<p>私たちは、<em>わくわく</em>を作る会社です。</p>
  1. 上書き保存
  2. 「html-lessons」 › 「chapter02」 › 「text」フォルダ内の「index.html」をダブルクリック。
  3. 「わくわく」が強調されたかを確認
    （一般的なブラウザは、斜体で表示される）
ブラウザでの表示例

RERUN

新しいウインドウで表示する

strong要素を使ってみる。

strong要素は、重要性の高いテキストに利用する。

strong要素の使い方
<strong>重要性の高いテキスト</strong>
strong要素のサンプル
<p><strong>酸性タイプの製品と一緒に使う（まぜる）と有害な塩素ガスが出て危険</strong></p>
  1. 「html-lessons」 › 「chapter02」 › 「text」フォルダ内の「index.html」をテキストエディタで開く
  2. 下記を参考に、重要なメッセージを strong要素でマークアップ
chapter02/text/index.html
  <h1>Dummy 株式会社</h1>
  <p>私たちは、<em>わくわく</em>を作る会社です。</p>
  <h2>私たちにできること</h2>
  <p>私たちは、下記の技術でお客様のWebサイトを形に出来ます。</p>
  <h3>HTMLで文章に意味を付ける</h3>
  <p>Webサイトの文章に正しくタグを付けることが出来ます。</p>
  <h3>CSSでデザインする</h3>
  <p>
    CSSを使ってレイアウトや装飾を行うことが出来ます。<br>
    ただし、<strong>まだCSSの勉強をしていないので今は無理</strong>です。
  </p>
  <h3>JavaScriptで動きを付ける</h3>
  <p>
    スライドショーなどの動きをつけることが出来ます。<br>
    ただし、<strong>まだJavaScriptの勉強をしていないので今は無理</strong>です。
  </p>
  <h2>新着情報</h2>
  <p>HTMLの勉強を開始しました。</p>
  <p>© 2018 Dummy All Rights Reserved.</p>
  1. 上書き保存
  2. 「html-lessons」 › 「chapter02」 › 「text」フォルダ内の「index.html」をダブルクリック。
  3. 重要なメッセージが太字になったかを確認
    （一般的なブラウザは、太字で表示される）
ブラウザでの表示例

RERUN

新しいウインドウで表示する

著作権表記 著作権表記は、small 要素で。

一般的なWEBサイトは、ページの最下部にそのサイトの著作権情報を記す記述がある。
HTML5からは、このような著作権情報をマークアップするのに最適な要素が登場した。

著作権表記の要素
要素名 意味・役割 カテゴリ コンテンツ・モデル
small small（スモール） font（フォント）の略で、著作権表記や免責などの細目テキストを表す HTML5　改
  • フロー・コンテンツ
  • フレージング・コンテンツ
 フレージング・コンテンツ

small要素を使ってみる。

small要素は、著作権表記や免責などに利用する。

small要素の使い方
<small>著作権表記や免責などの細目テキスト</small>
  1. 「html-lessons」 › 「chapter02」 › 「text」フォルダ内の「index.html」をテキストエディタで開く
  2. 著作権表記を、small要素でマークアップ
chapter02/text/index.html
<p><small>&copy; 2018 Dummy All Rights Reserved.</small></p>
  1. 上書き保存
  2. 「html-lessons」 › 「chapter02」 › 「text」フォルダ内の「index.html」をダブルクリック。
  3. 正しくマークアップされたかを確認
    （一般的なブラウザは、小さなフォントで表示される）
ブラウザでの表示例

RERUN

新しいウインドウで表示する

箇条書き 箇条書きは2種類ある。

箇条書きの各項目は リスト項目を表す、li要素を使う。
ただし、単に箇条書きと言っても順不同型の箇条書きと、番号順の箇条書きがある。

箇条書き関連の要素
要素名 意味・役割 カテゴリ コンテンツ・モデル
li list（リスト） item（アイテム）の略で、
リスト項目を表す 		なし フロー・コンテンツ
ul unordered（アンオーダード） list（リスト）の略で、
順不同型リストを表す 		フロー・コンテンツ 0個以上のli要素
ol ordered（オーダード） list（リスト）の略で、
番号順リストを表す 		フロー・コンテンツ 0個以上のli要素

順不同型リストを使ってみよう。

順不同型リストは、まず、各リスト項目をli 要素でマークアップする。
そして、それらli 要素たちを、ul 要素で囲む。

順不同型リストの使い方
<ul>
  <li>リスト項目1</li>
  <li>リスト項目2</li>
  <li>リスト項目3</li>
</ul>
  1. 「html-lessons」 › 「chapter02」 › 「list」フォルダ内の「index.html」をテキストエディタで開く
  2. 材料の部分を順不同型リストにする
chapter02/list/index.html
<ul>
  <li>卵</li>
  <li>醤油</li>
  <li>きざみのり</li>
</ul>
  1. 上書き保存
  2. 「html-lessons」 › 「chapter02」 › 「list」フォルダ内にある「index.html」をダブルクリック。
  3. 行頭記号が付いたリストになっていることを確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する

番号順リストを使ってみよう。

番号順リストは、まず、各リスト項目をli 要素でマークアップする。
そして、それらli 要素たちを、ol 要素で囲む。

番号順リストの使い方
<ol>
  <li>リスト項目1</li>
  <li>リスト項目2</li>
  <li>リスト項目3</li>
</ol>
  1. 「html-lessons」 › 「chapter02」 › 「list」フォルダ内の「index.html」をテキストエディタで開く
  2. 作り方の部分を順不同型リストにする
chapter02/list/index.html
<ol>
  <li>お茶碗にご飯をよそう</li>
  <li>ご飯の上に卵かける</li>
  <li>醤油ときざみのりをかけて混ぜる</li>
</ol>
  1. 上書き保存
  2. 「html-lessons」 › 「chapter02」 › 「list」フォルダ内にある「index.html」をダブルクリック。
  3. 番号が付いたリストになっていることを確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する

用語説明リスト 用語を説明するリストもある。

用語説明型のリストは、ある用語について説明をする時に使う。
主に、用語集や、よくある質問、会社概要、お問い合わせフォームなどで活用する。

箇条書き関連の要素
要素名 意味・役割 カテゴリ コンテンツ・モデル
dl description（ディスクリプション） list（リスト）の略で、
用語説明リストを表す HTML5　改 		フロー・コンテンツ 1つ以上のdt 要素と、その後に続く1つ個以上のdd 要素のグループが0個以上。もしくは それらを子要素に持つ div要素
dt description（ディスクリプション） term（ターム） の略で、
説明する用語を表す HTML5　改 		なし フロー・コンテンツ
ただし、子孫にセクショニング・コンテンツの要素、ヘディング・コンテンツの要素、header 要素、footer 要素は配置できない
dd description（ディスクリプション）, definition（デフィニション） の略で、
説明や定義を表す HTML5　改 		なし フロー・コンテンツ

用語説明リストを使ってみよう。

用語説明リストは、dl 要素の中に、dt 要素で、説明する用語を記述し、
その後にdd 要素で、その用語の説明や定義を記述する。
これら、dt 要素、dd 要素をグループを複数配置することができる。

用語説明リストの使い方
<dl>
  <dt>用語1</dt>
  <dd>用語1に対する説明文や定義</dd>
  <dt>用語2</dt>
  <dd>用語2に対する説明文や定義</dd>
</dl>
  1. 「html-lessons」 › 「chapter02」 › 「list」フォルダ内の「index.html」をテキストエディタで開く
  2. 補足情報の部分を用語説明リストにする
chapter02/list/index.html
<dl>
  <dt>所要時間</dt>
  <dd>1分</dd>
  <dt>カロリー</dt>
  <dd>310 Kcal</dd>
</dl>
  1. 上書き保存
  2. 「html-lessons」 › 「chapter02」 › 「list」フォルダ内の「index.html」をダブルクリック。
  3. 用語説明リストになっているかを確認
    （一般的なブラウザは、dd 要素の部分にインデントが付く）
ブラウザでの表示例

RERUN

新しいウインドウで表示する

練習問題 今回の理解度をチェック。

「chapter02」 › 「training」フォルダ内に「index.html」を作成し、
下記の問題を解いて下さい。

ブラウザでの完成例

RERUN

新しいウインドウで表示する

    • ファイル名： index.html
    • HTMLのバージョン： HTML 5
    • 文字コード： UTF-8
    • タイトルの文字列： "絶品！鳥のからあげの作り方"
    • 文字参照する記号： "©"
    • 改行の場所： "人気のからあげの作り方を紹介します。"の後
    • 強調する文字列： "誰もが"
    • 重要を表す文字列： "揉み込むように混ぜる"
  12. 用語 説明・定義
    たれ タッパーに入れた、おろし生姜、おろしにんにく、醤油のこと
    揉み込む 揉んで中に入れること
解答例
chapter02/training/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>絶品！鳥のからあげの作り方</title>
</head>
<body>
  <h1>絶品！鳥のからあげの作り方</h1>
  <p>
    人気のからあげの作り方を紹介します。<br>
    <em>誰もが</em>簡単に作れる、サックサクのからあげです。
  </p>

  <h2>材料（２〜3人分）</h2>
  <ul>
    <li>鳥もも肉・・・2枚（約600g）</li>
    <li>おろし生姜・・・1かけら</li>
    <li>おろしにんにく・・・1かけら</li>
    <li>醤油・・・大さじ2</li>
    <li>片栗粉・・・適量</li>
    <li>薄力粉・・・適量</li>
    <li>揚げ油・・・適量</li>
  </ul>
  <h2>作り方</h2>
  <ol>
    <li>鶏肉を一口サイズに切り、タッパーに入れる</li>
    <li>1のタッパーに、おろし生姜、おろしにんにく、醤油が入れてよく混ぜる</li>
    <li>2のタッパーを冷蔵庫で2時間程度寝かせる</li>
    <li>ボウルに片栗粉と薄力粉を合わせて混ぜておく</li>
    <li>鶏肉を3のボウルに入れ、全ての鶏肉に衣を付ける</li>
    <li>フライパンに揚げ油を1cm程いれて170度まで熱する</li>
    <li>フライパンに鶏肉を入れてきつね色になるまで揚げる</li>
  </ol>
  <h3>作り方のポイント</h3>
  <p>鶏肉にたれを付ける時は<strong>揉み込むように混ぜる</strong>と味が染み込みます。</p>
  <dl>
    <dt>たれ</dt>
    <dd>タッパーに入れた、おろし生姜、おろしにんにく、醤油のこと</dd>
    <dt>揉み込む</dt>
    <dd>揉んで中に入れること</dd>
  </dl>
  <p><small>&copy; 2018 Dummy Recipe.</small></p>
</body>
</html>

解答例は全問題のチェックボックスが on になるとご覧いただけます。

まとめ HTMLの各文章には適切なタグを付ける

HTMLは文章に対して、適切なタグを使って、
意味や役割をマークアップする必要がある。

  • 文章に対して、適切な要素を使う
  • 直接入力できない文字は文字参照をする
  • 箇条書きは、順不同型と、番号順がある