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

                   毎週金曜日配信 What's New 2004/2/27
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

  ┏┏┏┏   初心者のためのホームページ作り/Web for beginner
  ┏┏┏         http://www.scollabo.com/banban/
  ┏┏
  ┏              <第86号>

                banban@scollabo.com

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

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

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

  今週のコンテンツ
      ■ Webデザイン 第29回 --- PDFファイル
   ■ HTML講座  第29回 --- アクセシブルなテーブル その2
   ■ CSS講座 第7回 --- テキスト その2
    ■ 属性の解説(第12回) --- alt属性

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

◆Webデザイン(第29回) PDFファイル

 PDFとは、Portable Document Formatの略で、コンピュータ画面上で Windows、
UNIX、Macintosh などのシステムの違いに影響されず同一の文書表示を可能にし
ている文書フォーマットです。
  PDFファイル形式の文書は他のシステムで作成した文書でも元のレイアウトを
再現できるため、インターネットによる製品カタログやパンフレット類の配布な
どに利用される機会が非常に多くなっており、現在の電子ドキュメントの標準形
式といえるでしょう。

 こうした PDF形式の文書を作成できるツールは数多く提供されていますが、代
表的なものは、なんといっても Adobe社の Acrobatが有名です。この形式の文書
を Web上で閲覧するためのプラグインソフトも無償で提供されています。

 ■PDFフォーマットの功罪
 確かに PDF形式は作者が意図したデザインを保持してそのまま出力しますので
 Webデザイナーには人気のあるフォーマットです。
  しかし、それを閲覧するためには専用のプラグインツールが必要になってき
 ます。大抵の場合は、自動的にダウンロードして入手することができますので
 閲覧者がまごつくことは少ないかもしれませんが、すべての Webブラウザがそ
 うであるとは限りません。

  また、プラグインを上手くインストールできても、閲覧するたびにプラグイ
 ンが起動し、書類をダウンロードするまでにはかなり時間がかかり、多少うん
 ざりすることもあるのではないでしょうか。 PDFファイルの容量が重いという
 理由もあって、クリックするのをためらうことさえあります。

 ■PDF形式を利用する文書
 その意味でもコンテンツのほとんどを PDFにしてしまうのは勘弁してもらいた
 いところです。
  では、どのようなシーンで PDFは利用されるのでしょうか。

  冒頭でも説明したとおり、製品のマニュアルや技術解説などでは図解入りで
 詳しく説明できるのは PDFの特徴です。しかしそれとて、通常のHTMLで十分表
 現することができます。
  多くの企業で利用されている最大の理由は何だろうといろいろと考えてみま
 した。

   PDFファイルは、一括してローカルマシンに保存することが可能なため、オ
 フラインでゆっくり読むことができます。この方が通信費などを気にする必要
 がないので、ナローバンド環境の利用者にはありがたいかもしれません。
  特に膨大な量の資料にはうってつけでしょう。HTML文書だけではできないこ
 とを PDFファイルは可能にできます。これが PDFの最大の利点なのではないか
 と考えます。

   PDF形式の利点と欠点を十分に熟知したえうで、閲覧者が好感が持てるよう
 に、上手な PDFファイルの扱いをしたいものです。

                  (第30回 更新のタイミングにつづく)

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

◆HTML講座 (第29回) アクセシブルなテーブル その2

 前回は、データセルに関する属性について説明しました。今回は、少し複雑な
テーブルに関するアクセシビリティを実施するための属性について解説します。

 表組には、時としてデータを多次元として表現することがあります。例えば以
