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

                   毎週金曜日配信 What's New 2003/3/21
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
       初心者のためのホームページ作り/Web for beginner
          http://www.scollabo.com/banban/
                <第44号>

              banban@scollabo.com

〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓

 当講座は、初心者や中級者が正しい文法と作法を身につけて、プロ級の本格的
な Webページ作成に役立つことを目的に配信されております。

 当講座ではHTML4.01及び XHTML1.1 を中心とした文法が主体となっています。
なお、このマガジンは等幅フォントでお読みいただくと快適に読めるようになり
ます。等福フォントに関しては、http://www.mag2.com/faq/mua.htm を参考にし
てください。

 今週の課題 ■ HTML基本 その8 --- テーブル
       ■ ホームページ作りの基本 その1--- ユーザビリティ
       ■ XHTML講座 その8 --- テーブルの作成
       ■ HTML タグの解説 --- img要素

〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓

◆HTML基本 その8  テーブルの扱い
初心者が挫折する要因にテーブルという構文が理解できない、ということがあり
ます。慣れてしまえばどうってことないのですが、自分なりにテーブルを理解し
て、完全に「モノ」にするまでは大変だろうと思います。

 ■テーブルの設定
 ページにテーブルを組む場合には、テーブルタグ <table> を宣言します。
  これは、これからテーブルが始まることをブラウザに知らせます。テーブル
 タグは必ず終了タグ </table> を記述しなければなりません。これがないと、
 次にくる他のタグもテーブル内にあると解釈されてしまう場合があります。

 ■テーブルはセルの集まり
 ┏━━┳━━┳━━┳━━┓
 ┃セル┃セル┃セル┃セル┃ 左図のように1つのマス目をセルと呼び、セル
 ┣━━╋━━╋━━╋━━┫ の中にコンテンツを記述します。
 ┃セル┃セル┃セル┃セル┃(左の図はあくまで参考程度に書いたものです。)
 ┣━━╋━━╋━━╋━━┫
 ┃セル┃セル┃セル┃セル┃ テーブルを作るときのコツは、横列のデータセ
 ┗━━┻━━┻━━┻━━┛ ルの数に注意しましょう。

 例えば、最初の横列に4つのセルを配置した場合、それから下段に続く横列は
 必ず4つにしなければなりません。
  横列を構成するタグは <tr> で、終了タグは必須です。<tr> 〜 </tr>
  セルを構成するタグは <td> で、終了タグは省略可能ですが、なるべく記述
 するように心がけましょう。<td>コンテンツ</td>

 横列に4つセルが並ぶ場合は、

 <tr><td>セル</td><td>セル</td><td>セル</td><td>セル</td></tr>

 このようにデータセルを4つ並べることで表現できます。この繰り返しによっ
 て表組(テーブル)の完成です。

 もし、誤ってセルの数が不適切になって整合性が取れない場合、
 ┏━━┳━━┳━━┳━━┓ こんな感じになってしまい、間が抜けた表にな
 ┃セル┃セル┃セル┃セル┃ ってしまいます。テーブルはあくまで表ですか
 ┣━━╋━━╋━━╋━━┛ ら、基本的には縦の列を合わせないといけない
 ┃セル┃セル┃セル┃    わけです。つまり、表としての一貫性に欠けた
 ┣━━╋━━╋━━╋━━┓ 整合しないものとなってしまいます。
 ┃セル┃セル┃セル┃セル┃ (わざと狙っている場合は別ですが・・)
 ┗━━┻━━┻━━┻━━┛ 
 テーブルを組む場合には、最初に枠線を表示させて1つずつ作っていくと割合
 楽に作成することができます。出来上がったら、もし枠線がいらない場合には
 枠線を非表示にすればいいだけです。

 枠線表示         枠線非表示
 <table border="1">        <table>

 テーブルは奥が深い構文です。今回より XHTML講座でじっくりと取り組んでい
ますので参考になると思います。

〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓

