私のホームページへ - 前の授業へ - 次の授業へ

情報処理IIA（HTML入門）第5回

目次
  1. HTML構造を示すタグ
  2. 注釈と字下げ
  3. リストの入れ子
  4. 表
  5. 演習5
  6. レポート課題

HTML構造を示すタグ

HTML構造

これまでに、フォントの切り替えなどスタイルを示すタグ、見出しや段落など文書内容を示すタグなどを説明しました。 この他の基本的なタグに、HTML構造を示すタグがあります。 具体的には次の4つが重要です。

<html>
<head>
<title>
<body>

注意１： <title>〜</title>の内容は、単純な文字列に限ります。 タグは入れないでください。

注意２： ブラウザの全体的な字の色と背景色は、<body>タグでstyle属性を用いると指定できます。

注釈と字下げ

注釈

ホームページを作っていると、書きかけの文章やちょっとしたメモなど、表示してほしくはないけれどファイルには残しておきたい部分ができたりします。 ブラウザは、HTMLファイルで<!--からそれ以降の最初の-->までを注釈（コメント）と見なします。 注釈は表示されません。 したがって、表示してほしくない部分は、<!--〜-->で囲めばよいのです。

例
<h2>はじめに</h2>

<!-- ここは最後に書く。 -->

<h2>JavaScriptへようこそ</h2>
はじめに

JavaScriptへようこそ

注釈の終わりは-->のはずですが、>だけで注釈の終わりと見なされる場合があります。 見出し「はじめに」を表示したくなくなった場合を考えますと、 

<!-- <h2>はじめに</h2> -->

このように注釈を指定すると、「はじめに」が表示されてしまうかもしれません。 確実な方法は、次のようにすることです。 

<!-- h2 --><!-- はじめに --><!-- /h2 -->

字下げ

タグをたくさん使うようになりますと、開始タグと終了タグの対応が分かりにくくなってきます。 終了タグを忘れたり、入れ子の構造を崩したりしないためにも、HTMLファイルを見ると、タグで囲まれている範囲がすぐに分かるようにしたいです。

多くのプログラミング言語では、字下げを用いてプログラムの構造を見やすくしています。 この方法は、HTMLにも通用します。 プログラムのようにHTMLファイルで字下げをすると、開始タグと終了タグの対応が分かりやすくなります。

字下げの規則は、ホームページの作者が自分で分かりやすいように決めることです。 この授業での例を参考にして、自分なりの規則を作ってください。

リストの入れ子

HTMLで番号付きリストを作るには、2種類のタグが必要でした。 まず、<li>〜</li>で囲んで項目を作り、そして項目の並びを<ol>〜</ol>で囲んで番号付きリストを作りました。 <li>〜</li>に囲まれる内容は色々なものが許されています。 番号付きリストであってもかまいません。 そのようなリストを入れ子のリストとよびます。 番号付きリストが入れ子になっていると、ブラウザは内側のリストをさらに字下げして表示します。

例
目次
<ol>
  <li>はじめに</li>
  <li>
    JavaScriptへようこそ
    <ol>
      <li>JavaScriptとは</li>
      <li>簡単なJavaScriptプログラム</li>
    </ol>
  </li>
  <li>JavaScriptの文法</li>
</ol>
目次
1. はじめに
2. JavaScriptへようこそ
1. JavaScriptとは
2. 簡単なJavaScriptプログラム
3. JavaScriptの文法

番号なしリストでも、入れ子のリストが作れます。 内側のリストはさらに字下げされ、外側とは異なる記号が項目につきます。

例
<p>JavaScriptの変数名には、次の記号が使えます。</p>
<ul>
  <li>
    アルファベット
    <ul>
      <li>大文字</li>
      <li>小文字</li>
    </ul>
  </li>
  <li>数字</li>
  <li>アンダースコア（<code>_</code>）</li>
</ul>
<p>ただし、先頭に数字を用いることはできません。</p>
JavaScriptの変数名には、次の記号が使えます。

