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

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

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

                banban@scollabo.com

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

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

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

  今週のコンテンツ
      ■ Webデザイン 第27回 --- 批判と中傷
   ■ HTML講座  第27回 --- 固定ピッチフォントの表現
   ■ CSS講座 第5回 --- スタイルシートで扱う単位
    ■ 属性の解説(第10回) --- readonly属性

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

◆Webデザイン(第27回) 批判と中傷

 今回は難しい問題を取り上げます。きっとどこかで見かけたことがあるかもし
れませんが Webサイト上で展開される「批判」や「中傷」について、私なりの解
釈で取り上げています。
 この記事に「批判」がある場合には、どうぞ遠慮なくお寄せください。心から
歓迎します。

■批判とは
 goo国語辞典(http://www.goo.ne.jp/)によると「批判」とは
 (以下引用文)
  (1) 物事の可否に検討を加え、評価・判定すること。
  (2) 誤っている点やよくない点を指摘し、あげつらうこと。
  (3) 人間の知識や思想・行為などについて、その意味内容の成立する基礎を
    把握することにより、その起源・妥当性・限界などを明らかにすること。

  となっています。では、評価するということはどのような行為を意味してい
 るのでしょうか。その評価は本当に妥当性が確保されているのでしょうか。

  Webページ上で第三者を批判する記事は良く見かけられます。特に IT関連の
 情報を扱うサイトではほぼ毎日といってくらい目にします。

  それらの記事をじっくり読むと、批判をする場合に科学的、あるいは物理的
 な検証を行っている点に注目できます。つまり平たく言えば「〜は〜だから〜
 であり、したがって〜は間違いである」というような書き方をしています。
  同時に自分自身が主張する論拠も、科学的・物理的に検証しています。こう
 したスタンスを常に貫いて、批判の記事を掲載しているのは、ある意味歓迎さ
 れることでしょう。

  もし、そうした「評価」が行われず一方的に「〜は間違いである」と主張し
 ても、その記事を読む側では、何がどうなっているのか見当がつきません。
  例えば、「殺人は許されない行為である」という主張は、それを読む側と作
 者の主張が、既に共有している「法律」という普遍的な観点から判断できます
 が、「あの言論は誤っている」とした場合、それを計る「物差し」を読み手が
 持っていません。つまり、評価とはお互いに共有できる物差しを明確にするこ
 とが、経験的に重要な事柄なのではないかと考えます。

  ついでに goo国語辞典で「誹謗」「中傷」を調べてみると、他人の悪口言う
 こと、根拠のない悪口を表わし他人の名誉を傷つけることとあります。
  この2点には「評価」が存在していません。ありのままの事象を感じたまま
 に取り上げているだけに過ぎません。

  もし Webページ上で、ある言論に反論する場合、そうした「評価」や「根拠」
 がなければ、単に嫌がらせに過ぎません。
  「言論の自由」は保障されていますが、嫌がらせ、つまり誹謗や中傷はその
 範疇には入らない低次元の「たわごと」にしか過ぎません。そしてそれらは、
 立派な「犯罪行為」として認識されています。

  第三者を批判するという記事を Webページに掲載するとき、その言論には常
 に責任が伴います。(Webページだけに限ることではありませんが)
  そこに少しの曖昧さがあれば、逆に当事者から訴えられる場合があります。
 評価とその方法を明らかにした上で指摘するのであれば、そしてそれが誰にで
 も理解可能な根拠を示すことができれば、批判というよりももっと違う新しい
 展開が生まれそうな気がします。

  私は他人のサイトを批判することを流儀としていませんが、矛盾だらけの明
 らかに誤った言論があったとしても、訪れる閲覧者がその可否を判断し、やが
 て廃れていくことだろうと思っています。
  他人を悪く言うことは簡単です。しかしそれは必ず自分に帰ってきます。批
 判を行うとするのなら、それなりの覚悟と、対象に対しての論拠を明らかにす
 べきでしょう。「聞く耳持たず」のスタンスでは、不必要な軋轢を生み、無味
 乾燥な争いに発展してしまう恐れがあります。

  残念ながら、私にはそれほどの勇気がありません。私への批判には耳を傾け
 ますが、私から批判するなどとは、恐れ多くてできそうもありません。確かな
 理論武装を身に付けているのなら別ですが・・

                    (第28回 掲示板の利用につづく)

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

◆HTML講座 (第27回) 固定ピッチフォントの表現

 固定ピッチフォントとは、文字による並びが常に一定であること、大文字も小
文字も同一の領域を持った文字を指します。
 例えば Macintoshならば osaka等幅であり Windowsならば MS ゴシックといっ
たところでしょう。(ただし、マルチバイト文字である日本語などは2バイト分
の領域を確保する)

 Webページで固定ピッチフォントを表現する方法はいくつかあります。
スタイルシートを利用して、ある特定の要素にフォント種を指定する方法があり
ますが、閲覧者の環境に同じフォント種がなかったら意味がありません。
 今回は、HTMLで定義されている固定ピッチフォントの指定と、スタイルシート
における指定の両方を開設します。

 ■固定ピッチフォントで描画するインラインレベル要素
 インラインレベル要素とは、普通の文字と同じで前後に空白や改行はありませ
 ん。インライン(要素の並びのの中)で表現する固定ピッチフォントの要素は
 以下のとおりです。

 <code> 〜 </code>
  短文のプログラムソースなどを表現する場合に利用します。一般的な視覚系
 ブラウザでは、この要素内に配置される文字は固定オピッチフォントで描画し
 ます。当マガジンの Webサイト内では、英文字単語などに利用しています。

 <samp> 〜 </samp>
  code要素同様に、プログラムなどのソースを出力する場合に用いられます。
 この要素に囲まれた文字は、一般的な視覚系ブラウザでは固定ピッチフォント
 で描画します。

 <kbd> 〜 </kbd>
  ユーザがキーボードからの入力する文字を意味し、一般的な視覚系ブラウザ
 では固定ピッチフォントで描画されます。この要素に囲まれた文字は、ユーザ
 からの文字を受け付けたことを表わしています。

 <tt> 〜 </tt>
  テレタイプ文字を表わす要素で、等幅のフォントで表現します。ただし、こ
 の要素は物理要素に分類されており、閲覧者の環境に依存します。お勧めでき
 ない要素です。

 ■固定ピッチフォントで描画するブロックレベル要素
 ブロック要素の多くが、HTMLの文書構造を形成します。一般的な、あるいは多
 くの Webブラウザでは、その要素範囲の前後に改行を示し、左から右までの矩
 形の領域を確保します。

 <pre> 〜 <pre>
  整形済みフォーマット(Preformatted)を示す要素で、この範囲に配置され
 た文字は改行や余白を維持したまま固定ピッチフォントで出力されます。長文
 の固定ピッチフォント出力に適した要素となっています。
 (ただし、Macintosh版 MSIE 5.2 では、余白の表現に問題があります。)

  当 Webサイトでは、JavaScriptや、HTML構文のサンプルにこの pre要素を多
 用しています。

 ■スタイルシートで表現する固定ピッチフォント
 スタイルシートでは、要素のタイプに関わらずすべての要素に固定ピッチフォ
 ントで表現するように指定することが可能です。

  p { font-family: monospace }

  この設定では、フォント種に等幅フォントを指定しています。つまり、閲覧
 者のプラットフォームで用意されている固定ピッチフォントが選ばれて描画す
 ることができます。フォント種に固有のフォント名を指定するよりもはるかに
 効果的です。
  ここでは、段落を表わす p要素に固定ピッチフォントを指定しています。

  Macintoshで問題になる pre要素は次のように設定することで回避できます。

  pre { white-space: pre; text-align: left }

 ■ユーザ依存の固定ピッチフォント
 HTMLのタグやスタイルシートで固定ピッチフォントで表現できるように設定し
 ていても、実際には閲覧者の環境に依存します。
  例えば Mozillaブラウザでは、閲覧に利用するフォントを、かなり細かく設
 定することが可能です。固定ピッチフォントを普通のゴシック体にセ呈してい
 た場合には、固定ピッチフォントで表現することができません。

  固定ピッチフォントは便利です。とくに英文などでは威力を発揮します。引
 用符や句読点などがはっきりと表現され、サンプルなどで利用するプログラム
 コードの出力には欠かせないところです。
  ただし、むやみに使うのではなく、マークアップする要素の内容に適したタ
 グやスタイルシートを使うことが望まれます。


  次回より2回にわたって、アクセシブルなテーブルの作成について解説する
 予定です。

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

◆Tips ユーザスタイルシート

  Webページの作者が作成したスタイルシートを使うよりも、自分で作成したス
 タイルシートを利用することをユーザスタイルシートと呼びます。
  最近の視覚系ブラウザには、この機能が備わっており、自分好みの表現をど
 の Webページにも適用させることができます。

  ユーザスタイルシートは、作者のスタイルシートよりも優先される関係で、
 好みの文字の大きさや色、背景色などを指定したりします。弱視障害のある方
 などでは積極的に利用されています。

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

◆CSS講座(第5回) スタイルシートで扱う単位

 大きさや長さ、幅や高さなどを指定する場合には、基本となる「単位」がなけ
ればなりません。HTMLにおける基本データ形式では、ピクセルとパーセントとい
う2つの単位しか定義されていませんが、スタイルシートでは幾つかの有用な単
位が用意されています。
 今回は、ページを修飾するスタイルシートで扱える様々な単位について詳しく
解説します。

 ■ピクセル ( 単位 px )
 ピクセルとは、コンピュータのモニター画面で表示を構成する点(ドットとも
 呼ばれる)で、画像情報の最小単位を指します。例えば、1027X768 というモ
 ニター画面では、横幅が、1027ピクセル、高さが 768ピクセルという具合で構
 成されており、総画素数は 788,736ピクセルとなります。

  皆さんが Webブラウザを利用するとき、その画面を最大化していますか?
 小さな画面では最大化して利用することが多いものですが、大きな画面では、
 自分にとって利用しやすい大きさにしていると思います。
  その場合に Webページでピクセル単位の横幅を指定した場合、ブラウザ画面
 の大きさに関わらず、モニター全体のピクセル単位でレンダリング(描画)さ
 れます。つまり、ユーザ環境に依存する横幅設定となります。

  そのように考えると、ピクセル単位は「相対値」ではなく、「絶対値」では
 ないのかと思えます。ただし、写真やイラストなどをページで表現する場合に
 は、ピクセル単位で指定します。

 ■ポイント ( 単位 pt )
 コンピュータのモニター画面における1ポイントはおおよそ、0.35ミリになり
 ます。ということは、10pt は、3.5mm になります。
  この大きさは、モニター画面のサイズに関わらず常にその大きさになります。
 つまり、環境に関わらず常に同じ大きさでレンダリングされます。こうした値
 を「絶対値」と呼び、作者が指定した大きさを維持することができます。

 ■パイカ ( 単位 pc )
 パイカとは、タイプライターなどで水平方向(1行の意味)にいくつ文字を入
 れることができるかを基準とした値となり、概ね1インチあたり10文字くらい
 になります。1インチは 72ポイント、すなわち1文字当たり 2.52ミリとなり
 ます。割と大きい部類の単位になり、絶対値に分類されています。

 ■インチ ( 単位 in )
 パイカでも説明したとおりインチは約 25.2ミリです。つまり 2.5センチ以上
 あるということになり、モニター上では大きい部類に入ります。
  ほとんど利用されていない大きさで、絶対値に分類されます。

 ■ミリ ( 単位 mm )
 ミリ単位で大きさを測る単位で、絶対値に分類されています。

 ■センチ ( 単位 cm )
 ご存知のように、1センチは 10ミリです。
  かなり大きい単位で利用することが少ない単位です。絶対値に分類されます。

 ■パーセント ( 単位 % )
 モニター画面ではなく、閲覧者が利用する Webブラウザの大きさに比例した値
 となります。仮にブラウザ画面が 600ピクセルだったとしたとき、80パーセン
 トは、600ピクセルの8割、つまり 480ピクセルになります。
  ユーザ環境の大きさに比例した大きさを「相対値」と呼びます。当然、パー
 セントは相対値に分類されます。

 ■大文字 M の大きさ ( 単位 em )
 アルファベットの大文字 M の高さを基本としたサイズです。
  基本的には閲覧者が設定している文字の大きさを基準として M の大きさを
 決定します。
  例えば、2em とした場合には、M の高さの2倍の大きさとなります。この単
 位は、相対値に分類されています。

 ■小文字 x の大きさ ( 単位 ex )
 アルファベットの小文字 x の高さを基本としたサイズです。
  これも em と同様に、閲覧者が設定している文字の大きさを基準とている文
 字の x で決定されます。この単位は相対値に分類されています。

 ■ミディアム ( 単位 medium )
 標準の大きさを表わします。基本的には 1em と同じですが、環境や DTD によ
 って異なる場合がありますので、注意が必要です。この単位は相対値に分類さ
 れています。

 ■smaller
 標準の文字の大きさからやや小さくしたサイズです。環境によって再現されな
 い場合があります。この単位は相対値に分類されています。

 ■small
 標準の文字の大きさからひとまわり小さくした大きさになります。どの視覚系
 ブラウザでもサポートされている単位となります。相対値に分類されています。

 ■x-small
 samll という大きさからやや小さくしたサイズになります。環境によっては再
 現されない場合もありますので注意してください。相対値として分類されてい
 ます。

 ■XX-small
 最も小さなサイズです。どれ嫌いのサイズなのかは一定ではありません。閲覧
 者の環境で最も小さくなるサイズです。この単位は相対値に分類されています。

 ■larger
 標準の大きさからやや大きなサイズになります。環境によっては再現されない
 場合がありますので、扱いに注意してください。相対値に分類されています。

 ■large
 標準の大きさからひとまわり大きなサイズになります。どの視覚系ブラウザで
 もサポートされている単位となります。相対値に分類されています。

 ■X-large
  largeサイズよりもやや大きなサイズになります。環境によっては再現されな
 い場合がありますので、扱いに注意してください。相対値に分類されています。

 ■xx-large
 閲覧者の環境で最も大きくなるサイズです。相対値に分類されています。


◆単位が使われる場合と閲覧者の環境

 こうしたスタイルシートで利用できる単位は、大きさや幅、高さなどで利用し
 ます。大きさは文字のサイズで利用され、幅は余白や枠線、領域などで使いま
 す。また、高さは領域を指定する場合に用いられます。

  閲覧者では、それぞれ異なるモニターを利用しているのが当たり前です。そ
 こでは一意に単位を指定するのは難しいところですが、できることなら相対値
 を使いましょう。その後のレンダリングは閲覧者の環境に任せるのが最も賢明
 な方法ではないかと思います。

  相対値は閲覧者側で大きさを変えることが可能な単位です。高齢者は小さな
 文字が読みにくいので、わざわざ大きな文字に変更しています。しかし、絶対
 値で指定した大きさは変えることができません。
  制作者が閲覧者の環境に配慮することはとても大切なことです。お互いに快
 適なレンダリングができるように心がけましょう。

  次回の講座では、テキストにまつわる設定について解説します。

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

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

 フォームの入力フィールドの書き込みを禁止する属性です。HTML4.0 から定義
された比較的新しい属性となっています。

 ■readonly属性 入力フィールドの書込み禁止
 DTD:    すべての文書型定義で利用可能
 属性値:  なし
 記述法:  <input type="text" name="sample" value="禁止" readonly>
 関連要素: form、input、textarea

 XHTMLの制限: 属性の最小モデルを省略できません。以下のように記述します。
   <input type="text" name="sample" value="禁止" readonly="readonly">

  この属性では、閲覧者が入力フィールドを選択することは可能ですが、その
 フィールドに書き込むことができません。なお、書込み禁止と選択禁止を指定
 する場合には、disabled属性を使います。

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

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

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

 次回は2月13日に配信を予定しています。

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

質問・ご意見ははこちらまで→ 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/
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□



最新更新日 2004/2/10
Copyright(C) 2002-2004 banban@scollabo.com