目次：
【第7回】文字飾り、箇条書、表、フレーム

第1章

第3章

--　強調、上付き・下付き文字など（ｅｍ，strong, del, ins, sup, sub,..)

第4章

--グループ化要素、コメント等

基本的ブロックレベル要素（2）

【本節の目的】
基本的ブロックレベル要素の意味と使い方を習得する。ただし、table要素は少々複雑なので、次の章で学習する。

箇条書を行なうための各種リスト (ul、ol、dl)

[演習：各種リスト]

以下に説明する箇条書きなどを行なうリストについて学習して下さい。

まずはテキストをしっかり読んで、HTMLでのリスト(箇条書き)の作り方を習得して下さい。

各要素には、その要素に関する説明、サンプルHTMLおよびそのサンプルHTMLをWebブラウザで表示したイメージを示しています。必ず、自分で実際にHTMLファイルに書き込み・保存して、 Webブラウザで表示させ、表示される形式を確認して下さい。動作が分りにくいときは、複数の要素を追加したり、その内容を増やしたりして、再度Webブラウザで表示させ、確実に理解するようにして下さい。

実際の方法としては、以下のように行なって下さい。

「week07\ex1.html」を秀丸エディタで開きます。
本文(body要素の内容)に、以下のサンプルを参考にしながら、説明のある要素の利用サンプルを追加記述してください。
(註) 動作確認したサンプル要素は消さずに残しておき、新しい要素の確認の際は、追加記述するようにして下さい。勿論、記述ミスや勘違いした時は、修正した最終版を残して下さい。
追加したら、(上書き)保存し、Webブラウザで表示を確認します。

列挙リストと順序つきリスト (ul要素、ol要素、li要素)

要素の説明

リストを作成するには、ul要素もしくはol要素を用います。 ul要素は、列挙リスト (unorderd list) であり、項目の順序に関係なく列挙するタイプのリストです。一方、ol要素は、順序つきリスト (orderd list) であり、順番や序列を示すリストです。どちらの要素も、li要素でリスト項目 (list item)をひつひとつ定義します。
ul要素、ol要素ともに、ブロックレベル要素ですが、 li要素以外を含むことはできません。
また、li要素は、ブロックレベル要素で、インライン要素やテキストを含むことができ、更にブロックレベル要素も含むことができます。
Webブラウザでは、ul要素、ol要素全体がインデント(字下げ)表示されます。また、ul要素に含まれるli要素の先頭には、「・」のような黒丸が付加され、 ol要素に含まれるli要素の先頭には、「1.」「2.」という番号が自動的に付けられます。

サンプルHTML

<p>まずは、列挙リスト(ul要素)のサンプルです。熊大のPC実習室での注意事項です。</p>
<ul>
  <li>ガムも含めて室内は飲食禁止</li>
  <li>ほとんどの部屋が土足禁止</li>
  <li>パソコンの取扱は丁寧に、また、決められた手順で終了</li>
</ul>
<p>
次は、順序つきリスト(ol要素)のサンプルです。「情報基礎A・B」の授業の順序です。
</p>
<ol>
  <li>PCにログオンし、講義開始時刻から20分以内にWebCTで出席手続</li>
  <li>概要及び重要なポイントの説明ならびに進め方を聞く</li>
  <li>テキストを最初から順に読み/理解しながら、演習課題を行なう</li>
  <li>講義終了までに、その回の演習課題の結果をWebCTに提出</li>
</ol>
<p>これで、列挙リストと順序つきリストのサンプルを終ります。</p>

Webブラウザでの表示結果

ul_ol

リストの中でのリスト (リストの入れ子)

li要素に ul要素や ol要素を含むことで、リストの中でリストを作ることができます。このような状態を、「リストを入れ子にする」と呼びます。

サンプルHTML

<ol>
  <li>第2章
    <ul>
      <li>基本的ブロックレベル要素（2）</li>
      <li>table要素</li>
    </ul>
  </li>
  <li>第3章
    <ul>
      <li>インライン要素</li>
      <li>強調、上付き・下付き文字など</li>
    </ul>
  </li>
</ol>

Webブラウザでの表示結果

ulol_nest

定義型リスト (dl要素、dt要素、dd要素)

要素の説明

定義する用語とその説明で構成されるリストを「定義型リスト(definition list)」と呼びます。定義型リストは dl要素で定義し、用語 (definition term) を示す dt要素と、その説明 (definition description) である dd要素を含むことができます。 Webブラウザでは、dd要素がインデント(字下げ)されます。 dl要素は、ブロックレベル要素ですが、 dt要素とdd要素以外は含むことはできません。 dt要素はインライン要素であり、インライン要素やテキストを含むことができます。
dd要素は、ブロックレベル要素であり、インライン要素やテキストを含むことができ、更にブロックレベル要素も含むことができます。