◆ホームページ作りの基本 その1 --- ユーザビリティ(Usability)

 読者の皆様から寄せられた質問の中で、ページ作成における作法に関する内容
がたくさんありました。その中の1つに「使いやすいページとは何か?」という
極めて重要なキーワードがありました。ここでは、使いやすい Webサイト、つま
り、「ユーザビリティ」について詳しく解説します。

 ■ユーザビリティとは?
 初期の Web空間では、その空間自体(サーバ)を所有し、そこに住居(ホーム)
 を構え、モニュメント(記念碑)を築いた「制作者」の幸せなスペースでした。
 一方的な意見や情報は、求める人のみ閲覧が可能な状況にあり、マナーやネチ
 ケットとはおよそ縁遠いものでした。そのような言葉すら存在していなかった
 のが実情だったでしょう。
  しかし、今日の爆発的なインターネットの普及を見ると、制作者はナルシス
 ム的な自己満足だけでは嫌われ、廃れていく傾向にあります。

 ユーザビリティという単語は use(使う)という言葉と ability(能力)とい
 う言葉から派生した言葉です。直訳では、「使用可能なこと」や「有用性」と
 いった意味を持ちます。
  一般的には、ソフトウェアや、自動車、家電製品などの「使いやすさ」を意
 味する言葉として使われています。

  近年のインターネットの世界でも、「ユーザビリティ」という単語がすっか
 り定着してきましたが、では Webサイトにおけるユーザビリティとは、一体何
 を表すことなのでしょうか?

 ■使いにくいということ
 皆さんがネットサーフィンを楽しんでいたとき、あるサイトでは表示までの時
 間が異常に長かったり、トップページから求める情報を探すのに苦労したとか
 あるいは、元のページに戻れなくなったり、先のページにいけなくなったり、
 また、自分のモニター画面が小さくてコンテンツが納まりきれず、不要な横ス
 クロールを強要されたりしたことがありませんか?
  それらは「使いやすい」とは言えるものではありません。

 ■使いやすさとは
 上記のサイトとは逆な要点を持っていることが使いやすさにつながります。
  ・トップページがすばやく表示される
  ・トップページを見ることでサイト全体のテーマが理解できる
  ・適切なナビゲーションガイド、迷子になることがない
  ・目的の情報にすばやく到達することができる
  ・コンテンツの大きさや色のコントラストが適切である
  ・どんなブラウザで閲覧しても適切にレンダリングできる
  ・難解な専門用語には注釈や用語解説が備わっている
  ・ページのタイトルは、コンテンツに反映した言葉を使う

