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

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

                <第61号>

            wfb-org@jcom.home.ne.jp
        (初心者のホームページ作り臨時制作委員会)

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

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

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

  今週のコンテンツ
      ■ Webデザイン 第9回 --- 「パンくずリスト」とアクセスキー
   ■ HTML講座  第9回 --- フォント
   ■ XML初級入門講座 第1回 --- 序章:XMLとは
    ■ タグの解説 --- pre要素
    ■ アンケートのお願い

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

◆Webデザイン(第9回) パンくずリストとアクセスキー

 一般的に言われている「パンくずリスト」とは、トップページを除くサイト内
の各ページの最上部あるいは、上部に示されるナビゲーションガイド(リンク)
を指します。
 主に記載される内容は、現在の場所、目次、前のページ、次のページ、そして
ホームへのリンクなどがあります。

 「パンくず」という語源は、鳥たちがパンくずに誘われるまま移動するという
様から、ナビゲーションという働きを持っています。

 ユーザにとって今いる場所が常に分かるということで安心感があり、いつでも
前のページに戻ったり、目次を参照したり、ホームに戻ることができます。迷子
にさせないための効果的なナビゲーションガイドといえるでしょう。

 当サイトのほとんどのページで「パンくずリスト」を設けています。現在、サ
イト内のパンくずリストを少しずつ手直ししています。

 必ずしもパンくずリストを採用する必要はありませんが、巨大サイト、あるい
は巨大サイトに発展する可能性がある場合、ユーザの目的を達成するためにも、
ある程度のナビゲーションを用意したほうが親切というものですし、使いやすさ
を向上する意味でも非常に効果的です。

 今年 6月24日に W3Cよりアクセシビリティに関する新たなガイドラインの草案
が発表されました。(WCAG:Web Content Accessibility Guidelines 第2版)

 その中で、操作性(Operateble)について、次のように示されています。
「入力やページ間の移動など、コンテンツをどんなユーザーでも操作できるよう
にしなければならない。」

 ユーザが使いやすく操作しやすいということは大変重要です。特に障害者(視
覚、知覚、肢体)にとって、ページの移動が楽に操作できることは、本当にあり
がたいことです。
 その意味からも、パンくずリストにアクセスキーを設定しておくと、マウスが
使えない環境のユーザでもページの移動が楽にできます。

 アクセスキーは任意の1文字を設定します。当サイトのアクセスキーはトップ
ページを除くすべてのページで以下のように統一して設定しています。

  h ホームに戻る(Homeへ戻るという意味で h を選択)
 i  目次に移動する(Index(索引)という意味から i を選択)
  n 次のページに移動する(Next(次)という意味から n を選択)
  b 前のページに移動する(Back(戻る)という意味から b を選択)
  p ページの最上位に戻る(ページのトップという意味で p を選択)

 アクセスキーは、
  Windowsならば 「Altキー+"設定した文字"」、
  Macintosh では、「Ctrlキー+"設定した文字"」
 とキーボードからタイプすれば、指定したアンカーリンクが選ばれます。

 アクセスキー設定方法
   <a href="next.html" accesskey="n">Next</a>

 パンくずリストと、アクセスキーはあらゆる層のユーザにとって、使いやすさ
と、バリアフリーなナビゲーションを実現することが可能でしょう。

 ユーザビリティに富んだ、アクセシブルなサイト構築の設計は、こうした少し
の手間をかけることによって実現するものと感じています。

 ○W3C Web Content Accessibility Guidelines 第2版 Webサイト
   http://www.w3.org/TR/ATAG20/

                (第10回 ホームページのタブーにつづく)

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

◆HTML講座(第9回) フォント

 多くのページ制作者たちがいつも悩ませている中の1つが「フォント」の扱い
です。大きさ、字体、色、文字間隔など、実にフォントの扱いは難しくやっかい
な要素です。

 HTML4.01で非推奨扱いとされている「font」タグは、現実には非常に多くのサ
イトで採用されています。しかし、当講座では、厳格仕様を目指すため、このタ
グは使いません。

 ブラウザの種類によって、フォントの初期値の大きさはマチマチです。そのた