● アルファベット
○ 大文字
○ 小文字
● 数字
● アンダースコア（_）

ただし、先頭に数字を用いることはできません。

番号付きリストの中で、番号なしリストを用いることもできますし、番号なしリストの中で、番号付きリストを用いることもできます。 また、定義リストの説明の中でも、番号付きリストや番号なしリストが使えます。

表

表は、物事を整理し、分かりやすく書き表すことができる、便利な表現方法です。 HTMLにも、表に関するタグがいくつか用意されています。 これらを用いると、表を使ったホームページが書けます。

表は、何かが書き込まれた長方形を縦横に並べてできています。 ここでは、この長方形をセルとよびます。 表の行とは、セルが横に並んだものを言います。 表の列とは、セルが縦に並んだものです。 表とは、行を縦に並べたものだと言えますし、列を横に並べたものだとも言えます。 HTMLでは、表を、行を縦に並べたものだととらえます。

HTMLを使って表を作るには、数種類のタグを組み合わせて使う必要があります。 例として、次の表を作成することにし、この作り方を順を追って説明します。

記号読み方バイト数
KBキロバイト1,024
MBメガバイト1,048,576
GBギガバイト1,073,741,824

はじめに、1 行目、2 行目、…と、セルの中身を書き出します。

記号 読み方 バイト数
KB キロバイト 1,024
MB メガバイト 1,048,576
GB ギガバイト 1,073,741,824

次に、各セルを 2 種類に分類します。 これは、表見出しかデータかという分け方です。 ブラウザは、HTMLファイルで<th>〜</th>で囲まれた部分を表見出しと見なします。 <td>〜</td>で囲まれた部分をデータと見なします。 ブラウザは、表見出しをボールド体の中央揃えで表示します。

この例では、「記号」、「読み方」、「バイト数」の 3 つのセルを表見出し、その他のセルをデータと見ることにします。 HTMLファイルは次のようになります。 

<th>記号</th><th>読み方</th><th>バイト数</th>
<td>KB</td><td>キロバイト</td><td>1,024</td>
<td>MB</td><td>メガバイト</td><td>1,048,576</td>
<td>GB</td><td>ギガバイト</td><td>1,073,741,824</td>

HTMLにおいては、セルを横に並べたものが行で、行を縦に並べたものが表でした。 <th>タグと<td>を使ってセルの指定ができたので、残りは行の指定と表の指定となります。 <th>〜</th>または<td>〜</td>で囲まれたものの並びを<tr>〜</tr>で囲むと、ブラウザはその範囲を表の行と見なします。 <tr>〜</tr>で囲まれたものの並びを<table>〜</table>で囲むと、ブラウザはその範囲を表と見なします。

この例では、3つのセルで行になり、4つの行で表になっています。 HTMLファイルは以下の通りです。 

<table>
<tr><th>記号</th><th>読み方</th><th>バイト数</th></tr>
<tr><td>KB</td><td>キロバイト</td><td>1,024</td></tr>
<tr><td>MB</td><td>メガバイト</td><td>1,048,576</td></tr>
<tr><td>GB</td><td>ギガバイト</td><td>1,073,741,824</td></tr>
</table>
記号読み方バイト数
KBキロバイト1,024
MBメガバイト1,048,576
GBギガバイト1,073,741,824

表のように表示されましたが、枠がありません。 <table>タグには、外枠の幅を指定する属性borderが用意されています。 <table border="px">〜</table>で囲むと、外枠の幅がpxピクセル（画素）の表を表示します。 ただし、pxが0だと外枠も内枠も表示しません。 単に<table>〜</table>で囲むと、pxが0だと見なされますので、枠のない表になったのです。

border属性を用いて、外枠の幅を1ピクセルにします。 HTMLファイルの一行がだいぶ長くなったので、適宜改行を入れ、字下げをしています。 