◆ユーザビリティを確立するために

 ■トップページがすばやく表示される
 一般的に、トップページの総容量が、20KB(キロバイト)前後であれば、スト
 レスがなくすばやく表示してくれ、気持ちのよいものです。
  総容量とは、HTML文書、画像、スタイルシート、スクリプトなどを含むペー
 ジに関するすべての材料の合計を示します。50KBを超えると、通信環境によっ
 ては少々重くなり、気の短いユーザは敬遠するかもしれません。
  ブロードバンドがもてはやされる一方で、圧倒的多数はナローバンドでアク
 セスしていることを忘れてはなりません。
   100KB以上は他のページでも論外です。画像の解像度を落としたり、意味の
 ない背景画像をやめたり、テーブルレイアウトを変更したり、容量を小さくす
 る方法はいくらでもあります。

 ■トップページを見ることでサイト全体のテーマが理解できる
 トップページとはサイトの顔です。そこには作者の思いが込められたコンテン
 ツがナビゲーションとともに紹介されているはずです。
  ユーザが訪れてサイト内を見てくれるかどうかは、トップページで判断され
 ます。魅力的なサイトとは、動画などを使ったテクニックではなく、提供する
 情報のテーマをいかに短い言葉で伝えるか、ということが大切です。

 ■適切なナビゲーションガイド、迷子になることがない
 サイト内を巡っていくうちに、今自分がどこにいるのか分からなくなってしま
 います。元のページに戻りたくても戻れないようでは、適切なナビゲーション
 とは言えません。それぞれテーマに分けた目次やナビゲーション、サイトマッ
 プなどを用意しましょう。

  同時に、画像によるリンクの使い方にも気をつけなければなりません。ユー
 ザにとって、その画像がリンクなのか単なる画像なのか分かるようにしなくて
 はいけません。イメージマップを含め、画像によるリックには、代替のテキス
 トを併用するようにしましょう。また、「猫」の画像のリンクに「犬」のペー
 ジへ誘導するのは、「何じゃこりゃ」になってしまいます。

  時折見かけるのが「工事中」のページです。工事中ならリンクを貼るべきで
 はありません。ユーザに負担を掛けるような行為をさせてはいけません。無駄
 な時間とユーザリソースを消費するだけで意味のないことです。

 ■目的の情報にすばやく到達することができる
 ショッピングサイトへ買い物をしようと思って訪問し、目的の商品を探しまし
 た。やっと商品を探し当て、購入の際に誤って他のリンクをクリックしてしま
 いました。そのページに「前のページに戻る」というリンクがあったので、ク
 リックしてみると何と、トップページに誘導されてしまいました。
  また、再度探して目的の商品にたどり着かなくてはなりません。「冗談じゃ
 ない」と言って他のサイトへ移動してしまいます。

  ユーザがインターネットにアクセスする動機を考えれば、サイト内のナビゲ
 ーションは実に重要な意味があります。トップページを含め、それぞれのペー
 ジにおけるナビゲーションの設定には、考え抜かれた設計をしましょう。

 ■コンテンツの大きさや色のコントラスが適切である
 これはアクセシビリティにも通ずる重要な項目です。ノートパソコンのような
 小さなモニター環境で閲覧する人は少なくありません。むしろ、今後のモバイ
 ル環境によっては主流になる可能性が非常に大きいでしょう。
  (アクセシビリティについては次号で予定しています。)

  小さな画面でも全体のコンテンツがうまく収まるように設計する必要があり
 ます。特に横方向のスクロールは避けるようにしましょう。
  また、訪れたユーザにとって重要な情報は、スクロールさせない場所に配置
 することも「コツ」です。

  背景色と文字のコントラストが不鮮明な場合、大切な情報が伝えられなくな
 る可能性があります。色に頼った表現を見直すことも大切です。

 ■どんなブラウザで閲覧しても適切にレンダリングできる
 サイトを訪れるユーザは千差万別です。当然、利用しているブラウザも多種に
 わたって閲覧されます。ページ作成者が1つだけのブラウザで「最適化」され
 ていたとしたら、それ以外のブラウザでは「最適化」しない場合があります。

  もともとHTMLにしろ XHTMLにしろ、文書は論理構造を記述するを求められて
 いるので、物理的なプレゼンテーション(見栄え)を作成するものではありま
 せん。
  特定のブラウザによる独自タグの使用は避けるように心がけましょう。決し
 てユーザに、閲覧するブラウザの銘柄やバージョンを指定してはいけません。
 「見栄え」を構成したい場合はスタイルシートを利用しましょう。

 ■難解な専門用語には注釈や用語解説が備わっている
 特定の分野に特化したサイトならば、特定の専門的な用語や言葉があるのは当
 然なことでしょう。
  そのサイトを利用する人には最初からそれなりの知識を持ったユーザならば
 問題ありませんが、まるで初心者というユーザだっているのです。

  そのサイトが便利で使いやすいとは、そのような初心者ユーザでも安心して
 情報に触れることができるものです。そのためにも、注釈や用語解説のページ
 をあらかじめ用意することは必須条件といえるでしょう。
  「高度な解説」とは、難しい言葉を誰にでも判りやすく説明する能力のこと
 を指します。決して自己満足に終わってはいけません。(私も反省です。)

 ■ページのタイトルは、コンテンツに反映した言葉を使う
 本誌サイトへアクセスしてくる人たちが、どのような単語を使って検索サーチ
 から訪れるのかをアクセスログで解析すると、第1位が「インラインフレーム」
 第2位が「初心者+テーブル」でした。

  検索サーチ・ロボット(注1)が取得する言葉はページの「タイトル」です。
 ユーザが検索サイト(Yahooや Google、Infoseekなど)で知りたい情報の単語
 を入力すると、ロボットが収集してきたページのタイトルを集めたデータベー
 スからマッチするサイトを選んで、その結果を表示します。
  その意味からもページのタイトルは重要な意味を持っています。各ページが
 提供するコンテンツを十分に理解し、考え抜かれた言葉をタイトルとするよう
 に心がけましょう。
  ヘッダのmeta要素で記述するページの要約やキーワードの内容を、ロボット
 が拾ってくれれことを、現在のサーチエンジンからは期待できません。モノを
 言うのは、ページのタイトル(題名)です。

