毎週金曜日配信 What's New 2002/8/9
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
初心者のためのホームページ作り
http://www.scollabo.com/banban/
＜第13号＞
banban@scollabo.com
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
暑中お見舞い申し上げます。
この講座はタグを覚えてテキストエディタだけでホームページを作るという、ど
ちらかというとやや専門的な作業が中心になります。各種の専用のオーサリング
ソフトとは一線を画して、思い通りのプロ並みのＨＰを作ることが出来ます。
時には専門的で難解な言葉も出てきますが、なるべく初心者にも分かりやすく
解説していきます。どうぞ、気軽な気持ちでお付き合いください。講座をすすめ
る中で分からない点があったら遠慮なくメールください。
当講座ではHTML4.01を中心とした文法が主体となっています。なお、このマガ
ジンは等幅フォントでお読みいただくと快適に読めるようになります。
今週の課題■ テーブルの作成 その１
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆テーブルとは？
テーブルはセルという単位で縦と横に集まった表のことです。
┏━━━━━━━━━━━┓
┃セル┃セル┃セル┃セル┃ 左図のように１つのマス目をセルと呼び、セルの
┃━━╋━━╋━━╋━━┃ 中にコンテンツを記述します。
┃セル┃セル┃セル┃セル┃（左の図はあくまで参考程度に書いたものです。）
┃━━╋━━╋━━╋━━┃
┃セル┃セル┃セル┃セル┃ 今週から３回にわたってテーブルについて詳しく
┗━━━━━━━━━━━┛ 解説します。
◆テーブルの作成
少し前まで、私はテーブルを使ってページのレイアウトを構成していました。特
にスタイルシートを覚えるまでは、テーブルなしではページを作ることが出来な
いくらい、テーブル要素の偏ったページを作っていました。
また、テキストエディタだけでページ作りをする大きなきっかけになったのも
実はテーブルがやりたかったという動機がありました。
テーブルというのは厳密に言えば表の作成です。作表といってもマイクロソフ
ト社のエクセルのように計算はできません。あくまでブラウザ上に表を表示する
だけのものです。
しかし、作り方によっては表としてだけでなく、画面のレイアウト構成を実に
上手に作れます。多くのサイトではほとんどがこのテーブルを使って表示のレイ
アウトを行っているといっても過言ではありません。
本誌のサイトでもトップページでテーブルを使ってレイアウト構成しています。
ところが、W3C ではテーブルをレイアウト構成に使うのは良くないと勧告して
います。と、いいながら W3Cのトップページでテーブルを使ってレイアウトして
いるのは腑に落ちません。
例えばボックスを二つ横に並べるという表現は、テーブルなしでは不可能です。
ボックスや段落は、否応なく改行されて横には並べられないからです。
能書きはこれくらいにして、さっそく簡単なテーブルを作って見ましょう。
いつものようにテキストエディタ（SimpleTextやメモ帳など）を起動して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">
<title>テーブルの作成</title>
</head>
<body>
<table>
<caption>HTMLタグの概要</caption>
<tr><th>要素名</th>
<th>語源</th>
<th>機能</th></tr>
<tr><td>P</td>
<td>Paragraph</td>
<td>段落を表す</td></tr>
<tr><td>H1〜H6</td>
<td>Headline</td>
<td>見出しを表す</td></tr>
<tr><td>BR</td>
<td>line BReak</td>
<td>強制改行</td></tr>
<tr><td>A</td>
<td>Anchor</td>
<td>リンク先を表す</td></tr>
</table>
</body>
</html>
入力が終わりましたらいつものようにHTML文書として保存します。半角小文字で
test_14.html と必ず拡張子「.html」を忘れないようにして保存します。
保存後、ダブルクリックしてブラウザで見てください。
（なお、保存する文書名はご自分で好きな名前をつけてもかまいません。）
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆解説
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
DTD（文書型宣言）。HTMLでは、必ずどのHTMLバージョンで記述されているの
かを宣言しなければなりません。
ちなみにこの宣言では、HTML4.01の中で、非推奨の要素及び属性を排除して
作成するための、極めて厳格な文法が要求されるStrict仕様を使うという宣言
です。詳しくは本誌第３号をお読みください。
table この要素に囲まれた範囲がテーブルであることを示します。
終了タグは必須です。
caption テーブルのキャプション（表題）や説明をつけるための要素です。
一般的にセンタリングされて表示します。終了タグは必須です。
なお、この要素を省略しても問題ありません。
tr テーブル表の１行（横方向の１列）であることを示します。
内容としては、th、td要素のみを配置します。終了タグは必須です。
th ヘッダセル。表の列（縦列）の見出しを表示します。終了タグは省略可
能です。一般的に強調された字体でセンタリングされて表示されます。
td データセル。表のひとつのセル（コマ）を表示します。終了タグは省略
可能です。セルの中には、テキストやオブジェクトなどのコンテンツな
どを入れることが可能です。ブロックレベル要素も挿入可能です。
省略できる要素があっても、なるべく書くようにお奨めします。将来の XHTMLで
は、省略が許されておりません。
テーブルは、一つ一つのセルが集まって表示される「表」そのものです。
また、table要素のデフォルトは枠線を表示しません。枠線を表示させるには
border属性を使います。上記HTML分の table要素内に次のように記述します。
<table border="1"> 試してみてください。
これは１ピクセルの枠線を表わします。本来、border属性は見栄えを表わす属性
なので、HTML4.01 では非推奨扱いになっているにもかかわらず、table要素のみ
に関しては問題なく使えます。文書宣言型が Strict でも問題ありません。
ここで言う非推奨とは、文書型宣言が Strict では使用できず、いずれ廃止さ
れるものを含みます。ただし、文書型宣言が、Transitionalでは使用可能です。
非推奨属性が非推奨にならないとは、不思議な話ではありますが、ことテーブ
ルに関しては、多くの非推奨属性が問題なく使えるものがあります。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆枠線表示の属性
テーブルに枠線を表示させる属性として、border属性を使うことができますが、
その他にも違う方法で表示をさせる属性が２つあります。共に table要素内に記
述します。
farme属性 セルを囲む枠線の、上下左右のどの枠に表示させるかを指定します。
指定できる値として、下記の通りです。
above 上の枠線のみ表示
below 下の枠線のみ
hside 上下の枠線のみ
lhs 左の枠線のみ
rhs 右の枠線のみ
vside 左右の枠線のみ
box 上下左右を表示
border 上下左右を表示
void 外枠の枠線表示なし（デフォルト値）
記述方法 <table frame="above">
rules属性 表の中のセルを区切る枠線のうち、どの線を表示するかを指定します。
指定できる値は次の通りです。
groups thead、tbody、tfoot、colgroup要素の境界線のみ表示
rows 横列の境界線のみ表示
cols 縦列の境界線のみ表示
all すべての境界線を表示
none 枠線表示なし（デフォルト値）
記述方法 <table rules="rows">
この場合のデフォルトは、これらの属性を指定しない時に適応されます。なお、
詳しい表示は、文字だけのメールマガジンではお伝えにくいので、下記のURLを
参照していただけると理解できると思います。
お手数ですが、是非ご覧ください。
http://www.scollabo.com/banban/lectur/sample/sample_01.html
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆余白の設定・・cellpadding、cellspacing属性について
上記テーブルでは、隣り合ったセルがくっつきすぎて読みにくい面があります。
そうしたセル間のスペースを設ける属性として、cellpadding、cellspacing属性
を使用し、共に table要素内で記述します。
cellpadding セル内の余白を設定する属性で、ピクセル単位で指定します。
コンテンツがセル内で窮屈にならずに表示されます。
cellspacing セルとセルの間に余白を設ける属性で、やはりピクセル単位で指
定します。私はほとんど "0"にして使っています。特に枠線を表
示させたときに、"0" 以外ですとちょっと体裁悪いです。
通常、何も設定しない場合は、ブラウザの初期値としてある程度のスペースを
持っています。
どれくらいのスペースを持っているかは、ブラウザにより異なります。そこで
この属性を使って、自分の望む余白、スペースを設定します。なるべく設定する
ことをお奨めします。
（記述例）
<table cellpadding="5" cellspacing="0" border="1"> あるいは
<table cellpadding="0" cellspacing="5" border="1">
（サンプル）
http://www.scollabo.com/banban/magazine/index.html#tablespace
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆縦列のグループ化・・colgroup、col要素について
縦の列をグループ化する要素として、 colgroup、col要素を使います。この要素
を利用することで、グループ化したセル幅などを設定できます。
通常セルの横幅は、ブラウザが勝手に判断して設定してしまいます。すると予
期せずに長すぎたり短すぎたりと、みっともない表示になってしまうことが多々
あります。自分が思ったとおりの幅を設定し、見栄えよく表示したい時に、上記
の要素を使います。
さっそく作ってみましょう。新たに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">
<title>テーブルの作成</title>
</head>
<body>
<table border="1" cellpadding="5" cellspacing="0">
<caption>HTMLタグの概要</caption>
<colgroup>
<col width="100" align="center">
<col width="150">
<col width="200">
</colgroup>
<tr><th>要素名</th>
<th>語源</th>
<th>機能</th></tr>
<tr><td>P</td>
<td>Paragraph</td>
<td>段落を表す</td></tr>
<tr><td>H1〜H6</td>
<td>Headline</td>
<td>見出しを表す</td></tr>
<tr><td>BR</td>
<td>line BReak</td>
<td>強制改行</td></tr>
<tr><td>A</td>
<td>Anchor</td>
<td>アンカーを表す</td></tr>
</table>
</body>
</html>
入力が終わりましたらいつものようにHTML文書として保存します。半角小文字で
test_15.html と必ず拡張子「.html」を忘れないようにして保存します。
正しく保存できると、HTML文書がブラウザのアイコンで今のHTML文書が表示さ
れます。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆解説
最初に作ったHTML文書に、colgroup、col要素を追加しただけです。
colgroup 縦列を構造的にグループ化する要素です。終了タグは必須です。
col 設定する縦列の詳細を記述します。この場合は width属性によって横幅を、
それぞれのグループに設定しました。終了タグは要りません。
align="center" グループ化したセル内のデータの位置を指定します。
この align属性はテーブルに関連した td、th、tr、col、thead、tbody、
tfoot のみで使用が許されています。
それ以外の要素 table、img、object などでは非推奨扱いとなっています。
（注：thead、tbody、tfoot 要素は次回説明します。）
なお、align属性の値として、
center 中央に配置
left 左側に配置
right 右側に配置
justify 両揃え（Netscape未対応）
col要素では、それぞれの縦列の横幅や文字の位置などを設定できますが、２列
目、３列目とまったく同じならば、span属性を使って列の数を設定します。
例えば、２、３列目を同じにする場合、
<colgroup>
<col width="30" align="center">
<col span="2" width="150">
</colgroup>
こうすれば、まとめて同じように表示する設定ができます。もし全部同じなら
<colgroup>
<col span="3" width="150" align="center">
</colgroup>
あるいは
<colgroup span="3" width="150" align="center"></colgroup>
とすればいいわけです。便利な要素、属性ですので覚えておきましょう。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆テーブルを使用する際のアクセシビリティ
視聴覚障害者の使う音声ブラウザ、あるいは点字ブラウザでは、テーブルの読み
上げは非常に難しく正しい情報が得られにくい特性を持っています。
そのために、W3Cではテーブルをレイアウトに使うなと言っているのです。
しかし、下記のような属性を使って、音声ブラウザに対してテーブルであること
を明示的に記述します。つまりこの属性を使うことによって視覚障害者は、テー
ブルに込められたコンテンツを理解しやすくなります。
（サンプル）
<table border="1" cellpadding="5" cellspacing="0" summary="HTMLにおける要
素の名称と語源、及びその働きを示した表です。">
<caption>HTMLタグの概要</caption>
<colgroup>
<col width="100" align="center">
<col width="150">
<col width="200">
</colgroup>
<tr><th abbr="HTMLタグ">要素名</th>
<th abbr="タグの語源を示します">語源</th>
<th abbr="要素の働きを示します">機能</th></tr>
（中略）
</table>
これを実行しても視覚系ブラウザではまったく変化はありません。
summary この属性は、音声や点字ブラウザに対して、どのようなテーブルである
かを伝えます。残念ながら、視覚系ブラウザはサポートしていません。
abbr この属性はテーブルのセル内の情報を補佐して、音声ブラウザが読み上げ
るのを助けます。視覚障害者への配慮となります。
（この属性は、th、td要素内で使います。基本的にはth要素内だけで十分
と思います。）
summary、abbr これらの属性に、詳しい情報を書き込んでおくと、視覚障害者か
ら感謝されるはずです。心優しいHTMLを作ることも制作者の義務です。
◆テーブルの特質
通常、テーブルをブラウザ上に表示する場合、すべてのデータの読み込みが完了
してから一気に表示する特質があります。
（最近のブラウザでは、読み込み中でも表示できるものがあります。）
そのため、あまり大きなテーブルを作った場合、表示まで時間がかかり、訪問者
をイラつかせる要因となり、他のサイトへ逃げてしまう結果になることがありま
す。その点を留意してテーブルのコンテンツを設計段階で考慮するようにします。
初心者の方にとって、テーブルはとっつきにくいものだろうと思いますが、こ
の要素抜きにHTML作成を語ることができないくらい重要な部分でもあります。
じっくりと時間をかけて１つずつ理解していくことが大切です。
今週のテーブルに関する解説は、かなり急ぎすぎた感があります。私としては
まだ足りない部分はあったと思っていますが、それらについては次回に譲ります。
■（注）
今週のHTMLの記述では、読者の皆さんに分かりやすくするために、改行を多くし
て表現していますが、ブラウザは問題なく表示してくれます、念のため。
また、HTML文を途中で改行して記述したのは、「まぐまぐ」が１行の文字幅を
おおよそ全角36文字程度を推奨しているためです。本来なら改行なしで記述した
いのですが、仕方ありません。その点をご理解ください。
今回はここまで、ではでは・・
今週のおさらいはＷｅｂページにも掲載しましたので、是非見ておいてください。
ＷｅｂページはHTML分の実行結果のサンプルもあり、より分かりやすく説明して
います。あわせて過去の記事のおさらいも掲載しています。
（今週のおさらい）
http://www.scollabo.com/banban/magazine/
次回も、引き続きテーブルについて解説します。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆アンケート
突然ですが、アンケートにご協力ください。今後のマガジンの構成に役立てたい
と思っております。協力していただいた方の中から、抽選で京瓦で作った干支の
置物を差し上げたいと思います。是非ともよろしくお願いします。
下記のアンケートをコピーしてメールに貼り付けてご回答いただければ、幸い
に思います。件名を「アンケート」としていただければ助かります。
アンケート宛先 banban@scollabo.com
------------------------------- ここから -----------------------------
■ 本誌の講座内容について （ ）
１．難しい ２．理解できる ３．ほとんど理解できる
■ スタイルシートについて （ ）
１．難しい ２．理解できる ３．ほとんど理解できる
■ HTML文について （ ）
１．難しい ２．理解できる ３．ほとんど理解できる
■ マガジンの読みやすさ （ ）
１．読みにくい ２．まぁ読みやすい ３．非常に読みやすい
■ あなたのＯＳをお聞かせください。
（例：Windows2000ProSP2 とか、Mac OS 9.2 とか、Red Hat Linux 7.2など）
具体的にバージョン名までお願いします。
■ あなたの普段使っているブラウザをお聞かせください。
（例：MSIE 6.02 とか、Netscape 4.78 とか、iCab 2.8.1J など）
具体的にバージョン名までお願いします。
■ あなたの通信環境をお聞かせください。
（例：ADSL1.5M とか、ダイヤルアップ56K とか、CATV 8M、Ｂフレッツなど）
■ 広告の掲載について （ ）
１．許せる ２．少しなら許せる ３．許せない
■ 最後に当講座についてご意見がございましたらお願いします。
------------------------------- ここまで -----------------------------
アンケートは確かに堅苦しいもので本意ではありませんが、他に方法がございま
せん。今後の講座に役立てたいと思っていますので、大変お手数ですが何卒お願
いします。なお、アンケート結果は必ず本誌にてご報告いたします。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
質問・ご意見ははこちらまで→ 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://backno.mag2.com/reader/Back?id=0000090196
配信の変更・中止はこちらです。
個別の手続きは受け付けていませんので、ご面倒でも各自でお願いできれば助か
ります。
当サイトにて http://www.scollabo.com/banban/magazine/magazine.html
まぐまぐにて http://www.mag2.com/m/0000090196.htm
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
＜えでぃた〜ず・るーむ＞
暑い日が続いています。暦では「立秋」を過ぎましたが、秋はまだ遠いようです。
北海道や東北地方では、早くも秋の気配が感じられるようだと聞いています。
来週からお盆になり、勤労者の方は待ちに待った夏休みが訪れます。学生の方
はすでに夏休み真っ盛りといったところでしょうね。
やはり日本人にはお盆は欠かせない存在なのですね。お出かけの際にはお気を
つけて無事にお帰りください。事件・事故に巻き込まれませんように。
私はというと、会社が休みになる来週はサーバのメンテナンスや、膨大なデー
タのバックアップ作業、アプリケーションのバグ取りなどが待っています。一人
だけ寂しく出勤となり、今月末まで夏休みは先送りとなりますが、毎年のことで
すっかり慣れました。
お盆の時期となると、都市部では人がいなくなり道路がガラガラに空いて、車
で通勤している私には非常に楽になり、私が夏休みを取る時は、高速道路や観光
地も空いていて、何だかすごく得した気分と申し訳ない気分になります。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆Webサイト更新情報
●お役立ちリンク集を掲載
Webページ作成にあたって、知っておかなければならないことや、HTML文法の
チェックなど利用すると便利なサイトなどを集めました。あくまで独断と偏見
で選んだお勧めサイトです。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆著作権について
個人がご自分のＰＣに保存して利用する以外の記事の転載、引用は基本的に応じ
ておりません。記事中のすべての内容について、無断で使用することを固く禁じ
ます。
Copyright(C) 2002 www.scollabo.com/banban/
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
Copyright(C) 2002-3003 banban@scollabo.com