初心者のためのホームページ作り:第14号

                  毎週金曜日配信 What's New 2002/8/16
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
           初心者のためのホームページ作り
           http://www.scollabo.com/banban/
                <第14号>

             banban@scollabo.com
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

この講座はタグを覚えてテキストエディタだけでホームページを作るという、ど
ちらかというとやや専門的な作業が中心になります。各種の専用のオーサリング
ソフトとは一線を画して、思い通りのプロ並みのHPを作ることが出来ます。

 時には専門的で難解な言葉も出てきますが、なるべく初心者にも分かりやすく
解説していきます。どうぞ、気軽な気持ちでお付き合いください。講座をすすめ
る中で分からない点がありましたら遠慮なくメールください。

 当講座ではHTML4.01を中心とした文法が主体となっています。なお、このマガ
ジンは等幅フォントでお読みいただくと快適に読めるようになります。

 今週の課題■ テーブル その2

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆その前に、読者からの質問にお答えします。

■ HTMLの意味の中の、Markup Language とは何ですか?
HTML= Hyper Text Markup Language を無理やり日本語に訳すと「飛んでるしる
し付けした言語の文書」となりますでしょうか。

 よく「HTMLってホームページを作るプログラムです。」なんて言われますが、
HTMLはプログラムではありません。テキストベースの単なる文書です。
 HTMLのルーツとなるSGML(Standard Generalized Markup Language)でもその
ような論議がありましたが、同様にSGMLもテキスト文書です。
(SGMLを無理やり訳すと、一般的標準しるし付け言語文書になるでしょう。)

 ただし、このHTML文書は、ここは見出し、ここは段落というような「しるし」
が付けられています。この「しるし」を「タグ」と呼んでいます。
Markup Language は「しるし付け言語」、つまりマークアップという言語を使っ
たテキスト文書です。このマークアップは、コンピューターや人間に理解しやす
い「言葉」になっています。
 あくまでテキスト文書ですから、どのようなプラットフォームのどのようなテ
キストエディタでも、HTMLソースを読むことができますし、どのようなブラウザ
でも「しるし」を理解して表示(表現)が可能になるわけです。
(一部のブラウザの独自仕様の「しるし」は別ですが・・)

 逆な言い方をすれば、パソコンのOSに標準装備されているどのようなテキス
トエディタ(SimpleText、TextEdit、メモ帳、ワードパッド、viなど)でもHTML
を書くことができます。これは素晴らしいことです。

 通常、プログラムとは専用のエディタで書き上げたあとに、コンパイルという
作業が必要になってきます。コンパイルとは、コンピューターのCPUが理解可
能なバイナリ(0と1の2進数)形式に変換するコンパイラーという専用のソフ
トを使用しますが、HTMLはそのような面倒くさいことが不必要です。
 さらに、HTML上に書き込むJavaScriptなどはプログラムですが、これもコンパ
イルは必要がありません。

 Hyper Textは他の文書にリンクできることを意味しています。「飛んでる」と
いう意味合いはこのことを指しているのでしょう。これこそ、HTMLの大きな特徴
でもあります。

 HTMLは決して難しい言語ではありません。「しるし」の意味を理解し、正しい
文法さえ見につければ世界中に通用するだけでなく、世界中で共有するリソース
(資源)となり得るのです。HTMLは世界共通言語といっていいでしょう。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
ここから本文に入ります。

◆テーブルの行(横列)のグループ化
先週は、縦列のグループ化を行いましたが、今度は横列をグループ化します。
 テーブルで表わすセルの横の行をグループ化して、読み手に分かりやすい表を
形成できます。
 使用する新しい要素は、thead、tfoot、tbodyの3つです。

 グループ化することによるスタイル付けもずっと楽になります。
さっそく横列をグループ化したテーブルを作ってみましょう。テキストエディタ
で新たにHTML文書を作ります。下記のようにタイプしてください。
 コロン「:」、セミコロン「;」を間違えないように。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>セルの結合</title>