◆まとめ
 ここに掲げたユーザビリティの要約はごく一部です。「使いやすいページ」の
確立は Webページ作成者の義務でもあります。それぞれの1つは小さいことかも
しれませんが、1つずつ手直しをすることによって格段と使いやすくなります。
 あなたが作るコンテンツを生かすも殺すも、ユーザビリティにかかっていると
言っても、言い過ぎではないでしょう。

 ホームページ作成の上で大切なことは、そのページが「誰に向けたページ」な
のかを考える必要があります。つまり、サイト全体のポリシー(理念)です。
 しっかりしたポリシーとそれを実現するための設計によって、ユーザビリティ
は、おのずと答えが出てくるはずです。

(注釈用語解説)
 検索サーチ・ロボット
 もともとはインターネット上の著作権の侵害を監視するために開発され、世界
 中の Webサイトを自動巡回させて、コンテンツにある記述などをチェックする
 ために利用されました。
  現在はサイトコンテンツの収集を行い、その情報をデータベースに格納する
 ことで、検索がすばやく表示するサービスのために利用されています。

 ユーザビリティ関連サイト
 ヤコブ・ニールセン(Jakob Nielsen)博士=ユーザビリティの第一人者
 http://www.usability.gr.jp/alertbox/ (日本語訳)

 IBM developerWorks
 http://www-6.ibm.com/jp/developerworks/usability/  (日本語訳)

 WebWord Usability News
 http://www.webword.com/ (英文)

〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓

◆XHTML講座 --- テーブルの作成

 冒頭に述べたように、初心者にとってテーブルは厄介な構文です。今回より数
回にわたりテーブルについて深く解説します。

 テーブルとは、平たく言えば「表組」のことです。表とは、横列と縦列で構成
された項目の並びです。例えば、ある統計を表現する場合に、表組はなくてはな
らない要素といえます。
 下記の表をテーブルで組んで見ましょう。

               (学年末テスト結果)

   氏名  国語  数学  英語  歴史  小計  平均点  備考
  -------------------------------------------------------------------
  田中さん  60点  65点  73点  40点  238点  59.5点 追試
  鈴木さん  84点  46点  90点  68点  288点  72.0点 合格
  中村さん  48点  82点  55点  50点  235点  58.8点 追試
  ばんばん  24点  30点  20点   5点   79点  19.8点 落第
  -------------------------------------------------------------------
  平均点     54点    56点  60点  41点  210点  52.5点  −

 ■テーブルの設定
 テーブルを設定するために、<table> を記述します。(終了タグ必須)

 ■横列の設定
 表の横列を設定するために、<tr> を記述します。(終了タグ必須)

 ■セルの設定
 セルとは、表の中にある1つのマス目のことを指します。表はセルの集合体な
 ので、必ず最低1つ以上のセルが必要になります。
 セルを設定するために、<td> を記述します。(終了タグ必須)

 ■キャプション(題名)の設定
 テーブルにキャプションを表示させるために <caption> を記述します。
 (終了タグ必須)

 以上のタグを使って簡単にテーブルが表現できます。テキストエディタを起動
