【HTML50分講座】HTMLのOL・ULタグにリスト表示とコメントアウトーChapter05

今回は文章の本文を記述する＜BODY＞タグ内からOLタグを説明していきます。

前回の「Chapter04」の後、当講座に進んでください。

HTML文章の本文を記述する＜BODY＞タグ

BODYタグとは、HTML文章の本文を表すタグになります。

BODYタグ内はWEB（ブラウザ）に表示されます。

OLタグ

OLタグとは、ordered list（順序のあるリスト）の略語で、順序のある番号付きのリストを表示する際に使用するタグになります。

記述例：

  1. <ol type=”リストの種類” start=”任意の数字から開始”>
  2. <li>１番目のリスト</li>
  3. <li>２番目のリスト</li>
  4. <li>３番目のリスト</li>
  5. </ol>

type属性（必須・省略可）

type属性を使って、リストのタイプを指定します。ちなみに、タイプは”1（アラビア数字）”、”A（アルファベット大文字）”、”a（アルファベット小文字）”、”Ⅰ（ローマ数字）”から選択します。type属性を指定しない場合は、”1（アラビア数字）”が選択された状態になります。

例えば、type=”1″にした場合、

  1. りんご
  2. みかん
  3. ぶどう

と表示されます。

start属性（任意）

start属性を使って、リストに表示される開始番号を指定します。例えば、数値の5から開始したい場合は、start=”5″と記入します。また、アルファベットであっても、開始番号を数字で指定してください。

ULタグ

ULタグとは、unordered list（順序がないリスト）の略語で、順序がない箇条書きのリストを表示する際に使用するタグです。

記述例：

  1. <ul type=”リスト項目のマーク”>
  2. <li>１番目のリスト</li>
  3. <li>２番目のリスト</li>
  4. <li>３番目のリスト</li>
  5. </ul>

type属性（必須・省略可）

type属性を使って、リストのマークを指定します。ちなみに、マークは”disc（●黒丸アイコン）”、”circle（〇白丸アイコン）”、”square（□四角アイコン）”から選択します。type属性を指定しない場合は、”disc”が選択された状態になります。

例えば、type=”disc”にした場合、

  • りんご
  • みかん
  • ぶどう

と表示されます。

LIタグ

LIタグとは、list item（リストアイデム,項目名）の略語で、リストの項目を表示するために使用するタグです。LIタグは<ul>～</ul> または<ol>～</ol>の間で使用します。

記述例： <li type=”リストの種類”>

type属性（任意）

type属性を使って、リストのタイプ（マーク）を個別に指定することができます。

  1. <li type=”disc”>１番目のリスト</li>
  2. <li type=”disc”>２番目のリスト</li>

HTMLのコメントアウト

自分自身、若しくは他のプログラマーがHTMLのソースコードを見た時、一目で理解できるようなコメントを入力していきます。

HTMLでコメントアウトを記述する場合は、<!–で始まり、–>で終わります。「!– –」とは、HTMLソースの中にコメント（注釈）を記述するためのものです。※コメント文は、当然にWEBブラウザ上には表示されません。

記述例：<!– これはコメント文です。–>

今日の問題

まず始めに、以下をメモ帳で記述し、Chapter05.htmlファイルとして保存してください。

  1. <html>
  2. <head>
  3. <meta charset=”UFT-8″>
  4. <title>ここページのタイトルです</title>
  5. <meta name=”description” content=”ページの要約文”>
  6. </head>
  7. <body>
  8. <section>
  9. <h2>OLとULタグの勉強</h2>
  10. <ul>
  11. <li>おはようございます。</li>
  12. <li>こんにちは。</li>
  13. <li>おやすみなさい。</li>
  14. <ul>
  15. </section>
  16. <bod>
  17. </html>

問1

Chapter05.html内のリストに3項目を追加してください（朝ごはん・昼ごはん・夜ごはん）。また、追加する場所は、「朝ごはん」は「おはようございます」の１つ後に、「昼ごはん」は「こんにちは。」の1つ後に、「夜ごはん」は「おやすみなさい。」の1つ後に追加してください。

問2

Chapter05.html内のリストタイプを、”〇白丸アイコン”になるように変更してください。

問3

Chapter05.html内のリストタイプを、”アルファベット小文字”になるように変更してください。また、開始番号は”D”から始まるようにしてください。

問4

Chapter05.html内のリスト項目にある文字を赤文字に変更してください。

宿題

Chapter05.htmlのソースコードが理解し易いように、コメント文を追加してください。

コメント