下のデータを参照してください。

 1.国語
   田中さん
   前年度平均点 65.8点
   今年度平均点 63.5点

   鈴木さん
   前年度平均点 48.2点
   今年度平均点 51.1点

 2.英語
   田中さん
   前年度平均点 54.1点
   今年度平均点 55.7点

   鈴木さん
   前年度平均点 37.9点
   今年度平均点 43.3点

 このデータには、「科目」「名前」「点数」という3次元のデータが2つ並ん
 でいます。こうした表のそれぞれのセルに、どのようにして関連付けていくの
 かが課題になります。

                 点数 →
      / 科目
           ┌────┬───────┬───────┐
 名         │  国 語 │ 前年度平均点 | 今年度平均点 |
 前      ┌────┬───────┬───────┐──┤
  ↓      │  英 語 │ 前年度平均点 | 今年度平均点 |  |
        ├────┼───────┼───────┤

  こうした多次元にわたる表を軸に考えたときに、各セルの関連付けは以下の
 axis属性を使って明示します。

 ■axis属性
 軸となるヘッダセルに分類名を設定し、そのヘッダセルと関連付けるために、
 scope属性、あるいは headers属性を使います。

  上記のデータから「科目」を軸として考えた場合、

 <tr><th id="english" axis="英語" abbr="科目">英語</th>
      <th id="before" axis="前期" abbr="2003年">前年平均点</th>
      <th id="this" axis="今期" abbr="2004年">今年平均点</th></tr>

 このようにして、見出しを示すヘッダセルを作成します。これに対応するデー
 タセルは、以下のようにして関連付けることができます。
  ここでは headers属性を使って、そのセルがどの見出しと関連しているのか
 を明示しています。

 <tr><th axis="tanaka" abbr="受験者" scope="row">田中さん</th>
      <td headers="english before tanaka">65.8点</td>
      <td headers="english this tanaka">63.5点</td></tr>

 「65.8点」というデータは、田中さんの英語という科目の、前年(2003年)平
 均点であることを示しているのがお分かりいただけるでしょうか。
  なお、サンプルに示したとおり headers属性には、空白で区切ることにより
 複数の識別子を指定することができます。

  では、前回解説した属性を織り交ぜて、実際の多次元的なテーブルを作成し
 ます。ここでは、幾つかのヘッダセルを結合しています。

<!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">
<!--
body    { margin: 1em 6% }
caption { text-align: left;
          font-weight: bold }
td      { text-align: center }
-->
</style>
</head>

<body>
<table cellpadding="3" cellspacing="0" border="1" summary="成績一覧表">
<caption>期末試験成績一覧表</caption>
<tr>
  <th abbr="受験者" rowspan="2">氏名</th>
  <th colspan="2" id="english" axis="英語" abbr="科目">英語</th>
  <th colspan="2" id="tongue" axis="英語" abbr="科目">国語</th>
</tr>

<tr>
  <th id="before_1" axis="英語前期" abbr="英語2003年">前年平均点</th>
  <th id="this_1" axis="英語今期" abbr="英語2004年">今年平均点</th>
  <th id="before_2" axis="国語前期" abbr="国語2003年">前年平均点</th>
  <th id="this_2" axis="国語今期" abbr="国語2004年">今年平均点</th>
</tr>

<tr>
  <th abbr="名前" axis="受験者" id="tanaka" scope="row">田中さん</th>
  <td headers="tanaka english before_1">65.8点</td>
  <td headers="tanaka english this_1">63.5点</td>
  <td headers="tanaka tongue before_2">54.1点</td>
  <td headers="tanaka tongue this_2">55.7点</td>
</tr>

<tr>
  <th abbr="名前" axis="受験者" id="suzuki" scope="row">鈴木さん</th>
  <td headers="suzuki english before_1">48.2点</td>
  <td headers="suzuki english this_1">51.1点</td>
  <td headers="suzuki tongue before_2">37.9点</td>
  <td headers="suzuki tongue this_2">43.3点</td>
</tr>
</table>

</body>
</html>

  サンプル実行結果
  http://www.scollabo.com/banban/magazine/mm/sample_86-1.html


◆解説

■<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
 HTML文書の文書型定義を宣言しています。文書型定義は、どのようなHTML文書
 でも、必ず明示しなければなりません。

  ここでは、HTML4.01厳格仕様として宣言しています。そのため「非推奨」と
 呼ばれる要素型や属性を使うことができません。