して以下のようにタイプしてください。

<?xml version="1.0" encoding="Shift_Jis"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <!-- 改行せずに -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_Jis" />
<title>テーブルのサンプル</title>
</head>

<body>
<table>
<caption>(学年末テスト結果)</caption>
<tr><td>氏名</td>
    <td>国語</td>
    <td>数学</td>
    <td>英語</td>
    <td>歴史</td>
    <td>小計</td>
    <td>平均点</td>
    <td>備考</td></tr>

<tr><td>田中さん</td>
    <td>60点</td>
    <td>65点</td>
    <td>73点</td>
    <td>40点</td>
    <td>238点</td>
    <td>59.5点</td>
    <td>追試</td></tr>

<tr><td>鈴木さん</td>
    <td>84点</td>
    <td>46点</td>
    <td>90点</td>
    <td>68点</td>
    <td>288点</td>
    <td>72点</td>
    <td>合格</td></tr>

<tr><td>中村さん</td>
    <td>48点</td>
    <td>82点</td>
    <td>55点</td>
    <td>50点</td>
    <td>235点</td>
    <td>58.8点</td>
    <td>追試</td></tr>

<tr><td>ばんばん</td>
    <td>24点</td>
    <td>30点</td>
    <td>25点</td>
    <td>5点</td>
    <td>79点</td>
    <td>19.8点</td>
    <td>落第</td></tr>

<tr><td>平均点</td>
    <td>54点</td>
    <td>56点</td>
    <td>60点</td>
    <td>41点</td>
    <td>210点</td>
    <td>52.5点</td>
    <td>−</td></tr>
</table>

<body>
</html>

 実行結果
 http://www.scollabo.com/banban/magazine/sample/mmsample_80.html

<注意>
 構文は見やすくするために空白を多用しています。実際にはタブキーを使って
 空白を確保します。この構文をコピーしても表示に問題が出ると思いますので
 その際には、すべて空白部分を削除してご利用ください。

  保存の際には拡張子は、.html とします。文書が XHTMLでも、そのようにし
 てください。もし .xhtml とした場合、ブラウザによっては正しく表示されな
 い場合があります。古いブラウザとの互換性を保つために、拡張子の記述には
 「.html」としてください。

〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓

◆解説

<caption>(学年末テスト結果)</caption>
  テーブルのキャプションを設定し、表示させます。なお、この設定はあくまで
 任意です。絶対にキャプションを設定しなければならないというわけではあり
 ません。

<tr><td>氏名</td> 〜 <td>備考</td></tr>
  trタグは横列の行を設定し、この中にセルを配置します。終了タグによって、
 横列の行が終わります。

 tdタグは、データセルを意味し、1つのセルを設定します。この中には他のブ
 ロックレベル要素や別のテーブルなどを配置することが可能です。
  HTMLでは、tdタグの終了タグは省略が可能ですが、XHTMLは省略できません。

〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓

◆テーブルの手直し

 実行結果を見ていただければ分かりますが、なんとも締りのない間の抜けた表
となってしまいました。少し手を入れて表らしくしたいものです。
 そこで、枠線を表示し、セル内に余白を設けて読みやすくしましょう。

 また、表の最初の横列は、見出しとなるためにこれも少し改善します。

 cellpadding の追加 セル内の余白を設定します。単位はピクセルです。
 cellspacing の追加 セル間の余白を設定します。単位は同じくピクセルです。
 <td> を <th> に変更します。th要素はヘッダセルを意味し、一般的な視覚系
 ブラウザでは文字が強調され、センタリングして表示されます。
  border を追加して枠線を表示します。単位はピクセルです。

 変更はセル内の余白を5ピクセルとって枠線から文字までに余裕を持たせます。
 セル間の余白は0としました。枠線を表示するため、セル間に余白があると、
 少しみっともなくなります。
  枠線は1ピクセル分として、セルのすべてに枠線を表示します。