<table border="1">
  <tr>
    <th>記号</th>
    <th>読み方</th>
    <th>バイト数</th>
  </tr>
  <tr>
    <td>KB</td>
    <td>キロバイト</td>
    <td>1,024</td>
  </tr>
  <tr>
    <td>MB</td>
    <td>メガバイト</td>
    <td>1,048,576</td>
  </tr>
  <tr>
    <td>GB</td>
    <td>ギガバイト</td>
    <td>1,073,741,824</td>
  </tr>
</table>
記号読み方バイト数
KBキロバイト1,024
MBメガバイト1,048,576
GBギガバイト1,073,741,824

最後に、背景を水色にし、数字を右に揃えます。 これは、style属性を使って行います。 

<table border="1">
  <tr style="background-color: aqua">
    <th>記号</th>
    <th>読み方</th>
    <th>バイト数</th>
  </tr>
  <tr>
    <td>KB</td>
    <td>キロバイト</td>
    <td style="text-align: right">1,024</td>
  </tr>
  <tr>
    <td>MB</td>
    <td>メガバイト</td>
    <td style="text-align: right">1,048,576</td>
  </tr>
  <tr>
    <td>GB</td>
    <td>ギガバイト</td>
    <td style="text-align: right">1,073,741,824</td>
  </tr>
</table>
記号読み方バイト数
KBキロバイト1,024
MBメガバイト1,048,576
GBギガバイト1,073,741,824

これで、目的の表が完成しました。

注意： <table>タグのborder属性を用いれば、内枠が表示されるのですが、セルの中身が何もなかったりスペースのみの場合には、そのセルの枠は表示されません。

例
<table border="5">
  <tr>
    <td> </td>
    <th style="background-color: green">1997</th>
    <th style="background-color: green">1998</th>
    <th style="background-color: green">1999</th>
  </tr>
  <tr>
    <th style="background-color: lime">Section 1</th>
    <td style="text-align: right">6,875</td>
    <td style="text-align: right">5,270</td>
    <td style="text-align: right">5,076</td>
  </tr>
  <tr>
    <th style="background-color: lime">Section 2</th>
    <td style="text-align: right">943</td>
    <td style="text-align: right">1,155</td>
    <td style="text-align: right">1,004</td>
  </tr>
  <tr>
    <th style="background-color: lime">Section 3</th>
    <td style="text-align: right">3,983</td>
    <td style="text-align: right">3,487</td>
    <td style="text-align: right">3,974</td>
  </tr>
</table>
1997 1998 1999
Section 1 6,875 5,270 5,076
Section 2 943 1,155 1,004
Section 3 3,983 3,487 3,974

強制的に枠を表示させるには、セルの中身に強制改行<br>を入れてください。

例
<table border="5">
  <tr>
    <td><br></td>
    <th style="background-color: green">1997</th>
    ...

1997 1998 1999
Section 1 6,875 5,270 5,076
Section 2 943 1,155 1,004
Section 3 3,983 3,487 3,974

演習5

例を参考にして、架空の買い物を考え、その明細が表示されるHTMLファイルを作成してください。 表に関するタグを用いることとしますが、色、字揃え、前後の文面などは自由とします。 （あまり事実のようには書かないでください。） xemacsではじめに用意される雛形を使ってもかまいません。 ファイル名は、できればex5.html以外にしてください。

例
架空の買い物

品名数量単価金額
官製はがき60503,000
切手601207,200
封筒（8枚入り）8100800


消費税40


合計11,040

レポート課題

今日の演習5にしたがってHTMLファイルを作成し、konishi@twcu.ac.jpあてにメールでそのURL/URIを報告してください。 メールには、学生番号、氏名、科目名、授業の日付けを明記してください。

私のホームページへ - 前の授業へ - 次の授業へ
このページの複製は、東京女子大学学内に限り許可します。 このページへのリンクを許可します。
2000年5月18日更新
製作・著作：小西善二郎<konishi@twcu.ac.jp>