■<html lang="ja">
 HTML文書における最上位要素は html になります。この要素型の指定は省略す
 ることが可能ですが、当講座では必ず明示しています。

  lang属性は、要素内容が「日本語」であることを示すために「ja」としまし
 た。遠く離れた閲覧者に対し、その言語がどこの国のものであるのかを示すた
 めに、この属性で言語コードを指定しなくてはなりません。インターネットが
 まさにインターナショナルであることの一端であることを物語っています。
  アクセシビリティの観点でも、この属性を必ず使うようにしましょう。

■<meta http-equiv="Content-Type" content="text/html; charset=Shift_Jis">
 ここで示す mata要素とは、ユーザエージェント (HTTPを解釈するソフト)に対
 して、あるいは Webサーバに対して、文書の MIMEタイプを表わしています。

  ここでは、このHTML文書が、SHIFT_JIS という文字コードで、テキスト形式
 で記述されたことを伝えています。文字符号コードを明示することは、文字化
 け防止を期待することができます。

■<meta http-equiv="Content-Style-Type" content="text/css">
 この文書では、Cascading Style Sheet (CSS) を利用しています。そのため、
 ユーザエージェントに、その形式を伝えています。スタイルシートを利用する
 際には、この1行を加えることが推奨されています。

■<title>アクセシブルなテーブル</title>
 文書のタイトルとなるテキストを記述します。どのようなHTML文書であっても
 この title要素を省略することは許されていません。
  文書全体が誰にでも理解できるような文章を簡潔に用意します。

■<style type="text/css"> 〜 </style>
 ヘッダ部で記述するスタイルシートを「埋め込み型:リンキング方式」と呼び
 ます。この形式のスタイルシート設定は、必ずヘッダ部では位置しなければな
 りません。
  なお、スタイルシート本文は、<!-- 〜 --> というように、コメントで囲む
 ように心がけましょう。これは CSSスタイルシートを実装していない、あるい
 は「オフ」にしている環境に対する配慮となります。コメントで囲まない場合
 最悪、スタイルシート本文がそのまま出力する危険があります。

■body { margin: 1em 6% }
 コンテンツを表示する Webブラウザ画面のスタイルシートを設定しています。
 ここでは上下の余白を1文字分、左右をブラウザ画面の相対的な「長さ」であ
 る6パーセントに設定しています。

■td { text-align: center }
 テーブルのデータセルに対してスタイルを設定しています。ここではすべての
 td要素内に配置されるコンテンツの位置を中央揃えにしています。

■caption { text-align: left; font-weight: bold }
 テーブルのキャプション(表題)を示す要素の文字位置を左寄せに、文字を強
 調させています。なお caption要素では、デフォルトの文字位置は中央揃えと
 なっています。
  表現する表組に枠線を表示させる場合には、できるだけ「表題」を提示する
 ように求められています。

■<table cellpadding="3" cellspacing="0" border="1" summary="成績一覧表">
 テーブルを定義しています。
  このテーブルでは、セルの内側の余白を3ピクセル分に、またセルとセルの
 間隔を無くしています。枠線は1ピクセル分として、すべてのセルで表示され
 ます。なお summary属性は、非視覚系ブラウザに対して、テーブルの概要を示
 しています。

■<caption>期末試験成績一覧表</caption>
 アクセシビリティのガイドラインでは、枠線を表示するテーブルには、表題を
 表示することを強く求められています。 summary属性があるので、冗長的にな
 りますが、なるべく caption要素を使うようにしましょう。
  ただし Mozilla系の Webブラウザでは、左寄せにした場合、テーブルの枠の
 外で表示される場合があります。多分、バグではないかと推測します。

■<tr> 〜 </tr>
 テーブル内でコンテンツを配置する場合、必ず、tr要素内に最低1個以上のセ
 ルを置かなければなりません。この要素は、基本的に横列の「行」を示すもの
 です。この中に、td、th要素を配置します。なお、終了タグの省略は許されて
 いますが、将来の XHTMLを考えると、なるべく記述するクセをつけましょう。