変更部分
<table cellpadding="3" cellspasing="0" border="1">
<caption>(学年末テスト結果)</caption>
<tr><th>氏名</th>
    <th>国語</th>
    <th>数学</th>
    <th>英語</th>
    <th>歴史</th>
    <th>小計</th>
    <th>平均点</th>
    <th>備考</th></tr>

  以下は最初の構文とまったく同じです。

  実行結果
 http://www.scollabo.com/banban/magazine/sample/mmsample_81.html

〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓

◆グループ化

 テーブルでは、横列や縦列を細かく分類してグループ化することができます。
グループ化をすることによって表が一段とダイナミックに変身し、より見やすく
かつ、スタイルシートの設定が簡単に行えます。

 ■横列のグループ化
 横列をグループ化する機能は次のように3つあります。

 thead  テーブルの横列をヘッダとして設定し、テーブルの最上部に配置され
          ます。thタグや、tdタグまで含めることが可能です。

 tbody   テーブルの本体部分に当たる部分を指します。通常、何も設定してい
     ない場合には、自動的にこのタグが補完されています。

 tfoot   テーブルのフッタ部分をグループ化し、テーブルの最下部に配置され
     て表示します。

 先ほどのテーブルの構文では、氏名や科目を表示していた部分がヘッダに当た
 り、テーブルの下位に表示された平均点などがフッタ部になり、それ以外のセ
 ルを持った部分が本体にあたります。
  これらにスタイルシートで見栄えを設定して、テーブルをダイナミックに変
 化させます。


<?xml version="1.0" encoding="Shift_Jis"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <!-- 改行せずに -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_Jis" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="table.css" />
<title>テーブルのサンプル</title>
</head>

<body>
<table cellpadding="3" cellspasing="0">
<caption>(学年末テスト結果)</caption>
<thead>
<tr><td>氏名</td>
    <td>国語</td>
    <td>数学</td>
    <td>英語</td>
    <td>歴史</td>
    <td>小計</td>
    <td>平均点</td>
    <td>備考</td></tr>
</thead>

<tfoot>
<tr><td>平均点</td>
    <td>54点</td>
    <td>55点</td>
    <td>57点</td>
    <td>40点</td>
    <td>210点</td>
    <td>52.4点</td>
    <td>−</td></tr>
</tfoot>

<tbody>
<tr><td>田中さん</td>
    <td>60点</td>
    <td>65点</td>
    <td>73点</td>
    <td>40点</td>
    <td>238点</td>
    <td>59.5点</td>
    <td>追試</td></tr>

<!-- 以下省略:紙面の都合で省略しましたが、実際には記述してください -->

</tbody>
</table>

<body>
</html>


スタイルシート(table.css)の設定

  @charset "Shift_Jis";

  thead {
        background-color: #069;
        color: #fff
      }

  tbody td {
        background-color: #ccf;
        border-bottom: 1px solid #fff
      }

  tfoot {
        background-color: #009;
        color: #fff
     }

   caption { 
        font-weight: bold
     }

 実行結果
 http://www.scollabo.com/banban/magazine/sample/mmsample_82.html

〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓

◆解説

<meta http-equiv="Content-Style-Type" content="text/css" />
 スタイルシートを利用する場合、ブラウザにスタイルシートを使うよ、と知ら
 せます。必ず記述します。

<link rel="stylesheet" type="text/css" href="table.css" />
 外部スタイルシートを文書に読み込ませています。この場合は同位フォルダに
 スタイルシート文書があることを示しています。
  XHTML文書では、基本的にスタイルシートは外部から読み込ませる方法が推奨
 されています。

@charset "Shift_Jis";
 スタイルシートが「Shift_Jis」文字コードで記述されていることを示します。
 なお、XHTML文書と同一の文字コードであれば省略することができます。

