毎週金曜日配信 What's New 2003/12/26
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
┏┏┏┏ 初心者のためのホームページ作り/Web for beginner
┏┏┏ http://www.scollabo.com/banban/
┏┏
┏ ＜第79号＞
banban@scollabo.com
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
当講座は、初心者や中級者が正しい文法と作法を身につけて、プロ級の本格的
な Webページ作成に役立つことを目的に配信されております。
当講座では HTML4.01、XHTML1.1、XML1.0 を中心とした文法が主体となってい
ます。なお、このマガジンは等幅フォントでお読みいただくと快適に読めるよう
になります。
今週のコンテンツ
■ Webデザイン 第23回 --- 色の不思議
■ HTML講座 第23回 --- ボックス
■ XML初級講座 最終回 --- XML作成のまとめ、XMLの今後
■ 属性の解説（第６回） --- media属性
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆Webデザイン（第23回） 色の不思議
色には不思議な力があります。人は四方を真っ赤に塗った部屋に３日間閉じ込
められると精神障害を起こすといわれています。
色にはそれぞれ人間に与える不思議な作用があることは、多くの研究でも知ら
れています。また、個人差による作用の違いもあることが分かっています。
■Webで扱う色
多くの Webページでも色は様々な形や工夫によって利用されています。特にグ
ラフィカルな視覚系ブラウザの発達によって、色という要素は大変重要になっ
てきています。
色は単独で利用することもさることながら、色と色を組み合わせて使う、い
わば配色によって利用することが一般的です。
しかし、配色の具合によっては、閲覧者が嫌悪感を抱いたり、恐怖感、脅威
感を抱くこともあります。一方で、聡明感や清涼感を味わうことさえあります。
何気ない色の配色によって、ページ全体が様々な印象を与えるということは
制作者にとっても有用なポイントです。
■色による印象
背景色や文字色を指定する場合、その見え方に注意しなければなりません。閲
覧者がどんな印象をもつのかをある程度想定する必要があります。
子供向けであれば柔らかで明るい配色を、女性向であれば優しく透明感あふ
れる配色を、専門家向けにはメリハリの利いた雰囲気を醸し出したいものです。
同じコンテンツでも配色による印象の違いは歴然です。配色によっては陳腐
にも崇高にもなりえます。色を扱う怖さとは意外な落とし穴があります。
色に頼るページでは、そうした怖さがあることも事実ですが、配色による取
り合わせのまずさから失敗するケースがあります。色を扱うとき、その色でな
ければならない理由を考えてください。
あるサイトでは、コンテンツを変えずに配色を変えただけでアクセス数が上
がったということも聞いております。
■色の持つ思想
専門家に言わせると、色にはそれぞれ思想があるようです。例えば赤色は、燃
える、血、太陽などを想像しますが、強い意志を感じる色でもあります。一方
で青色では、空、水、宇宙などを想像する自然の大きさを感じますが、孤独、
寒いなどの感情も併せ持っています。
色とはまさにいろいろです。色を扱うとき、そうした思想を感じ取りながら
１つづつ丁寧に選択する気持ちを持つようにしましょう。色には「意思」があ
ることを理解してください。
色を自由に操ることができるのなら、もう立派にデザイナーです。
（第24回 Webブラウザにつづく）
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆HTML講座 （第23回） ボックス
ボックスという概念は、HTMLにはありません。何をしてボックスの対象として
いるのでしょうか？
今回はボックスを中心に解説します。
■ブロックレベル要素
文書構造の基礎となるのがブロックレベル要素です。それぞれの要素型には、
それなりの「意味」を持っており、HTMLを作成するということは、そうした要
素の「意味付け」作業が中心となります。
ブロックレベル要素には、見出しや段落、リストや表組などといった構造を
表す要素内容を囲みます。（その意味では div要素は構造とはなりえません。）
一般的にブロックレベル要素とは、その領域は Webブラウザ画面の左から右
までの矩形（長方形というべきか）を持っています。その矩形を「ボックス」
と呼びます。
言い換えれば、インラインレベル要素には、ボックスという概念が成り立た
ないわけです。
ボックスという概念は、スタイルシートの登場で初めて意識されました。そ
れを「ボックス」と呼ぶことが妥当なのか分かりませんが、１つの矩形を持っ
た要素型に対してそのように呼ぶようになりました。
■ボックスとスタイルシート
スタイルシートでは、ブロックレベル要素が持つ領域を自由にアレンジするこ
とができます。スタイルシートでは、ブロックレベルというよりも「ボックス」
と定義した方が、使い勝手がいいのかもしれません。
HTML上では、ブロックレベル要素は、ブラウザ画面の右から左までの長方形
の領域を持ち、その要素の前後に改行も持っています。（というよりも、ブラ
ウザがマークアップを整形する上で改行させている、と言ったほうが的を得て
いるかもしれないが・・）
一般的な視覚系ブラウザでは、ブロックレベル要素の前後に１文字分の余白
を表示することもあります。仕様書には、こうした余分な余白については何も
定義されていませんが、ブラウザ側の「配慮」としてその要素型についてのス
タイルを持って表示していると解釈されています。
スタイルシートでは、こうした余白や長さ、高さなども自由に設定すること
が可能です。
■インラインレベル要素とボックス
HTMLでは、インラインレベル要素をボックスとして成立することができません。
しかし、スタイルシートを利用することでインラインレベル要素でさえ、ボッ
クス（のように）に変換してしまうことさえ可能です。（そうした使い方があ
るかどうか別ですが・・）
論理的な構造とは、HTMLの意味付けがツリー構造上で展開されているかどう
かに懸かってきます。仕様書では、インラインレベル要素は必ずブロックレベ
ル要素内で配置することが求められています。
つまり、インラインレベル要素は、論理的な構造を構築することができない
というわけです。とすると、インラインレベル要素にボックス的な使い方をす
るのには無理があるのかもしれません。
ブロックレベル要素----構造をマークアップする（div要素を除く）
インラインレベル要素--意味をマークアップする（span要素を除く）
■レイアウトとボックス
HTMLは、表現を主体としたマークアップ言語であると考えたとき、ページのレ
イアウトは重要な課題となることでしょう。しかしだからといって厳格仕様に
レイアウトを施す要素や属性はありません。
そのままでは、ブロックレベル要素は単純な矩形を持ったボックスのままで
あることは言うまでもありません。
HTML4.01は、レイアウトを表現する技術としてスタイルシートを利用するこ
とを強く推奨しています。つまり、論理構造とプレゼンテーション（見栄え）
を分離すべきだと求めているわけです。
■div要素の扱い
汎用的に利用されるブロックレベル div要素は、それ自体が何も意味を持たな
いボックス要素です。ブロックレベルとは、基本的な文書構造を示す重要な役
目がありますが div要素は、「構造」を示す意味がありません。
段落を表す p要素は、その中にブロックレベル要素を配置することができま
せん。ある意味では融通の利かない要素です。しかし、段落を div要素に置き
換えてマークアップすれば、その中にブロックレベル要素も配置できます。
そうすれば、いかにも「段落」の中で、他の構造物を配置したように見せる
ことができます。そうした汎用的な利用法が div要素の使い方となるのですが
あまり div要素に頼った設計は慎みたいものです。
この div要素は、スタイルシートが定義されたときに初めてその利用価値を
高める要素である、といえるでしょう。制作者側でどのような型にでも設定が
可能にできるための「汎用」と考えるべきなのかもしれません。
それ故、文書全体に何もかも div要素でマークアップするのは考え物です。
論理的な文書構造というHTMLの原点に照らし合わせると、文法違反とは言わな
いまでも、ユニバーサルな設計ではないということに気がつくでしょう。
（その意味では、私も反省しなければならない点があります。）
次回より新たにスタイルシートを中心に扱った CSS講座をスタートさせます。
スタイルシート講座では、ボックスを含めたあらゆる分野について深く掘り下げ
て解説する予定です。ご期待ください。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆XML初級講座（最終回） XMLの今後の動向
ここまで XML作成に関する初歩的な講座を展開してきました。基本的な規則や
文書型定義、要素型宣言、属性リスト宣言、エンティティ宣言、記法宣言、そし
て名前空間とその応用である数学言語、MathMLなど多岐にわたりました。
XMLはまだ歴史の浅いマークアップ言語です。しかし、XMLの応用は既に始まっ
ており、Weblog（ブログ）はその典型かもしれません。
■XML作成のまとめ
XML文書には、タグの相関関係がツリー構造で記述され、Well-formd になって
いる「整形済み文書」と、文書型定義 DTDに従った構造で記述される「検証済
み文書」の２つの型があります。
整形済み XML文書とは、文書中に１つ以上のタグがあること、開始タグと終
了タグの対応がきちんとしていること。タグの親子関係がきちんと入れ子（ネ
スト）になっていること、文書全体がツリー構造で作成されていることなどが
基本となっており、これらを満たさなければ XMLパーサが受け付けてくれなく
なることもあります。
こうした基本的な規則は、HTMLでもまったく同じです。「正しいHTML」の書
き方の基本ともいえることです。
検証済み XML文書とは、文書型定義で宣言されたタグや、その属性の規則に
よって正しくマークアップされていることを指します。もし、タグ付けの際に
文書型定義とは異なる記述をした場合には、エラーを発生し XMLパーサは解釈
できなくなる場合もあります。
HTMLでも、タグ付けの規則が死ぬほどあります。幸いなことに、そうした滅
茶苦茶なタグ付けしても、一応 Webブラウザは表示してくれますので、制作者
側が、そのエラーに気がつかない場合もありますが・・
XML文書を作成することは、XMLの原理原則に基づいた書式であることが必須
の条件です。HTMLのような寛容さは持っておりません。
■XMLは難しいか？
結論から言えば、簡単なことではありません。ある程度のスキルが要求されま
す。しかし、現在多くのベンダーから有用なオーサリングが提供されています
ので、そうしたツールを利用して学ぶのも方法でしょう。
また、厳格なHTMLが作成でき、すぐにでも XHTMLに移行できるようなスキル
を持つことができれば、XMLにはすぐに慣れることができるでしょう。
幸いなことに W3Cにある膨大な資料を１つづつ参考にすることで、自分自身
の力で XMLを学ぶこともできるはずです。
最近では XMLに関する技術書が数多く出版されるようになりました。少なく
とも２〜３年前から比べると XMLを学ぶ環境が揃ってきています。新しい技術
を学ぶことは決して楽なことではありませんが、必ず役に立つはずです。
■XMLが果たす役割
XMLは、XMLを解釈できるプロセッサである XMLパーサ上で Webを通じてデータ
の交換などに利用できる拡張されたマークアップ言語です。
XMLは既存の技術、HTTPと URI という仕組みで Web上で利用されることを目
的として開発されました。データの意味を解釈し、異なるプラットフォーム上
でデータを交換できる非常に優れた可能性をもった汎用的な言語です。
W3Cでは HTMLの開発を終えています。今後は XMLをベースに、その名前空間
を最大限に利用した新たな制定を目指しています。
HTMLの資産を受け継ぎながら、HTMLでは実現できない数々の機能を秘めて、
今後はさらに飛躍することが期待されています。Java、C++、.NetFrameworkな
どの他の開発言語さえも、お互いにインクルード（取り込む）することができ
る XMLの可能性は果てしないものです。
■今後の Webの動向と XML
W3Cが目指すセマンティックWebは、サイト上のデータをメタデータとして扱う
ことにより、サイト間でお互いに強力な関係を結び合うことができます。
利用するユーザは、本来求める情報に的確に得られることができます。また
よりセキュアで、安全に運用することさえも可能になります。
XMLの秘められた可能性は今後、W3Cの勧告にとどまらず、あらゆる組織・団
体から有用な技術が提供されてきます。これからの10年、私たちは Webのドラ
スティックな変化を目の当たりにして見ることができるでしょう。
現在のHTMLに特化した Webブラウザも必ず姿を変えてきます。きっとしっか
りした XMLパーサを実装し、HTMLから XMLまでを完全にサポートする体制にな
るはずです。
やれ Windowsだとか、Linuxなどのような OSの違いによる排他的なデータの
交換は必ずなくなります。ユーザが自分の好きな環境で XMLは流通します。
これから先、ソフトウェアベンダーにとっても試金石となる時代がやってき
ます。ある特定のアプリケーションソフトだけが市場を独占することがなくな
るでしょう。XMLとは、そうした可能性も秘めているのです。
例えば、マイクロソフト社の Officeで作ったデータは、Webブラウザ上で利
用可能になります。各データ別のスキーマさえ手に入れば、ソフトウェア（OS
やアプリケーション）の違いは微々たる問題に過ぎなくなることでしょう。
■XML講座終わりに向けて
講座では XMLのほんの入り口にしか過ぎない内容でした。DOM、RDF、SAX、RSS
などは触れませんでしたが、折があれば XML講座を再開したいと思います。
何よりもまず先に、正しいHTMLについてもっと掘り下げた内容に特化したス
タンスでメールマガジンを配信していく予定です。
（現在利用されている XMLの応用技術に関しましては、「今週のおさらい」に
その一覧を掲載しました。）
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆HTML、XHTML 属性の解説（第６回）--- media
スタイルシートの出力対象（メディア）を指定する場合に用いる属性です。
■media属性 スタイルシート（CSS）を適用する出力先
DTD： すべての文書型定義で利用可能
属性値： メディアタイプ
記述法： <link rel="stylesheet" media="screen,tv" 〜 省略 〜 >
関連要素： link、style
XHTMLの制限：特にありません。
外部スタイルシートを利用する場合、ヘッダ部で利用するlink要素内でしば
しば用いられます。この属性が指定されていない場合には、デフォルト値とし
て screen が適用されます。
なお、カンマで区切って複数のメディアタイプを指定することが可能です。
■メディアタイプ一覧
media属性の値として、以下の出力先を指定することができます。
（ただし、視覚系ブラウザのほとんどでサポートしていません。）
・all： すべてのメディア
・screen： 一般的なモニタディスプレイ（デフォルト値）
・tty： 文字幅が固定の機器
・tv： テレビ
・handheld： 携帯用端末（PDAなど）
・projection： プロジェクター
・print： プリンター
・braille： 点字用ディスプレイ
・aural： 音声出力装置
・embossed： 点字用プリンター
音声、点字などの障害者向けブラウザ、プリンターや PDA、テレビなどの様々
なメディアにも対応する属性ですが、そうした機器やソフトウェアに対して、必
ずしもすべてに適用するわけではありません。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
今回はここまで、ではでは・・
今週のおさらいは Webページにも掲載しましたので、是非見ておいてください。
Webページでは HTML文の実行結果のサンプルもあり、より分かりやすく説明して
います。あわせて過去の記事のおさらいも掲載しています。
（今週のおさらい）
http://www.scollabo.com/banban/magazine/review_079.html
今年最後のメールマガジン配信になりました。次週は「お正月休み」になりま
すので、「第80号」は新年１月９日の配信になります。ご了承ください。
次回より Webページ作成を支援するより実践的な CSS講座をシリーズで掲載す
る予定です。ご期待ください。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
質問・ご意見ははこちらまで→ banban@scollabo.com
なお、ご質問の際には、あなたがお使いのＯＳや 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
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
＜えでぃた〜ず・る〜む＞
今年ほど感慨深い年はありませんでした。重い病気で入院したこと、会社を辞
めたことなど、いろいろな出来事がありました。過ぎてしまえばあっという間で
したが、１つひとつは重く苦しいことばかりが思い出されます。
必ず（でもないか）、今ごろの時期になると１年を振り返ることがあります。
そのほとんどで自分自身の計画が達成されない不満があるようです。優柔不断な
自分の情けなさに愛想が尽きることさになります。。
それでも気を取り直して、さぁ来年こそは、と思うのは私だけではないでしょ
う。今年もあと数日、さて、来年はどんな年にしましょうかね。
今年最後の配信になりました。来年もよろしくお願いします。来年こそ、皆様
にとってよい年であることを心からお祈りします。ではでは・・
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆著作権について
個人がご自分のＰＣに保存して利用する以外の記事の転載、引用は基本的に応じ
ておりません。記事中の内容について、無断で使用することを固く禁じます。
なお、記事中のスタイルシート、HTML、スクリプトなどをご自分のページ作成
に自由に使っていただいても差し支えありません。
Copyright(C) 2002-2003 www.scollabo.com/banban/
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
最新更新日 2003/12/30
Copyright(C) 2002-2003 banban@scollabo.com