<style type="text/css">
<!--
thead { background-color: #ccc }
tfoot { background-color: #ffc;
        font-weight: bold }
-->
</style>
</head>

<body>
<table cellpadding="3" cellspacing="0" border="1" summary="テーブルにお
ける行のグループ化のサンプルを表示します">

<colgroup>
<col span="3" width="120">
</colgroup>

<thead>
<tr><th abbr="教科の科目を表わします">科目</th>
    <th abbr="テストの得点を表わします">得点</th>
    <th abbr="テストの平均点を表わします">平均点</th></tr>
</thead>

<tfoot align="center">
<tr><td>合計</td>
    <td>78点</td>
    <td>81点</td></tr>
</tfoot>

<tbody align="center">
<tr><td>国語</td>
    <td>85点</td>
    <td>88点</td></tr>

<tr><td>算数</td>
    <td>62点</td>
    <td>73点</td></tr>

<tr><td>理科</td>
    <td>70点</td>
    <td>75点</td></tr>

<tr><td>英語</td>
    <td>95点</td>
    <td>86点</td></tr>
</tbody>
</table>

</body>
</html>


入力が終わりましたらいつものように半角小文字で、
test_16.html と必ず拡張子「.html」を忘れないようにして保存します。
 保存後、ダブルクリックしてブラウザで見てください。
(保存するHTML文書名は、ご自分で好きな名前をつけてもかまいません。)

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆解説
 thead テーブルのヘッダ(見出し)の範囲をグループ化する要素です。

 tfoot テーブルのフッタ(終わりの見出し)の範囲をグループ化する要素です。
     最後の行に表示されます。

 tbody テーブルの本文に当たる範囲をグループ化する要素です。
     複数の行をまとめて設定できます。

 thead、tfoot、tbodyの主だった適用属性
    align  この要素に囲まれた範囲のセル内のデータの行揃え
    valign この要素に囲まれた範囲のセル内のデータの垂直方向の位置揃え

これら3つの要素を用いて、テーブルの行(横列)をグループ化します。通常、
tbody 要素は、宣言がなくてもデフォルトで割り当てられています。つまり何も
記述がなくても、この要素があると判断されています。なるべくなら記述した方
が良いだろうと言われていますが、私の場合はほとんど無視しています。
 グループ化してスタイルや位置揃えをする必要がある場合には有効でしょう。

 colgroup、col  先週解説した縦列のグループ化です。

thead { background-color: #ccc } 
 thead要素で囲まれた範囲の背景色を灰色にしました。

tfoot { background-color: #ffc; font-weight: bold }
 tfoot要素で囲まれた範囲の文字を強調し、背景色を薄いクリーム色にしました。
  テーブル行の一番下に表示されます。

 このHTMLの実行結果は、本誌Webサイトにも掲載しました。
お手数ですが、ご参照ください。

 http://www.scollabo.com/banban/magazine/backnm_014.html#sample_01

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆セルを結合する
テーブルはセル単位で集まった表であることは先週解説しました。ひとつひとつ
のセルが縦と横に並べられたものです。
 ここで、セルを結合して表を作ってみましょう。まず先に横列のセルの結合で
す。横列のセルを結合させる属性として、colspan があり、これを td 要素に書
き込みます。

とりあえず簡単な表を作ってみましょう。いつものようにテキストエディタを立
ち上げて下記のようにタイプしてください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<title>セルの結合</title>
</head>

<body>
<table border="1" cellpadding="3" cellspacing="0" summary="セルの結合を
表示させるテーブルのサンプルです。">
<tr><td colspan="2">
   <img src="images/hana.png" width="200 height="175" alt="花の絵"></td>
</tr>

<tr><td>PNG画像</td>
    <td>花の絵です</td></tr>
</table>

</body>
</html>

入力が終わりましたらいつものようにHTML文書として保存します。半角小文字で
test_17.html と必ず拡張子「.html」を忘れないようにして保存します。
 保存後、ダブルクリックしてブラウザで見てください。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆解説
先週解説したとおり、teabl要素内に summary属性を設けました。

  border="1" cellpadding="3" cellspacing="0"

テーブルに枠線を表示させました。セル内の余白を3ピクセル分とってコンテン
ツが窮屈にならないように施しました。同時に、セルとセルの間隔は無しとしま
した。これらの属性の値をご自分でいじってみて、どんな表示になるか試してみ
てください。

 <td colspan="2">

セルの横方向の結合を設定する属性、colspan で値を2としました。これはセル
を2個分結合させることを指示するものです。
 今回は、結合したセル内に画像を使いました。セル内にはいろんなコンテンツ
を記述することができます。

下段のセルは2個用意しました。上段で2個分のセルの結合があったので、下段
以下は最低2個以上のセルが必要です、当然のことですが。

(なお、画像は、当サイトから提供しているものを使用しました。ダウンロード
をされていない方は下記のURLより取得できます。)

 http://www.scollabo.com/banban/daf/material.html

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆次に、縦方向(下段)のセルの結合を表示させます。
縦のセルを結合させる属性として、rowspan があり、これを td 要素に書き込み
ます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<title>セルの結合</title>
</head>

<body>
<table border="1" cellpadding="3" cellspacing="0" summary="セルの結合を
表示させるテーブルのサンプルです。">
<tr><td rowspan="2">
   <img src="images/hana.png" width="200 height="175" alt="花の絵"></td>
   <td>PNG画像</td></tr>

<tr><td>花の絵です</td></tr>
</table>

</body>
</html>


入力が終わりましたらいつものように半角小文字で
test_18.html として保存します。保存後に、ブラウザで見てください。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆解説
  <td rowspan="2">

この属性は縦方向にセルを2個分結合させることを指定しています。

<tr><td>花の絵です</td></tr>

当然ながら、下段のセルの記述は1個分です。なぜなら既に1個は上段と結合さ
れているからです。

 大きなテーブルを使う時には、セルを結合させて使う便利な属性ですので是非
覚えておきましょう。

 セル結合のHTML文の実行結果は下記のURLを参照してください。
  http://www.scollabo.com/banban/magazine/backnm_014.html#sample_02

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆テーブルのおさらい
先週と今週でおおよそのテーブルの説明をしてきました。ここでもう一度整理し
て、主だった要素及び属性と値のおさらいをしておきます。

■ table要素 <table>〜</table>で囲まれた範囲がテーブルであることを表わ
           します。この中にデータセルなどを配置します。
      ブロックレベル要素で、終了タグは必須です。

 関連属性
 border  テーブルのすべてに枠線を表示します。単位はピクセル単位で数
     値で記述します。 例:border="1"

 cellpadding  各セル内の内側の余白を設定します。単位はピクセルです。

 cellspacing  セルとセルの間に余白を設定します。同じくピクセル単位。

 width テーブルの横幅を設定します。単位はピクセル、または%です。

 frame  枠線を表示させる設定に使います。セルを囲む枠線の設定です。

 rules  枠線の設定に使います。セルを区切る枠線の設定です。

 summary 視覚障害者への配慮として、テーブルの説明に使います。


■ caption要素 テーブルの表題を表示します。一般的にセンタリングされます
   が、枠線表示を設定しても囲まれることはありません。
   属性はありません。終了タグは必須です。


■ tr要素 <tr>〜</tr>で囲まれたものがテーブルの横1列を表わします。この
    範囲にヘッダセル、データセルを記述します。終了タグは必須です。

 関連属性
 align  tr要素に囲まれる範囲のセル内のデータの行揃えを指定します。
    値としては、left、center、right、justify などがあります。

  valign  tr要素に囲まれる範囲のセル内のデータの垂直方向の位置を指定し
    ます。値として、top、middle、bottom、baseline があります。


■ th、td要素 それぞれ表のひとつのセルを表わす要素で、そのセルの内容が、
    列(縦1列)の見出しである場合は、th要素を、セルの内容がデータ
    である場合は、td要素を使用します。
     表の形態によってそれらを明確に分類できない場合は、td要素を使う
    ことをお奨めします。必ずしも、th要素を使わなければならないという
    ものではありません。終了タグは省略可能です。

 関連属性
 align  セル内のデータの行揃えを指定します。
    値としては、left、center、right、justify などがあります。

  valign  セル内のデータの垂直方向の位置を指定します。
        値として、top、middle、bottom、baseline があります。

 abbr  セルの内容を簡略に説明を加え、視覚障害者に配慮する属性です。
    値はテキストで記述します。

 ここに明記したそれぞれの要素の属性については、間違いなくHTML4.01Strict
で動作が確認されているものです。それ以外については、非推奨扱いとされてお
り、廃止予定のものです。
 例えば、captionや table要素での align属性は認められておりません。
  同様に、td、th、tr、thead、tbody、tfootの各要素では、width属性が認めら
  れていません。
  また、背景色を指定する bgcolor属性、枠線の色を指定する bordercolor属
 性も非推奨となっていますので、スタイルシートを利用することになります。

紙面の関係ですべてを記述できませんので、詳しい一覧表をサイトに掲載しまし
た。お暇な折にご覧ください。
  http://www.scollabo.com/banban/lectur/ht11.html#t-table


■テーブルについての概要を先週と2週続けて解説してきました。HTMLを勉強し
ている中で、多くの人がこのテーブルでつまずいて挫折される方が少なくありま
せん。それほどテーブルとは奥行きのある複雑な構文です。
 セルの意味をもう一度読み返して身に付けてください。慣れれば決して難しい
ものではありません。それぞれの要素、属性の働きを自分なりに使ってつかむこ
とが近道となります。何度も何度も諦めず学習することが大切です。

 次週は、テーブルの応用となるレイアウトの表現を主体に講座を進めます。ま
さに実戦的な講座になると思います。

今回はここまで、ではでは・・
今週のおさらいはWebページにも掲載しましたので、是非見ておいてください。
WebページはHTML分の実行結果のサンプルもあり、より分かりやすく説明して
います。あわせて過去の記事のおさらいも掲載しています。

(今週のおさらい)
http://www.scollabo.com/banban/magazine/

次回は、テーブルにおけるレイアウトの表示について詳しく解説します。

今後のスケジュール(予定)
配置のコントロール、フレームの作成、フォームの作成など。

ひと通りのテーマ別の要素、属性の説明が終わりましたら、すぐに使えるより実
戦向きのHTML、及びスタイルシートの応用編を予定しています。
 また、リクエストの多い「JavaScript」は、10月ごろから始まる応用編の中で
取り上げていきます。あわせて、利用するオブジェクトもいろいろ用意します。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆アンケート実施についての御礼
先週、本誌にてアンケートを実施させていただきました。たくさんの方から非常
にご丁寧なご意見と共に寄せていただきました。紙面から厚く御礼申し上げます。
現在集計作業をしておりますので、来週には結果を公表できると思います。

 なお、まだアンケートは受け付けておりますので、先週(第13号)の記事中に
あるアンケートをコピーして送信していただければ幸いに思います。何卒、よろ
しくお願いします。来週の水曜日まで受け付けます。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

ご質問・ご意見ははこちらまで→ banban@scollabo.com
なお、ご質問の際には、お使いのOS、通常使っているブラウザ、使っているテキ
ストエディタなど、なるべく分かりやすく制作環境を明記していただけると回答
しやすくなると思います。

発行者 ばんばん
協 力 スズキ・コラボレーション http://www.scollabo.com/
配信エンジン まぐまぐ http://www.mag2.com/  (ID 0000090196)

誤字・脱字・変換ミス・表現欠乏などには平に御容赦願います。なお、マガジン
のすべての記述に誤りがある場合、叱咤と罵声と共に私まで突きつけていただく
と幸いに思います。

バックナンバー こちらで公開しています。
プレーンテキスト  http://www.scollabo.com/banban/magazine/magazine.html
アーカイブ        http://www.scollabo.com/banban/daf/archive.html
各号のおさらい  http://www.scollabo.com/banban/magazine/
講座の教材    http://www.scollabo.com/banban/daf/material.html
まぐまぐの過去記事 http://backno.mag2.com/reader/Back?id=0000090196

配信の変更・中止はこちらです。
個別の手続きは受け付けていませんので、ご面倒でも各自でお願いできれば助か
ります。
当サイトにて http://www.scollabo.com/banban/magazine/magazine.html
まぐまぐにて http://www.mag2.com/m/0000090196.htm


■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

<えでぃた〜ず・るーむ>
お盆の週になってすっかり夏休みモードになっています。暑さもあって何となく
仕事やWebページ制作にもちょっとばかり気合が入りません。
 病気じゃないのかと思うくらい体がだるく、頭も働かないんですね。こんな時
にはぬるめのお湯に浸かってボーッとしていたほうがいいみたいです。早い話が
夏バテなんですね、これが。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆著作権について
個人がご自分のPCに保存して利用する以外の記事の転載、引用は基本的に応じ
ておりません。記事中のすべての内容について、無断で使用することを固く禁じ
ます。

      Copyright(C) 2002  www.scollabo.com/banban/
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■


Copyright(C) 2002-3003 banban@scollabo.com