thead { background-color: #069; color: #fff }
 テーブルヘッダ部の背景色を明るい青、文字色を白色に設定しています。

tbody td { background-color: #ccf; border-bottom: 1px solid #fff }
 テーブル本体のデータセルのみに適用する設定となっています。
 背景色を薄い青、データセルの下側に1ピクセルの白い枠線を設定しています。

 ( tbody { border: 〜 以下省略 〜 } だけでは、データセルに枠線が表示さ
  れません。)

tfoot { background-color: #009; color: #fff }
 テーブルフッタ部の背景色を濃い青色、文字色を白色に設定しています。

caption { font-weight: bold }
 キャプションのテキストを強調し、一般的な視覚系ブラウザでは太く表示され
 ます。

〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓

  ■縦列のグループ化
 横列のグループ化のほかに、今度は縦の列をグループ化します。これによって
 横幅やコンテンツの位置などを個別に設定し、表全体のバランスを図ります。

 colgroup:縦の列を一括して設定します。
 col   :縦の列を個別に設定します。必ず colgroup要素内で記述します。

 この設定を、caption要素直後、thead要素直前に記述します。
  (ただし、ブラウザによっては表示が異なる場合があります。特にNetscape
 の場合は、width属性をサポートしていません。)

<table cellpadding="3" cellspasing="0">
<caption>(学年末テスト結果)</caption>
<colgroup>
<col width="200" align="center" />
<col span="4" width="150" align="center" />
<col width="200" align="right" />
<col width="200" align="center" />
</colgroup>
<thead>
   <!--  以下省略  -->
</table>

 実行結果
 http://www.scollabo.com/banban/magazine/sample/mmsample_83.html

〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓

◆解説

<colgroup>
 縦の列を一括して設定する要素です。ここでは、細かく設定しているため、こ
 の要素では、何も設定していません。もし、個別の設定がない場合には、
 <colgroup span="8" width="80" align="center"></colgroup>  というように
 記述します。

<col width="200" align="center" />
 最初の縦の列の横幅を 200ピクセル、コンテンツの位置を中央ぞろえとしまし
 た。なお、この要素は空要素なので、行末にスラッシュを入れなければなりま
 せん。この要素は、必ず colgroup要素内で記述します。

<col span="4" width="150" align="center" />
 2番目の縦列から4つの縦列をまとめて設定しています。
 横幅を 150ピクセル、コンテンツの位置を中央ぞろえとしています。

 以下省略

〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓

◆テーブルのアクセシビリティ

 非視覚系ブラウザ、つまりテキストのみを表示するテキストブラウザ、音声に
よって「視覚障害者」に情報を伝える音声ブラウザなどでは、テーブルの理解が
非常に苦手です。
 ユーザビリティで説明したように、ユーザ環境がどのような状況にあっても、
「使いやすさ」を追求するためにも、少しの工夫が必要です。

 ■ summary属性を使う
 テーブルが何を表しているかを的確に説明するテキストを記述します。
 <table cellpadding="5" cellspacing="3" summary="期末テスト結果一覧表">

  ■ ヘッダセルに abbr属性を使って説明を加える
 th要素に「簡単な」説明を記述しておくと、表の構成が伝わりやすくなります。
 <th abbr="テスト受験者">氏名</th>

 ■ ヘッダセルとの関連付け
 ヘッダセルに scope、あるいは longdistance属性を用いて、縦列のデータセル
 の分類に関連付けます。
 <tr><td scope="受験者名">氏名</th>

 各データセルにはヘッダセルと関連して axis属性を用いて記述します。
  <td axis="受験者名">田中さん</td>

 特に音声ブラウザでは、データセルの読み上げの際、そのセルがどの項目に位
 置するのかを正確に伝えることができます。


※次回は、セルの結合とセル内のコンテンツの位置の指定について解説します。

〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓

◆HTML タグの解説 --- img要素
imgとは、imageが語源となったタグで、その名が示すとおりイメージを扱います。
ここで言うイメージとは静止画を指し、写真やイラストなどの「動かない」画像
を、このタグを使ってページに貼り込みます。

 要素分類: インラインレベル要素(エンプティ:空要素)
 DTD仕様:  Strict
 終了タグ: なし
 属性:   src、width、height、alt
 属性値   src:   URI(画像を指定する、画像の拡張子は必ず記述)
       width: 貼り込む画像の横幅の指定(ピクセル)
       height:貼り込む画像の高さを指定(ピクセル)
       alt:  画像が表示されない場合の代替テキスト(必須)
 記述例: <img src="hana.png" width="200" height="180" alt="花の絵">
 子要素として持てる要素: 空要素のためありません

 あらかじめ画像に、width、height 属性で大きさを指定することによって、ブ
ラウザが画像表示の領域を確保し、体感的に速く表示できます。

 万が一画像が表示されない場合や、ユーザ側で画像表示を禁止している場合、
あるいは、非視覚系ブラウザを利用するユーザのために、画像の変わりにテキス
トでその内容を記述する alt属性は必須です。ユーザビリティの項でも述べたと
おり、使いやすいページの構築のためにも、また、アクセシビリティのためにも
必ず代替のテキストを用意しましょう。

 W3Cの方針として、画像などを含むすべてのオブジェクトを object要素に統一
した方法に改めるよう勧告していますが、残念ながらブラウザ側のサポート状況
は大幅に遅れています。静止画の表示は、当面この img要素を利用することにな
りそうです。

〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓

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

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

 次回は、アクセシビリティとテーブル作成続編を予定しています。

〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓

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

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

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

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

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


〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓

<えでぃた〜ず・るーむ>

 春分の日を迎え、長く厳しい寒さから開放される日が近づいてきました。春に
は穏やかな陽が注ぎ、寒さで縮んでいた体をほぐしてくれます。本当にいいもん
です。
 一方で戦争が始まりました。私は取り立てて平和主義者というわけではありま
せんが同じ地球の上のどこかで、凄惨な殺し合いが行われているかと思うと、春
だというのに、心が冬になります。

 戦争といえば、インターネットが軍事技術の中で生まれたことを知る人は少な
いと思います。その昔アメリカの国防省が、ソ連(現ロシア)との冷戦構造の中
で核兵器による攻撃の脅威にさらされていたため、ある基地が攻撃されても、軍
事ネットワークが遮断されずに機能を維持することから、アーパネットなるもの
が開発されて、やがて民間に委譲されました。インターネットの始まりでした。

 軍事技術の中で生まれた現在のインターネット上で、今回の戦争を非難し反対
を叫ぶ Webサイトは、検索してみると世界中でもの凄い数に上ります。ある意味
では皮肉なことでしょう。
 しかし、残念ながら、そうした圧倒的な数の声が、まったく非力であることを
思い知らされるます。戦争に進もうとする「力」の前では、幸か不幸かインター
ネットは何もできません。

 何度も述べますが私は平和主義者ではありません。どちらが正しいとは言えま
せんが、争わなくて済むことができるものなら争わないほうがいいに決まってい
ます。
 戦争に正義なんかあろうはずがありません。「大量殺戮兵器を作るのはけしか
らん!」などと言っておきながら、大量殺戮兵器を使って攻撃するのは、どう考
えても腑に落ちません。
 この戦争の背景は何なのでしょう。(テロ?石油?民主主義?国益?)

 きっとこの戦争でも多くの罪のない一般市民が巻き込まれ殺されていくのかと
思うと、やりきれません。いっぱい、いっぱい人が死んでいくんです。これは現
実です。
 まったく「穏やかな陽の春」ってのは、どこに行っちまったんだい!?

〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓

◆著作権について
個人がご自分のPCに保存して利用する以外の記事の転載、引用は基本的に応じ
ておりません。記事中の内容について、無断で使用することを固く禁じます。
 なお、記事中のスタイルシート、HTMLをご自分のページ作成に自由に使ってい
ただいても差し支えありません。

            Copyright(C) 2002-2003  www.scollabo.com/banban/
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓



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