■<th> 〜 </th>
 ヘッダセルを定義します。一般的な視覚系ブラウザでは文字が強調され、中央
 揃えで出力します。
  各属性は、以下のとおりです。
  ・abbr   見出しを定義するセルの概要を明示します。
  ・rowspan 数値で示された分の直下の行のセルと結合します。
  ・colspan 数値で示された分の横方向のセルを結合します。
  ・id    識別子を明記します。識別子は1つの文書内では複数同じ IDを
        設定することができません。識別子は、headers属性と関連付け
        られます。

  この th要素は td要素と共に終了タグを省略することが可能ですが、なるべ
 く記述するように心がけましょう。

  〜 以下省略 〜


◆アクセシブルなテーブルの要望

 前回解説したとおり、非視覚系ブラウザにとって、テーブルのレンダリングは
 難解で、非常に分かりにくいものです。
  一方で、表組を表現するには欠かせない要素でもあります。前回と今回説明
 したぞれぞれのアクセシビリティを満たす属性を巧みに利用することで、二律
 背反するテーブルを賢く表現することが可能です。

  作者が提供する有用な情報をテーブルで表現したいとき、多くの Web閲覧者
 の環境を意識することはとても大切なことです。誰でも確実に情報を受け取れ
 るようにするため、アクセシビリティという思想を身に付けておきたいところ
 でしょう。

  次回は、視覚系ブラウザにおけるテーブルの「上手な表現」について解説す
 る予定です。テーブルは非常に便利ですが、使い込むほどに、その奥の深さを
 感じます。

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

◆CSS講座(第7回) テキスト

 今回も引き続き、情報提供の主たる手段であるテキスト(文字列)に関連する
スタイルシートについて解説します。

 ■文字の位置指定
 文字をどの位置に指定するのかを設定します。ただし、この指定はブロックレ
 ベル要素内で配置されるテキストにしか適用されません。インラインレベル要
 素では無視されますので扱いに注意してください。

   位置指定の属性
    text-align 文字の位置を指定します。

   位置の指定は以下の3つです。
    ・left   左寄せ(デフォルト値)
    ・right   右寄せ
    ・center  中央揃え
    ・justify  両端揃え

   書式:
    p { text-aligh: center }

 ■インデントの指定
 インデントとは「字下げ」の意味で、通常左寄せのところを、ある程度の間隔
 でオフセットさせ、テキストの最初の文字に対して設定します。

  普通の文字では、こうなりますが、
   インデントすると、このように表現します。
  ↑(この部分がインデントされています。)

   オフセットを示す属性
    text-indent インデントを設定します。単位はスタイルシートで扱う
           長さの単位となります。

   書式:
    p { text-indent: 1em }  1文字分の字下げ

 ■英文の大文字・小文字の指定
 英文の文字列に対して、大文字、あるいは小文字で表現します。また、単語の
 最初の文字に対してのみ、大文字にすることもできます。

   英文の文字スタイルの属性
    text-tarnsform 英文字の文字スタイルを指定します。

   指定できるスタイルの種類
    ・none    何もしない(そのまま出力する)
    ・captalize  単語の最初の文字のみ大文字にする
    ・lowercase  英文すべてを小文字で出力する
    ・uppercase  英文すべてを大文字で出力する

   書式:
    p { text-transform:  captalize }

 ■文字に線をつける
 文字に、下線、上線、末梢線、及び点滅表示などを設定することができます。
 ただし、点滅表示の場合、扱いに気をつけてください。点滅させると、文字が
 読みにくいものです。なお、点滅表示は、ブラウザによって実装されていない
 ものがあります。(MSIEは不可)

   文字の線をつける属性は以下のとおりです。
    text-decoration 下線、上線、末梢船などを指定します。

   文字の線のスタイルは以下の5つが規定されています。
    ・none     線表示や点滅などは出力しない
    ・underline   下線を表示する
    ・overline     上線を表示する
    ・line-through  末梢線を表示する
    ・blink     点滅表示する

   書式:
    p { text-decoration: underline }

 ■文字にスモールキャップを設定する
 スモールキャップとは大文字でありながら小文字のように小さくしたような形
 状をしている種類の文字の表現を指します。スモールキャップのフォントがな
 い場合には、大文字を縮小して代用されます。

   スモールキャップを指定する属性
    font-variant 文字をスモールキャップに変換して置換えます。

   スモールキャップに関する属性の値
    ・none    何も変化しない
    ・samll-caps 文字をスモールキャップに指定する

   書式:
    p { font-variant: small-caps }

 ■フォントを設定をまとめて行う
 前回説明したフォントに関する設定を一括して行います。設定できるスタイル
 シートは以下のとおりです。

   一括して設定するフォントの指定
    ・font-style   フォントを斜体にする
    ・font-variant  フォントをスモールキャップに変換する
    ・font-weight   フォントを強調させる
    ・font-size    文字の大きさを指定する
    ・line-height   行間の高さを指定する
    ・font-family   フォント名を指定する

   書式:
    p { font:  font-style  font-variant  font-weight 
          font-size/line-height  font-family }

   なお font-size と line-height は、必ずスラッシュで区切ってまとめて
   設定します。font-style、font-variant、font-weight の順番は問われま
   せん。各設定は空白で区切ります。

   具体的な使用法
    p { font: italic normal normal 1em/130% sans-serif }

  テキストという文字情報は、非常に重要な手段です。各フォントの設定を吟
 味しながら、要素内容に合わせた設定を心がけながら、読みやすい環境を提供
 するようにしましょう。
  次回は、マージン(margin)という余白について解説します。

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