めユーザは自身の手によって、最適な大きさに設定する場合が多いものです。
 例えば、小さな画面の環境では、小さい文字にしていることもあるでしょうし
高齢者は文字を大きく設定している場合もあるでしょう。

 文字情報は実に大切な役割を果たします。それ故フォントの扱いは慎重に行わ
なければなりません。
 せっかくユーザ側で最適な設定をしても、肝心の Webページでは、それを無視
されている場合が多々あります。

 文字が小さくて読みづらいとき、ブラウザの設定で大きくできますが、ページ
側が「絶対値」で設定されていると、文字の大きさを変えることができません。
目の不自由な高齢者は、その情報から隔絶された状況を作ってしまいます。
 これについては、後ほど詳しく説明します。

 ■文字とスタイルシート
 fontタグを使わない替わりに、スタイルシートで文字の大きさや色、字体など
 を設定することができます。スタイルシートでは、文字の大きさを自由にどん
 な大きさにすることも可能です。

  この点を踏まえて、HTMLを作成しましょう。

 以下は、フォントの様々な設定を行ったHTML文書です。今回はヘッダにスタイ
 ルシートを埋め込んだ方法を使います。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-2022-JP">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rev="made" href="mailto:wfb-org@jcom.home.ne.jp">
<title>初心者のためのホームページ作り</title>
<style type="text/css">
<!--
body {
	margin: 1em 10%;
	color: #000000;
	background-color: #ffffff;
	font-size: 1em;
	line-height: 130%;
	letter-spacing: 1px }