(註) 定義型リストは、用語とその説明だけでなく、参考文献とその解説、住所録など、色々な使い方が考えられます。

サンプルHTML

<dl>
  <dt>見出し (h1-h6要素)</dt>
  <dd>
    <p>見出しを作る要素には、h1要素、h2要素、... h6要素の6レベルがあります。 
    h1要素がトップレベル(意味的に一番大きな見出し)であり、
    h6が一番下のレベルを表わします。</p>
    <p>h1-h6要素はブロックレベル要素であり、
    インライン要素やテキストを含むことができますが、
    ブロックレベル要素を含むことはできません。</p>
  </dd>

  <dt>パラグラフ (p要素)</dt>
  <dd>
    <p>パラグラフとは、「文章のひとかたまり」、つまり「段落」のことです。p要素は、
    パラグラフを定義するときに使います。</p>
    <p> p要素はブロックレベル要素であり、
　　インライン要素やテキストを含むことができますが、
    ブロックレベル要素を含むことはできません。</p>
  </dd>
</dl>

Webブラウザでの表示結果

その他のブロックレベル要素 (address、pre)

[演習：address要素、pre要素]

以下に説明する2つの要素について学習して下さい。

まずはテキストをしっかり読んで、address要素やpre要素の意味と働きを習得して下さい。

実際の方法としては、上の演習で使った「week07\ex1.html」を秀丸エディタで開き、以下のサンプルを参考にしながら、本文(body要素の内容)に、説明のある要素の利用サンプルを追加記述してください。
追加したら、(上書き)保存し、必ずWebブラウザで表示を確認して、各要素の動作を理解して下さい。

作者情報 (address要素)

要素の説明

文書ブロックをWebページの作者情報として定義するには、 address要素を使用します。 address要素には、ページの末尾の情報として、著作権情報や連絡先、公開日や更新日などを書いたりします。
address要素はブロックレベル要素で、インライン要素やテキストを含むことはできますが、 ブロックレベル要素を含むことはできません。

サンプルHTML

<address>
  公開日: 2005年10月23日、更新日: 2005年10月25日<br>
  Copyright (C) Senta Soujou 2005, All Rights Reserved.
</address>

Webブラウザでの表示結果

address

整形済みテキスト (pre要素)

要素の説明

文書ブロックを整形済みテキスト(preformatted text)として定義するには、 pre要素を使います。整形済みテキストとは、 HTML文書中の改行やスペースがそのままWebブラウザで表示されるテキスト (文書)のことです。
一般的には、プログラミング言語やHTML言語などのソースコードを示すのに使われます。 pre要素はブロックレベル要素で、インライン要素やテキストを含むことはできますが、 ブロックレベル要素を含むことはできません。
更に、この講義中に説明する予定のsup要素やdel要素といったテキストを修飾するための要素も含むことができません。

(註) 定義型リストは、用語とその説明だけでなく、参考文献とその解説、住所録など、色々な使い方が考えられます。

サンプルHTML

<pre>
       こんな風に、          pre要素中でスペースを空けたり、
改行したりすると、そのまま表示されます。
pre要素の中では、 強制改行を行なう br要素は必要無いですね。
</pre>

Webブラウザでの表示結果

pre

pre要素を使うときの注意

pre要素は、通常の要素と異なり、要素中の「空白」や「改行が」Webブラウザでそのまま表示されます。そのため、以下の注意が必要です。

開始タグ直後の空白や改行、ならびに、終了タグ直前の空白や改行もそのままWebブラウザに表示されます。ですから、
開始タグ、終了タグも含めてインデント(字下げ)せずに行頭から書いて下さい。
いつものようにTABキーでインデントさせると、 Webブラウザ本来のTABの長さである８文字間隔でインデントされます。ですから、
pre要素の本文でインデントが必要になっても、通常の空白文字でインデントして下さい。

良くない pre要素の使用例

<div>
  <pre>
    作成者：総情 先太
    公開日: 2005年10月23日、更新日: 2005年10月25日
  </pre>
    Copyright (C) Senta Soujou 2005, All Rights Reserved.
</div>

pre要素の内容 (作成者と公開日の行)が行頭から４文字分インデントされていますので、これらの行は半角４文字分字下げられた表示になります。一方、 Copyrightの行は、pre要素の外ですので、字下げされずに表示されます。また、preの終了タグ (</pre>) がインデントされていますので、その空白により、公開日の行の次に空白行ができます。

(註) まだ説明していない div要素を使っています。 div要素には、文の塊(かたまり)をブロック化する働きがありますが、第10回に改めて説明しますので、ここでは p要素と同じようなものと考えて下さい。(p要素は、ブロックレベル要素を含むことができませんので、ここで div要素の代わりには使えません。)

Webブラウザでの表示結果

pre_NG