◆HTML、XHTML属性の解説 --- alt属性

 静止画などのオブジェクトが、何らかの理由で表示されなかった場合の、代替
 となるテキストを用意するための属性です。

 ■alt属性 オブジェクトの代替テキスト
 DTD:    すべての文書型定義で利用可能
 属性値:  テキスト
 記述法:  <img src="hana.jpg" width="250" height="180" alt="バラの花">
 関連要素: :applet、area、img、input

 XHTMLの制限: 特にありません。

 HTML4.01属性の中でも、最もポピュラーな属性の1つです。画像などのオブジ
 ェクトが、何らかの理由で、あるいは Webブラウザ側の理由で表示されなかっ
 た場合、そのコンテンツの代替となるテキストを用意します。

  代替テキストは、表示されるべきオブジェクトの内容が直感的に伝わる内容
 を用意し、万が一オブジェクトがなくても、全体の情報が的確に伝わるように
 します。
  このテキストは、案外易しいようで難しいものです。特に写真などでは、文
 章だけでその内容を伝えるのは至難の業です。いかにして的確に分かりやすい
 文章を作成するかは、作者のセンスによるところです。

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

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

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

 次回は、3月6日に配信を予定しています。(もう3月なんですねぇ・・)

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

質問・ご意見ははこちらまで→ banban@scollabo.com

 なお、ご質問の際には、あなたがお使いのOSや Webブラウザ、テキストエデ
ィタなど、なるべく分かりやすく制作環境を明記していただけると回答しやすく
なると思います。
 ただし、個人的な事由により返事が遅れることがあります。ご了承ください。
お急ぎの場合には、当サイト内の掲示板をご利用ください。きっと誰かが答えて
くれると思います。

発行者 ばんばん
協 力 スズキ・コラボレーション 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://backno.mag2.com/reader/Back?id=0000090196

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

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

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

 当地(神奈川県)では、このところ暖かい日が続いています。外に出て軽い運
動をすると汗びっしょりになります。暦の上では春なのですが、本来はまだまだ
寒いはず、やはり温暖化なのでしょうか。

 昨年の冷夏では農産物の生産に大きく影響しましたが、こうした異常な天候が
続くと、この先、何か良からぬことが起こるのではないかという暗示のようで、
不安を感じてしまう今日この頃です。

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

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

            Copyright(C) 2002-2004  www.scollabo.com/banban/
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□



This page is Valid HTML 4.01! 最新公開日 2004年3月2日
Copyright(C) 2002-2004 banban@scollabo.com