h1 { 
	font-size: large;
	color: #006699 }

span {
	color: #ff0000;
	font-style: italic;
	font-weight: bold }
-->
</style>
</head>

<body>
<h1>Microsoft Office System 2003</h1>

<p>
2003年秋に発売が予定されている次期マイクロソフト社のオフィス・アプ
リケーションは、<span>System</span> という名がつけられ、従来とは
まったく異なる構成で作られています。
</p>

<p>
特に、オフィス・アプリのすべてに完全 <span>XML</span> 対応として、
オフィスで作成されたそれぞれの文書を、他のアプリケーションにも
再利用可能だという。それは本当なのか、検証してみよう。
</p>

</body>
</html>

 サンプルの結果
 http://www.scollabo.com/banban/magazine/mmsample/sample_61-1.html


◆解説

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
 HTML4.01厳格仕様の文書型定義を宣言しています。文書型定義は、HTML文書の
 冒頭で、必ず明示的に記述しなければなりません。

<html lang="ja">
 このタグの範囲が、HTML文書を意味しています。lang属性は、文書の言語コー
 ドを設定するもので、ここでは「ja:日本語」を示しています。

<head>
 文書情報をユーザエージェントに伝えるための情報をヘッダ部を設定して明記
 します。

<meta http-equiv="Content-Type" content="text/html; charset=Shift_Jis">
 この文書が、テキストベースで記述されたHTML文書であることを伝えます。
 文字コードは「Shift_Jis」を用いていることを明記します。

<meta http-equiv="Content-Style-Type" content="text/css">
 この文書にテキストベースのスタイルシートを利用することを伝えています。

<link rev="made" href="mailto:wfb-org@jcom.home.ne.jp">
 この文書の作者を伝えています。視覚系ブラウザでは無視されますが、非視覚
 系ブラウザでは作者と連絡を取りたいときにそのメールアドレスを使います。
  必須ではありませんが、推奨されている構文です。

<title>初心者のためのホームページ作り</title>
 文書のタイトルです。このタイトルの設定は必ず記述しなければなりません。


<style type="text/css">
 HTML文書中にスタイルシートを設定する場合に、そのMIMEタイプを明示して設
 定します。

<!--  〜 -->
 スタイルシートの設定をHTML文書中で行う場合には、スタイルシート未対応の
 ブラウザに対する配慮として「コメントタグ」で囲みます。
  コメントが設定されていない場合、スタイルシート未対応のブラウザでは、
 そのソースコードが表示されてしまう危険があります。

body { margin: 1em 10%; color: #000000; background-color: #ffffff;
       font-size: 1em; line-height: 130%; letter-spacing: 1px }
 ブラウザ画面の表示領域全体(bodyタグに囲まれたすべての要素内容)を設定
 しています。

  margin: 1em 10%  上下の余白を1文字分、左右の余白を全体の10%に設定。
  color: #000000   bodyタグに囲まれる文字を黒色に設定。
  background-color: #ffffff; 全体の背景色を白に設定。
  font-size: 1em   ブラウザの初期値の大きさに設定。2em はその2倍に。
  line-height: 130% 上下の行間のを1文字の30%分の間隔に設定。
  letter-spacing: 1px 文字と文字の間に1ピクセル分の間隔を設定。

h1 { font-size: large; color: #006699; background-color: #ffffff }
 第一見出しを設定。

   font-size: large 文字の大きさを初期値から2回り大きく設定。
   color: #006699  文字の色を青系に設定。

span { color: #ff0000; font-style: italic; font-weight: bold }
 spanタグは、それだけでは何も意味を持たないインラインレベル要素です。
 基本的には、スタイルシートで設定するために存在するようなタグといっても
 差し支えないでしょう。

  color: #ff0000 文字色を赤色に設定。
  font-style: italic 文字の字体を斜体(イタリック体)に設定。
  font-weight: bold  文字を強調するボールド体に設定。

以下省略。


◆文字の大きさ

 スタイルシートのおける文字の大きさは、長さ(length)を決める値が適用さ
 れる場合もあります。
  ここでは、それを含めた文字の大きさを紹介します。なお、フォントの大き
 さを指定するスタイルシートの属性は font-size です。

 例: p { font-size: 1em }

 ■絶対値
 絶対値とは、ユーザ環境に影響されず、作者の指定した大きさでレンダリング
 します。ただし、アクセシビリティ・ガイドラインでは、文字の大きさを決め
 る場合には、「絶対値」を使わないように要求しています。

  ミリ(mm)、センチ(cm)、インチ(in)、ポイント(pt)、パイカ(pc)

 ■相対値
 ユーザ画面の相対する比率の大きさでレンダリングします。このためあらゆる
 環境のユーザに適切な大きさになるため、この値を強く推奨されています。

  em : 大文字の M の高さの大きさの文字 
    ex : 小文字 x の高さの大きさ。M よりも一回り小さいサイズになります。
    medium : 標準的な大きさ。デフォルト(初期値)のサイズ。

  smaller  : medium より一回り小さなサイズ。
  samll    : smaller より一回り小さなサイズ。
    x-small  : small より一回り小さなサイズ。
  xx-small : x-small より一回り小さなサイズ。

    larger   : medium より一回り大きなサイズ。
  large    : larger より一回り大きなサイズ。
    x-large  : large より一回り大きなサイズ。
  xx-large : x-large  より一回り大きなサイズ。

  %  : medium を中心としたパーセントによる比率。
  px : ピクセル単位の大きさ。ただし、ユーザ環境に影響するため厳密には
     相対値とは言いがたい単位です。当講座では、絶対値に分類します。

 上記のフォントの大きさは、実際にはブラウザやフォントの種類によって異な
 ることを知っておいてください。一番望まれるのは、大きさを指定しないこと
 です。
  ただし、現実的には無理が多いようですので、その場合には「相対値」で指
 定するように心がけましょう。

 (注意)
  smaller は、Macintosh における MSIE および Netscape ではサポートして
  おりません。また、small は Mac MSIE では常に 12ptで描画します。


◆字体

 イタリック体やボールド(強調)体など、フォントの形を設定することができ
ます。スタイルシートを使わないこれらの設定は以下のとおりです。

 <p><b>イタリック体は、<i>iタグ</i>を用います。</b></p>

  <b> 〜 </b> 文字をボールド体にして強調させます。
 <i> 〜 </i> 文字をイタリック体で表示します。

 ただし、<b>、<i> は、どちらも物理タグと言われるタグなので、別の方法を利
用するようにしましょう。

 <strong> 〜 </strong>  <b> の替わりに使います。
 <em> 〜 </em>  文字を強調します。一般的にイタリック体で表示します。

 スタイルシートが使い慣れれば、文字の強調やイタリック体の設定はスタイル
シートで設定することをお勧めします。

 例: p { font-style: itaric; font-weight: bold }

 日本語におけるイタリック体は、読みにくくなりますので使用の際には十分に
気をつけるようにしてください。むやみなイタリック体は慎むようにしましょう。


◆フォント名(書体)

 フォント名の設定は大きく2つに分類されます。1つが、ユーザ環境を考慮し
た設定で、もう1つが、特定フォント名を指定することです。

 1.不特定多数を考慮したフォント名の指定
   serif   明朝体を設定
   san-serif  ゴシック体を設定
   monospace  等幅フォントの設定

 大体この3つを多用することが多いようです。当サイトでも、monospace は
 よく使います。
  スタイルシート記述法
  p { font-family: san-serif }

 2.特定のフォント名を指定
   MS 明朝     Windows専用の明朝体フォント
   平成明朝     Mac OS X で利用できる明朝体フォント
   MSP ゴシック   Windows専用のゴシック体フォント
   Osaka      Macintosh専用のゴシック体フォント
      wadalab-gothic  Linux専用の渡辺ゴシックフォント

  スタイルシート記述法
  p { font-family: "MSP ゴシック" }
 (フォント名にスペースがある場合には、引用符で囲まなければなりません)

 特定のフォント名を設定する場合の注意点は、ユーザ環境を配慮して、複数設
定するように心がけましょう。あなたが指定した書体は、必ずしも訪問するユー
ザすべてで適用されるとは限りません。

 複数設定のスタイルシート記述法
 p { font-family: Osaka, "MSP ゴシック", wadalab-gothic, san-serif }

  複数のフォント名を設定する場合、カンマで区切って記述します。この場合
 ユーザ環境で「Osaka」がなかった場合に、次の候補である「MSP ゴシック」、
 それがなかった場合には「wadalab-gothic」、それもなかった場合には、ユー
 ザが持っているゴシック体で描画します。


◆フォントの色指定

 色の扱いについては、別途この講座で予定しています。文字の色を設定する場
合には、背景色とのバランスを考慮してください。
 また、意味のない色の設定や、色に頼った設計は遠慮するようにしましょう。

 色の指定は、16進数による RGBの指定のほかに、色名を指定することも可能で
す。ただし、色名を設定する場合、自分だけの環境で指定しないようにします。
安全に使える色名は、全部で16色しかありません。

 詳しくは、下記 URLを参照してください。
  Web Safe Color  http://www.scollabo.com/banban/lectur/color.html


◆まとめ

 テキスト(文字列)とフォントは深い関係にあります。
インターネットにおける有益な情報の共有にはテキストは絶対に欠かせません。

 テキスト、つまり情報を伝える手段として文字があり、フォントは2次的な存
在であることを知ってください。決して色や字体、大きさを伝えるものではあり
ません。

 プロの WEBデザイナーの中には、その職業意識の現われなのか、あるいは自己
満足に陶酔するためか、自分が設計したレイアウトを崩されることに苛立ちを覚
え、それを許さないために、フォントの大きさを「絶対値」で指定することが多
いようです。
 ユーザが欲しているのは、そんなことではありません。デザイナーとしての気
持ちは理解できますが、ユーザはフォントを見るのではなく、情報を見ているこ
とだということを自覚し、もっと気を使うべきです。

 テキストの中には意味を持った文字列があります。その意味を深く掘り下げる
意味でフォントを設定する場合はあると思います。
 逆に、意味のないフォントの設定はやめたほうが安全です。まず先に「情報あ
りき」です。その点を深く考慮したうえで、フォントを扱ってください。

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

◆XML初級入門講座(第1回) 序章

 さて、XMLです。

  XML(Extensible Markup Language:拡張可能なマークアップ言語)とは、一
体何でしょう。そんな疑問点から始めたいと思います。

 ■はじめに
 今までのメールマガジンを読み返してみると、ばんばん氏は XMLの講座につい
 ては、あまり乗り気ではありませんでした。
  その理由は、難しすぎるからです。HTML4.01、XHTML1.1に関するある程度の
 知識や文法についてよく分かっていることも前提になります。
  
  しかし、一方で XHTML2.0 が勧告間近にあることは、多少なりとも XMLにつ
 いての知識が必要になります。ばんばん氏はそのことには懸念しているところ
 もあり、タイミングで解説する必要性を感じていたはずです。
  また、同時に現在の WEBの流れが XMLに向かっているのも事実です。

  このような背景の中で、「初心者のための」というタイトルが付いているこ
 のメールマガジンで、難解な XMLを解説することはそれなりの抵抗もあります。
  しかし、XHTML1.1講座をメールマガジンで最初に取り上げたという自負もあ
 るわけで、XHTMLから XMLを学ぶのはごく自然なことです。また XMLを学ぶこと
 で、HTMLの基本的なことも理解できることでしょう。

  読者の中には、「難しすぎてやってられない」「どこが初心者向けだ」と言
 われる方も出てくるだろうと予想しています。
  そういったことを十分承知の上で、あえて XML講座を連載します。ばんばん
 氏に怒られるかもしれませんが、始めてしまったらもう後には戻れません。

  メールマガジンというメディアの中で、どこまで XMLについて学ぶことがで
 きるのか、実際のところ分かりません。
  でも、できる限り分かりやすく、同じことを何度も繰り返しながら、素晴ら
 しい XMLの世界に飛び込みましょう。
  私たち委員会も皆様と同じ XML初心者です。

 ■何故今になってXML?
 インターネットの急速な進展は、新しい情報流通市場を生み出し、さらに情報
 システムの基本的な仕組みをも変える程のインパクトをもたらしています。

  この世界規模の巨大なネットワークなしでは成り立たない企業すらいくつも
 生まれ、急速に発展しています。10年前を考えると、信じられない光景が今で
 はごく当たり前となっています。

  確かに、HTMLと WWWが今日のインターネットの発展を築き上げたのは間違い
 ありません。
  しかし、グローバルネットワーク全体が、一つの巨大な情報システムあるい
 は、データベースとなっていくとき、ここに参加するアプリケーションの間で
 共通の情報表現やデータの交換におけるルールが必要となってきているのも、
 事実です。

  交換されるべきデータが、OSやアプリケーションなどのプラットフォームに
 依存されてしまうのでは、情報を正しく共有することはできません。
  インターネットの普及に伴う電子取引では、こうした実情から打破するため
 に、お互いが共通する枠組みが必要になってきています。

  その枠組みを実現するのには、HTMLはあまりにもパワー不足です。基本的に
 HTMLは「表現を主体」としたアプリケーションのために、データの再利用が不
 可能なのです。
  つまり、アプリケーションを理解し、プラットフォームに依存しない共通の
 枠組みを提供することができる言語として XMLがあるのです。

 ■XMLが目指すもの
 HTMLと違って XMLはホームページを作成するためのマークアップ言語ではあり
 ません。しかし XML関連の文書を応用することによって Webを含め、様々なシ
 ーンで再利用することができます。

  電子化されたデジタルデータであれば、それを他のアプリやデータベース、
 あるいは、Webの世界でも利用することを可能としたものが XMLです。

  XMLはメタ言語です。メタ言語とは言語のための言語で、XMLを利用すれば、
 プログラム言語さえ開発できます。
  私たちが、C や、Javaなどのプログラム言語を使ってプログラミングすると
 き、決してそのプログラムがかかれた言語(メタ言語)を意識することはあり
 ません。しかし、XMLを学ぶ上で、メタを意識しなくてはならないのです。

  つまり、独自タグを設定する上でもメタ言語が使われるということです。早
 い話が、本当の意味で XMLを使うというのは、新しい言語を設計し、スキーマ
 を記述することを意味します。
  スキーマ(注1)が定まれば、それに沿って文書を記述することができます。
 それは、XMLを使っているというよりも、XMLによって生み出された言語を使っ
 ている、と表現する方が適切と言えるでしょう。

 ■XMLの歴史
 1996年、米国ボストンで開かれた「SGMLカンファレンス」の席上で、W3Cから
 XMLのワーキングドラフト(作業草案)が提出されました。
  その後、1998年2月、XML1.0として正式に勧告されました。

  わずか2年足らずの短い期間で開発を終えた背景には、SGML(注2)という
 土台が存在したことは大きいことだったようです。

  XMLは SGMLのパフォーマンスの悪さや Web上で利用できないことから開発の
 土台が練られ、HTMLには不可能なより拡張されたマークアップ言語を模索して
 いました。
  今日のインターネットの普及に伴い、アプリケーションやプラットフォーム
 に依存しないデータの交換を要望する声は、まさに XMLの開発に呼応した格好
 となりました。

 ■XML作成上のメリットとデメリット
 以下に XMLのメリット(長所)とデメリット(短所)を簡単にまとめました。

 XMLのメリット
 ・XML文書を処理するプログラムの構造が簡単になる。
 ・テキストファイルを扱う既存の多くのツールで容易に扱える。
 ・人間が直接内容をチェックするのが容易で、内容の修正もテキストエディタ
  があれば誰でもできる。

 XMLのデメリット
 ・文字として表現すると回りくどくなり、データ量が増える。
 ・文字列以外はいちいち文字列から変換してから処理することになるので、処理
  が重くなる傾向になる。
 ・文字で表現しにくいし、画像データなどの扱いは不得意である。

 メリットとデメリットを要約すれば、分かりやすさと効率の低下ということにな
 るでしょう。しかし、今日のコンピューターの性能向上を考えると、もはや処理
 が重いとか、データ量は問題にならないくらい進歩しています。
  また、新しい勧告や技術によって、動画さえ扱うことが可能となっています。

  時代の流れとして XMLに注目が集まる今日、XMLを学ばない手はありません。

  次回は、XML作成の決まりごとについて詳しく解説します。


(注釈用語解説)

 注1:スキーマ(Schema)
   要素とその属性を定義し、そのような機能を順序を持っているかを記述し
   た文書(仕様書)を作成します。これによって、独自のタグを使って編集
   する XML文書を作成します。XMLを学ぶ上で避けて通れない課題です。

 注2:SGML(Standard Generalized Markup Language)
   最初に標準化されたマークアップ言語。
    その仕様は、複雑で言語的にも難しく Webへのパフォーマンスも悪くて
   誰もが簡単で自由に作成できるというわけにはいきませんでした。これを
   土台として、HTMLが生まれました。
    HTML、XML は、SGMLのアプリケーションとして定義されています。

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

◆HTML、XHTML タグの解説 --- pre要素

 pre要素は、整形済みテキストを表現するときに用いられます。
  空白や改行を維持して表示するため、プログラムのソースコードを表現する
 などに、多く利用されています。

 要素タイプ :ブロックレベル要素
 仕様 :      HTML4.01Strict、XHTML1.1
 終了タグ :  必須
 属性 :      汎用属性(id、class、lang、titleなど)
 属性値 :    特になし
 子要素として持てる要素 : インラインレベル要素のみ

 HTMLの文書型定義 (DTD) が Transitionalの場合には、他のブロックレベル要
素を配置することができます。
 一般的にテキストは、等副フォントで表示されます。また、ユーザエージェン
トによっては1まわり小さなフォントになる場合もあります。

 ユーザエージェントやプラットフォームの環境によっては、不用意な余白が表
示されてしまう場合もあるので、一般的には、以下のようなスタイルシートを用
いて利用するようにします。

 pre { text-align: left; white-space: pre; font-size: 1em }

 white-space: pre とは、テキストの余白を維持するという意味があり、作者
の記述したテキストの要素内容をそのまま出力します。

 当サイト内では、HTMLのソースコードや、JavaScriptのソースなどの表現に多
用しています。

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

◆アンケートのお願い

 今後のメールマガジンの内容を充実させるためにも、皆様からのご意見をお聞
きしたいと思い、再びアンケートを実施いたします。
 大変お手数をおかけしますが、読者の皆さんの率直な、忌憚のない貴重なご意
見を、下記要領にてよろしくお願いいたします。

 下記アンケート項目をコピーしてメールにて送信いただければ幸いに思います。
なお、アンケートをお寄せいただいた中から抽選で記念品をお贈りいたします。

 アンケート送り先 →  wfb-org@jcom.home.ne.jp

----------------------------- ここから -------------------------------

 1.メールマガジンの掲載量は
   1.多すぎる  2.ちょうど良い  3.少ない

 2.週1回の配信間隔は
   1.少ない  3.ちょうど良い  3.多い

 3.講座内容は
   1.難しい  2.理解できる  3.非常に理解できる

 4.メールマガジンの読みやすさは
   1.読みにくい  2.まぁ読みやすい  3.非常に読みやすい

 5.XML講座は
   1.興味がない  2.興味がある  3.非常に興味がある

 6.あなたの制作環境を教えてください。( OS と Webブラウザ銘柄 )
   ( 例: Windows2000 Professional、 MSIE6.0 )

 7.あなたはホームページを開設していますか
   1.既に開設している  2.開設予定である  3.開設予定はない

 8.取り上げてほしいテーマや課題はありますか
   (                     )

 9.あなたのメールアドレス、ハンドル名(ニックネーム)
    メールアドレス:
    ハンドル名  :

 10.当メールマガジンにご意見がありましたらお願いします。


----------------------------- ここまで -------------------------------

 ■個人情報の扱い
 お寄せいただいたアンケートは、印刷後すべてメーラーから削除いたします。
 当然、パソコンにも保存いたしません。これはセキュリティ対策の一環として
 ばんばん氏からきつく言われています。
  提供いただいた個別の情報は、第三者に見せたり譲ったりすることはありま
 せん。アンケート内容は、オフラインコンピューターのデータベースに登録い
 たします。

 ■アンケートの統計
 アンケートの統計発表は WEBサイトでは掲載せず、このメールマガジンのみで
 行います。その場合も、個人が特定するような内容にならないよう配慮いたし
 ます。

 ■記念品
 記念品は、スズキ・コラボレーションから提供していただきました。また、当
 メールマガジンのバックナンバー、および WEBサイトのすべてを、CD-ROMに焼
 いて提供させていただきます。
  抽選の結果は、当方より当選者の方へメールにてお知らせいたします。なお
 抽選の結果をメールマガジンで発表しますが、特定の名前は掲載しません。ハ
 ンドル名、もしくはイニシャルとします。

 ■WEBサイトをお持ちの方
 もし、ホームページを既に開設している方は、差し支えなければ、その URLを
 お願いいたします。読者の「リンク集」を作ろうと考えています。

 ■アンケート締め切りと発表
 このメールマガジン配信日より1週間程度。発表は第63号にて掲載します。

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

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

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

 次回予定のコンテンツ(変更する場合があります。)
      ■ Webデザイン 第10回 --- ホームページのタブー
   ■ HTML講座  第10回 --- 見出しと段落の正しい使い方
    ■ XML初級入門講座 第2回 --- XMLの決まりごと
    ■ タグの解説

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

質問・ご意見ははこちらまで→ wfb-org@jcom.home.ne.jp

 なお、ご質問の際には、あなたがお使いの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

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

<編集後記>

 関東・東北地方の梅雨明けは本当に遅いものとなりました。農作物や企業活動
にも悪影響が出た今年の長い梅雨は、なかなかパッとしませんなぁ。

 さて、ばんばん氏は手術の影響で当初、めまいや頭痛、吐き気に悩まされてい
ましたが、最近は少し落ち着いたようです。
 医師の話では「回復のスピードが早い」とのことで、今後はより一層リハビリ
に集中した治療になってきます。

 今月の早い時期にリハビリセンターに移送され、自然に囲まれた環境で、専門
家による社会復帰のためのリハビリが行われる予定です。リハビリセンターでは
パソコンの使用も認められるので、彼にノートパソコンを渡す予定です。

 そう遠くないうちに彼からメールが届くだろうことを期待しつつ、同時に、私
たち委員会の「解散」の時期も近いこだろうことを予想します。

 ばんばん氏が残してくれた未完成のメールマガジン原稿もストックがなくなり
次回よりすべて委員会で作成することになりました。自信がありませんが、全員
で力を合わせて発行していきたいと思っています。
 今までのようにボリュームたっぷりというわけにはいきませんが、心をこめて
1行ずつ作成していきます。

 なお、アンケートの件、皆様のご意見を反映できるメールマガジンにしたいと
思っております。項目が多くて申し訳ありませんが、重ねてお願いいたします。

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

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

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



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