隔週金曜日配信 What's New 2004年11月12日
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
┏┏┏┏ 初心者のためのホームページ作り/Web for beginner
┏┏┏ http://www.scollabo.com/banban/
┏┏
┏ ＜第105号＞
banban@scollabo.com
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
当講座は、初心者や中級者が正しい文法と作法を身につけて、プロ級の本格
的な Webページ作成に役立つことを目的に配信されております。
当講座では HTML4.01、XHTML1.1、XML1.0 を中心とした文法が主体となって
います。なお、このマガジンは等幅フォントでお読みいただくと快適に読める
ようになります。
今週のコンテンツ
■ 正しい文法のために (最終回) --- 読者の質問から
■ CSS講座 (最終回) --- 印刷スタイルシート
■ 属性の解説 (最終回) --- language属性
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆正しい文法のために --- 読者の質問から
文法上の行き詰まりや不明な点があって寄せられた質問の中から、特に文法や
ページ作りの上でヒントになる内容に絞って解説します。
■ W3C標準とは何か？ 何故標準なのか？
何度か説明してきたとおり、W3C (World Wide Web Consortium) は Webに関す
る仕様を標準化するための機関で、世界中の Web関連した企業や個人が集まっ
た非営利組織です。
この W3Cで決定した仕様はすべて公開され、各ソフトウェアベンダーはこの
仕様に照らし合わせてソフトウェアを作成します。つまり、現在リリースされ
ている Web関連ソフトはすべてこの仕様に準拠しています。
Webはすべての人々が共有して利用できるという理念があります。ある HTML文
書が特定のソフトウェアにのみ適用したとしたら、他のソフトウェアでは解釈
されない問題が発生します。それは Webの理念とかけ離れてしまいます。
そのため「標準仕様」というものが求められたのです。
つまり、最低限の W3C仕様で作成されたデータであれば、特定のソフトウェア
やプラットフォームに依存することなく、すべての人々に情報を共有すること
が可能になります。
その意味では W3Cの仕様に準拠した文書であれば、通信環境やソフトウェア
あるいはプラットフォームに依存することなく、情報を共有することが可能と
なります。
■他のブラウザで表示するとレイアウトが崩れる
HTMLの基本的な仕様では、表示方法を特定していません。つまり、表示に関し
てはソフトウェアに依存します。
例えば「見出し」の要素では、あるソフトでは中央揃えで表示したり、大き
な文字で出力したりします。ソフトウェアは、それが他の要素と区別して「見
出し」と解釈できればよいことになります。そのため出力先、つまりブラウザ
の銘柄によっては、まったく異なる表示となります。
HTMLが標準に照らし合わせて、しっかりとした文法で記述されていれば、ソ
フトウェアの違いによる表示の方法は問題になりません。むしろ固有のソフト
にだけ適応した (規格外のタグなどの利用) 文法のほうが問題になります。
■スタイルシートを使っても対応していないブラウザがある
厳格な文法で文書を作成する場合、スタイルシートは大変役に立ちます。しか
しながら、すべてのソフトウェアでスタイルシートが実装されているわけでは
なく、古いものや非視覚系ソフトウェアでは、そのほとんどで無視されます。
スタイルシートが無視された場合、当たり前の話ですが作者が意図するレイア
ウトを表現することができません。スタイルシートはあくまで要素の配置や大
きさ、色などを指定するために利用するものであり、HTMLそのものを変化させ
るものではありません。
つまり、基本的な部分であるHTML構文が、しっかりとした論理構造を維持し
ているのであれば、スタイルシートの実装はある意味では無視されても、レン
ダリングそのものに影響しません。
スタイルシートが実装されていなくても問題のないようなHTMLを作成すること
が重要になります。その場合、スタイルシートを「オフ」にして表示させてみ
れば一目瞭然でしょう。
逆な言い方をすれば、スタイルシートに頼り切ったページの設計ではなく、
あくまで論理的な構造を持ったページの設計が重要だということです。
作成した文書のスタイルシートを外してレンダリングしたとき、それがまった
く意味不明であるならば、構文をチェックすることが重要です。
■DTD (文書型定義) の宣言がなくてもかまわないのでは？
確かに一部の視覚系ブラウザでは、文書型の宣言がなくても作者の意図したと
おり問題なく表示することができます。しかしながら、SGMLや XMLを解釈する
ソフトウェアでは、しばしば問題を引き起こすことになります。
TCP/IPなどのインターネットで利用される関連技術を標準化するための組織で
ある IETF (Internet Engineering Task Force) では、その標準化を示す文書
の RFC1866の中で、文書型定義がない場合にはその文書を「HTML2.0 で扱え」
となっています。
(RFC1866 http://www.w3.org/TR/REC-html40/appendix/notes.html#h-B.1)
一方で、HTML4.01が正式勧告された後に W3Cでは、文書型定義の記述の有無に
関わらず Webブラウザは基本的に HTML4.01と解釈するように求めています。
つまり DTDが記述されていなくても、一部のブラウザではまともに表示して
くれるというわけです。
しかし、先ほども述べたとおり、厳格なブラウザでは文書型定義の宣言を求め
ていることから、できるだけ文書型定義を記述することを強くお勧めします。
最近のオーサリングソフトでも、文書の冒頭で文書型定義を宣言していること
は、Webの理念からも歓迎されていることでしょう。
■省略できるタグがあるなら積極的に使いたい
HTMLでは幾つかのタグを記述せずに省略することができます。例えば、htmlや
head、bodyなどのタグを配置せずに直接コンテンツやタイトルなどを記述でき
ます。
また、終了タグも省略できるものがあり、ある意味では作業の効率化となっ
ています。
しかし、そうした文書では更新時に全体像がつかみにくい欠点も持っています。
タグを省略した場合、ある要素の範囲がつかみにくいのは逆に効率が落ちます。
文書が構造的に書かれているものは、更新時の作業性が高く第三者が見ても理
解しやすいものです。なお、それぞれの省略されたタグは、ブラウザ側で補う
ものとされています。
HTMLは基本的には、論理的な構造が求められています。開始タグと終了タグに
囲まれたそれぞれの要素が論理的なツリー構造を持ちます。それゆえほとんど
の環境で正しく情報が伝えられます。
次世代マークアップ言語である XHYML、および XMLでは、タグの省略が一切
許されておりません。そういった背景を考慮し、将来の準備のためにもタグの
省略は慎みたいものです。
■インラインレベル要素をブロックレベル要素の中でなくても表示できる
body要素に直接インラインレベル要素を記述しても、いくつかの視覚系ブラウ
ザでは、とりあえず表示できます。例えば、以下の構文の場合、
<body>
ようこそ、<strong>私のページへ</strong>
</body>
この構文では、「私のページへ」が強調されて表示されます。一見すると見出
しのように見えますが、文法上意味のない文章となります。
では、何故意味がないのでしょうか？
body要素に直接書き込まれる場合、その要素範囲が構造上、ある意味を持たな
くてはなりません。HTMLの論理的な構造とは、それぞれの要素を解釈するソフ
トウェアの認識対象でなくてはなりません。
つまり、HTMLの基本的な規則に照らし合わせたとき、「意味」を成すものを
構造とすることが求められています。
インラインレベルとは、通常の文字列の扱いと同等の役目があります。単なる
文字列では意味がありません。その文字列が「見出し」なのか、あるいは「段
落」なのかを定義する必要があります。
HTMLのタグは、それを囲む要素に応じて論理的な構造を形成するために用い
ます。すべてのインラインレベル要素は、必ずブロックレベル要素の中で配置
されなければなりません。
■まとめ
正しい文法とは何かという基本的なテーマで解説してきましたが、今回で終了
となります。HTMLは単純なマークアップですが、単純がゆえの奥の深さがあり
ます。また、単純さゆえの間違えやすささえも誘発します。
基本的な部分をしっかりマスターして、世界で通用するマークアップを仕上
げるように学びましょう。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆お知らせ
今回の配信でメールマガジンを終了しようと思っていましたが、当初よりも非
常に多くの読者が増えてきましたので、もう一度原点に立ち返って、初心者向
けのHTML講座を開設しなければと考えています。
もう少し分かりやすく、何故そうなのかといった理由を述べながら学んでいき
たいと思います。次回からの配信にご期待ください。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆CSS講座 --- 印刷スタイルシート
今回は Webページの印刷時に効果のあるスタイルシートについて解説します。
ただし、印刷スタイルシートを実装している Webブラウザは実際のところ多く
ありません。当方の実験では Operaブラウザの実装がよい結果でした。
なお、各プロパティでブラウザの実装状態を説明します。
（最新版 Mozilla、Safari に関してはテストしていません、あしからず)
私たちが Webページを印刷するとき、そのほとんどでブラウザから行います。
残念ながら多くの Webページは印刷を想定して作成されていないので、印刷の
仕上がりがあまりよいとはいえません。ページが複数にまたがるときに、テキ
ストや画像の途中でちょん切れるとかします。
ここで取り上げる印刷におけるスタイルシートは、印刷時のレイアウトを整
えるのに効果的です。
■プリンタ出力用のスタイルシートの設定
印刷出力として、データをプリンタに送り出すのは当然です。印刷用のスタイ
ルシートは、改頁の制御やトンボ (注１) などをコントロールします。
そのため、画面などに出力する場合と異なり、スタイルシートを印刷用に設定
しなければなりません。
以下は、プリンタ出力向けに宣言するものです。
@page {
印刷用スタイルシートの設定
}
この宣言は、その範囲で設定するスタイルシートが、他のメディアと混同しな
いために行います。これを前提として印刷スタイルシートを説明します。
＜注１＞ トンボ
トンボとは、印刷した用紙を製本などに利用するときに裁断する目安となる線
を指します。その目安線の形が十字のトンボの姿に似ていることから名付けら
れました。トンボにはコーナートンボと、センタートンボがあります。
■改ページのコントロール
ある要素の前後で改ページに対する設定を行います。これによって作者が意図
する改ページを制御します。
改ページは、page-break-before属性と、page-break-after属性で行います。
□ page-break-before属性
この属性で指定された要素の直前で改ページを行います。
□ page-break-after属性
この属性で指定されたようその直後に改ページを行います。
page-break-befor、paege-break-after属性の値と機能
auto 改ページをコントロールしない (初期値)
alway その位置で必ず改ページをする
avoid その位置での改ページを禁止する
left 見開きの場合の左のページになるように改ページする
right 見開きの場合の右のページになるように改ページする
具体的な書式
p { page-break-befor: auto }
table { page-bbreak-after: alway }
ブラウザの実装状況
MSIE (Microsoft Internet Explorer) 4.0以降、Opera 7.0以降
Mac版 MSIEでは 5.0 が page-break-before を実装
■改ページの禁止
ある要素の途中で改ページすることを禁止します。ただし、全体の構成に注意
して設定するようにします。改ページを禁止しても、印刷する用紙に余裕がな
ければ、結局は改ページされてしまいます。
改ページの禁止は、page-break-inside属性を使います。
□ page-break-inside属性
ある要素における改ページに関して設定する場合に利用します。
page-break-inside属性の値と機能
auto 要素内での改ページをコントロールしない (初期値)
avoid 要素内での改ページを禁止する
具体的な書式
ul { page-break-inside: avoid }
ブラウザの実装状況
Opera 7.0以降
■ページ最下部の段落に残すべき行数を指定
印刷するページの最下部の段落に、何行残すかを設定します。設定は orphans
属性を使います。
□ orphans属性の機能と値
数値 (整数) 必要な行数を指定 (初期値は 2)
具体的な書式
p { orphans: 3 }
ブラウザの実装状況
Opera 7.0以降
■ページ最上部の段落に残すべき行数を指定
印刷するページの最上部の段落に、何行残すかを設定します。設定は window
属性を使います。
□ window属性の機能と値
数値 (整数) 必要な行数を指定 (初期値は 2)
具体的な書式
p { window: 4 }
ブラウザの実装状況
Opera 7.0以降
■トンボをコントロールする
製本などに利用する裁断の目安となるトンボを marks属性で制御します。
トンボには、コーナートンボとセンタートンボがあります。
□ marks属性の機能と値
crop コーナートンボを設定
cross センタートンボを設定
auto トンボを設定しない (初期値)
(なお、各値はカンマで区切って両方とも指定することができます。)
具体的な書式
div { marks: crop, cross }
ブラウザの実装状況
未実装
■印刷用紙の向き、及びサイズを指定
印刷する場合の用紙の向き (横、あるいは縦) と、用紙サイズのを指定するた
めに、@page 直後に size属性を使います。
□ size属性の機能と値
auto 印刷先の初期値に依存する (初期値)
portrait 縦向きに設定
landscape 横向きに設定
数値＋単位 印刷用紙の横幅、高さをセンチ、ミリ、インチなどで指定
(数値が１つの場合は横幅と高さが同じと解釈する)
具体的な書式
@page { size: 29.5cm 42cm }
ブラウザの実装状況
Opera7.0以降
■印刷範囲の適用を設定
印刷範囲のボックスを指定するために、page属性を使います。通常は閲覧者の
初期値に依存しますが、ある部分だけの印刷範囲を指定することができます。
その場合、size属性を使って印刷範囲のボックスの名前指定して行います。
□ page属性の機能と値
auto 出力先の初期設定に依存する
名前 指定した名前のボックスの設定を適用する
具体的な書式
@page hzt { size: portrait }
dl { page: hzt } dl要素に定義した名前 hzt を適用する
ブラウザの実装状況
未実装
■まとめ
元々マークアップ言語は、異なるシステムで共有する組版を実現するために生
まれた経緯があります。特に出版や印刷業界からの要求があり、SGMLはそうし
た背景の中で開発されました。
しかし Webの発達からその多くはスクリーン (モニターディスプレイ) を中
心とした組版となってしまいました。印刷スタイルシートは、本来の目的に回
帰する技術であることから、多くの閲覧ソフトに求められています。
実際には PDFに取って代わり Adobe社の Acrobatが主流になっています。
PDFは異なるシステムでもまったく同じ印刷が可能であることも人気です。
ただし PDFはプラグインが必要なことと容量が大きくなる欠点があり、印刷ス
タイルシートのような簡便さがありません。これからの各ベンダーの開発に期
待するしかありません。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆HTML、XHTML属性の解説 --- language属性
スクリプトの形式をあらわす属性で、JavaScriptや、VBScriptなどで利用され
ます。ただし、HTML4.01では非推奨扱いとなっています。
■ language属性 スクリプトの形式を示す
DTD： HTML4.01Transitional、及び HTML4.01Frameset で利用可能
属性値： スクリプトの形式
記述法： <script language="JavaScript">
関連要素： script
XHTMLの制限： XHTMLでは利用することができません。今後は MIMEタイプを指
定します。
非HTMLデータとしてのスクリプトを直接書き込む場合に利用します。ほとんど
の閲覧ソフトで利用可能です。
ただし、HTML4.01では非推奨となっているため、今後は type属性で MIMEタ
イプを記述するように推奨されています。
書式：
<script type="text/javascript">
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
今回はここまで。
今週のおさらいは Webページにも掲載しましたので、是非参考までに見ておい
てください。
Webページでは HTML文の実行結果のサンプルもあり、より分かりやすく説明
しています。あわせて過去の記事のおさらいも掲載しています
（今週のおさらい）
http://www.scollabo.com/banban/magazine/review_105.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://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-2004 www.scollabo.com/banban/
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
最新公開日 2004年11月29日
Copyright(C) 2002-2004 banban@scollabo.com