| 目次 | 索引 |
|---|---|
前回の授業では、スタイルシートによって規則的にスタイルの指定ができることを説明しました。 しかし、タグの種類ごとにスタイルの指定をするのでは、不便な場合が多いです。
例えば、締め切り日とシステム停止日を
<em>
タグで強調したHTMLドキュメントを作成したとします。
これまでのスタイルシートでは、スタイルを変更しますと、締め切り日もシステム停止日も「規則的に」同じ見栄えになります。
強調していることは分かっても、締め切り日とシステム停止日が区別しにくいのでは、あまり役に立ちません。
では、どうしたらよいでしょうか。
別のタグを使うというのは本末転倒です。
「強調」という情報がなくなりますし、HTMLのタグもそれほど多く種類はありません。
かといって、一つ一つ
style
属性を書いたのでは、文書の内容に集中できなくなります。
class属性
を用いますと、この問題が解決できます。
<title>Important dates</title> <p> プログラムを <em style="background-color: yellow"> 5月31日 </em> までに作成し、マニュアルを <em style="background-color: yellow"> 6月7日 </em> までに書く。この間、 <em style="background-color: fuchsia"> 6月2日 </em> の未明と <em style="background-color: fuchsia"> 6月4日 </em> の未明に保守点検でシステムが停止する。 </p>
このようなHTMLドキュメントは
<title>Important dates</title>
<style type="text/css">
<!--
em.deadline {background-color: yellow}
em.maintenance {background-color: fuchsia}
-->
</style>
<p>
プログラムを
<em class="deadline">5月31日</em>
までに作成し、マニュアルを
<em class="deadline">6月7日</em>
までに書く。この間、
<em class="maintenance">6月2日</em>
の未明と
<em class="maintenance">6月4日</em>
の未明に保守点検でシステムが停止する。
</p>
となります。
class
属性を利用するためには、まずクラスの名前を決めます。
クラス
（
class
）とは、タグの種類の細分です。
上記の例では、締め切り日の強調ということで
deadline
という名前にし、保守点検によるシステム停止日の強調というこで
maintenance
という名前にしています。
クラスの名前はかなり自由に決められますが、英字から始まる英数字の並びが安全です。
次に、タグを
<
tag
class="
class
">
〜
</
tag
>
という形に置き換えます。
ここで、
class
はクラスの名前です。
上の例では、締め切り日を
<em class="deadline">
〜
</em>
で囲み、システム停止日を
<em class="maintenance">
〜
</em>
で囲みます。
最後に、
style
要素の内容に
tag.class {property: value; ...}
を追加します。 これによって、上記では、締め切り日が黄色の背景で統一され、システム停止日が桃色の背景で統一されます。
class
属性を用いますと、タグの種類の限界を越えて、より木目細かく見栄えの規則が定められるのです。
なお、スタイルシートの
tag
.
class
のような部分は、
セレクタ
（
selector
）とよばれます。
セレクタには
tag
や
tag
.
class
の他にも色々な形式があり、これによってスタイルシートをコンパクトにまとめたり、より柔軟な規則を作り出したりします。
表 は、物事を整理し、分かりやすく書き表すことができる、便利な表現方法です。 HTMLにも、表に関するタグがいくつか用意されています。 これらを用いると、表を使ったホームページが書けます。
表は、何かが書き込まれた長方形を縦横に並べてできています。 ここでは、この長方形を セル （ cell ）とよびます。 表の行とは、セルが横に並んだものを言います。 表の列とは、セルが縦に並んだものです。 表とは、行を縦に並べたものだと言えますし、列を横に並べたものだとも言えます。 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種類に分類します。
これは、
ヘッダ・セル
（
header cell
）か
データ・セル
（
data cell
）かという分け方です。
データの説明が書き込まれているのがヘッダ・セルで、データの値が書き込まれているのがデータ・セルです。
ブラウザは、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
要素と
td
要素の並びを
<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ですと外枠も内枠も表示しません。
border
属性を指定しませんと、
px
は0と見なされますので、枠のない表になったのです。
border
属性を用いて、外枠の幅を1ピクセルにします。
1行がだいぶ長くなりましたので、適宜改行を入れ、インデントをします。
<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
最後に、数を右に揃えます。
数を表すクラス名を
number
とし、数のデータ・セルは右揃えにするという規則のスタイルシートを書きます。
<title>KB, MB, and GB</title>
<style type="text/css">
<!--
td.number {text-align: right}
-->
</style>
<table border="1">
<tr>
<th>記号</th>
<th>読み方</th>
<th>バイト数</th>
</tr>
<tr>
<td>KB</td>
<td>キロバイト</td>
<td class="number">1,024</td>
</tr>
<tr>
<td>MB</td>
<td>メガバイト</td>
<td class="number">1,048,576</td>
</tr>
<tr>
<td>GB</td>
<td>ギガバイト</td>
<td class="number">1,073,741,824</td>
</tr>
</table>
記号 読み方 バイト数 KB キロバイト 1,024 MB メガバイト 1,048,576 GB ギガバイト 1,073,741,824
これで、目的の表が完成しました。
border
属性を用いますと表に罫線が引かれますが、中身のないセルの内枠は表示されません。
<table border="5">
<tr>
<td></td>
<td>Good morning!</td>
</tr>
<tr>
<td>Good morning!</td>
<td> </td>
</tr>
</table>
Good morning! Good morning!
強制的に内枠を表示するには、強制改行
<br>
を使います。
<table border="5">
<tr>
<td><br></td>
<td>Good morning!</td>
</tr>
<tr>
<td>Good morning!</td>
<td><br></td>
</tr>
</table>
Good morning! Good morning!
表自身を中央揃えにするには、
<table style="text-align: center"> ... </table>
ではなく、
<div style="text-align: center"> <table> ... </table> </div>
のようにしてください。 前者は、表のすべてのセルに対して中央揃えにするという意味です。
もし、ドキュメント内のすべての表を中央揃えにするのでしたら、スタイルシートを用いて
<style type="text/css">
...
div.table {text-align: center}
...
</style>
...
<div class="table">
<table>
...
</table>
</div>
とするとよいでしょう。
div.table
や
class="table"
の
table
は（要素名ではなく）クラス名です。
style
属性やスタイルシートによるスタイルの指定は、表に対しても可能です。
表においては、背景色の指定（
background-color
）やテキストの位置揃え（
text-align
）などのプロパティがよく用いられます。
セル内のテキストの位置は、ヘッダ・セルでは中央揃え、データ・セルでは左揃えがデフォルトでした。
セルが縦に広がりますと、デフォルトでは、ヘッダ・セルでもデータ・セルでもテキストが中央の高さに揃います。
<table border="1">
<tr>
<th>header</th>
<td>Good morning!<br>!<br>!<br>!<br>!</td>
</tr>
<tr>
<td>Good morning!<br>!<br>!<br>!<br>!</td>
<td>data</td>
</tr>
</table>
header Good morning!
!
!
!
!Good morning!
!
!
!
!data
vertical-align
プロパティを用いますと、垂直方向の位置揃えが変更できます。
次の表に従ってください。
<table border="1">
<tr>
<th style="vertical-align: top">header</th>
<td>Good morning!<br>!<br>!<br>!<br>!</td>
</tr>
<tr>
<td>Good morning!<br>!<br>!<br>!<br>!</td>
<td style="vertical-align: bottom">data</td>
</tr>
</table>
header Good morning!
!
!
!
!Good morning!
!
!
!
!data
例を参考にして、架空の買い物を考え、その明細を表すホームページを作成してください。
表に関するタグを使います。
また、数は右に揃えますが、
align
属性や
style
属性は用いず、
class
属性を用いることとします。
品名 数量 単価 金額 官製はがき 60 50 3,000 切手 60 120 7,200 封筒（8枚入り） 8 100 800
消費税 40
合計 11,040
今日の演習5に従ってホームページを作成し、そのファイル名をkonishi@twcu.ac.jpあてにメールで報告してください。 メールには、学生番号、氏名、科目名、授業の日付けを明記してください。