毎週金曜日配信 What's New 2003/5/30
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
初心者のためのホームページ作り/Web for beginner
http://www.scollabo.com/banban/
＜第53号＞
banban@scollabo.com
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
当講座は、初心者や中級者が正しい文法と作法を身につけて、プロ級の本格的
な Webページ作成に役立つことを目的に配信されております。
当講座ではHTML4.01及び XHTML1.1 を中心とした文法が主体となっています。
なお、このマガジンは等幅フォントでお読みいただくと快適に読めるようになり
ます。
等幅フォントに関しては、「まぐまぐ」の http://www.mag2.com/faq/mua.htm
を参考にしてください。
今週のコンテンツ
■ Webデザイン 第３回 --- ディレクトリ
■ HTML講座 第３回 --- 文書型定義
■ XHTML講座 その15 --- スクリプトの扱い
■ タグの解説 --- ins要素
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆Webデザイン 第３回
Webサイトを構築する上で、各ページに掲載する情報とは、それはまさにコン
テンツそのものです。目的が絞り込まれ、そのコンテンツを作成する上で、情報
の収集は欠かせないところです。
■情報の分類とディレクトリ
集められた情報はそれぞれのカテゴリに細かく分けて分類します。分けられ
た情報には、お互いに関連するものがあるかもしれません。それは、お互いに
リンクすることで、関連付けられますので、その点を設計に加えましょう。
分けられた情報を元に、ディレクトリ（フォルダ）が設計できます。
トップページを除いた各情報別のページとなるものは、それぞれのディレク
トリに振り分けることで、制作する側は非常に分かりやすく整理され、制作時
や、後々のメンテナンスがやりやすくなります。
■ディレクトリの名前
設けられたディレクトリには、当然名前がつけられます。名前がなければ、
他のディレクトリにあるページからリンクすることができません。
名前のつけ方は個人によって千差万別でしょう。必ずこうしなければならな
いという決まりはありませんが、できるだけ、情報が収められているものに関
連した名前をつけるようにします。
ディレクトリ名は、その昔８文字以内で、と言われたことがありましたが、
決して文字数がきめっているわけではありません。それは、MS-DOS時代に決め
られていたファイル名の数からきているもので、決して WWWの世界では、その
ようなことはありません。
ただし、ディレクトリ名は、ページの URLになるものなので、簡潔で分かり
やすい名前をつけましょう。また、できるだけ、半角小文字で記述しますが、
別に大文字でもかまいません。
ただし、サーバにファイル転送する場合、大文字と小文字は、厳格に区別さ
れることを知っておいてください。
■ディレクトリの階層
通常、トップページの下に各ディレクトリが置かれます。
さて、ディレクトリの階層ですが、ナビゲーションの設計と深く関連してい
ます。各ディレクトリが、トップページ下に並列で並ぶのか、それとも１つの
階層の中に、さらにディレクトリを設ける深い階層にするのか、判断の分かれ
るところです。
○並列に並ぶディレクトリ構造は、以下の通りです。
（ / はディレクトリをあらわしています。）
┏━━━ / directory-1
┃
┣━━━ / directory-2
┃
TopPage ━━━╋━━━ / directory-3
┃
┣━━━ / directory-4
┃
┗━━━ /image（画像を納めるディレクトリ）
単純に、トップページの下に、各情報別に分類されたディレクトリを設定し
ています。
○深層階層ディレクトリ構造
TopPage ━━━ / directory-1
┃
┗━━ / directory-2
┃
┗━━ / directory-3
┃
┗━━ / directory-3
この深層は、１つのディレクトリの中にディレクトリを設定し、またそのデ
ィレクトリの中に、さらにディレクトリを加えるというもので、現実的ではあ
りません。
○複合ディレクトリ構造
複合とは、並列に並べられたディレクトリの中で、さらに深層構造を持った
ディレクトリを指します。
当サイトでは、この複合型を採用しています。
┏━━━ / directory-1
┃ ┃
┃ ┗━━ / directory-5
┃
┣━━━ / directory-2
┃
TopPage ━━━╋━━━ / directory-3
┃
┣━━━ / directory-4
┃
┗━━━ /image（画像を納めるディレクトリ）
■メンテナンスと階層構造の設計
例えば、まったくディレクトリを作らず、同じ階層にトップページや、他の
ページ、画像などを一緒にしてしまうのは、考え物です。
後々のメンテナンスが非常に大変です。できるだけ情報ごとに分類したディ
レクトリを作って整理しておきましょう。
そして、各ディレクトリごとに設計書に記録しておくことが大切です。もし
後々変更などが加えられた場合、即座にそのファイルを探し出すことができま
す。各階層に分けられたファイルは、メンテナンスや、その後の拡張性にも、
大きく役立つことになるでしょう。
（第４回ナビゲーションの設計につづく）
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆HTML講座 第３回
HTMLを構成するのは、大きく分けてヘッダ部と本文に分けられます。そして忘
れてはならないもう１つ、文書型定義の宣言があります。HTMLは、こうした３つ
の部分から構成されています。
今回は、非常に重要な意味がある「文書型定義」について詳しく解説します。
■文書型定義（Document Type Definition）とは？
「ぶんしょがたていぎ」、な、何じゃそりゃ？
HTMLのバージョン２が、1995年に発表されたとき、HTMLを作成する場合には
その冒頭で、文書の要素タイプ（タグセット）が、どのバージョンのどのよう
な「型」を利用したのかを、明示的に宣言しなければならない、と規定されま
した。
要素タイプとは、HTMLの各バージョンの仕様書で定義されているタグの集合
を表しています。
各バージョンでは、利用できるタグと、利用できないタグなどに分かれてい
ますので、どのバージョンのHTMLの仕様書を利用するのかを決めるのは、重要
な意味を持っています。
W3Cは、SGMLの精神を尊重し、記述されるタグやその属性(タグの役割情報)
を選別した「文書型」という定義を加えました。
つまり、「物理的なレイアウト」を表現するタグセットを、いずれ廃止する
ことを前提とした「過渡期仕様」と、SGMLの精神に則った「厳格仕様」に分け
ました。
前回述べたように、各ベンダーや Web制作者からの圧力に負けて W3Cは、不
本意ながら、HTML3.2 をリリースしました。その中身は、およそSGMLの精神か
ら大きく離れ、物理的な見栄えを提供するタグセットが含まれていました
その反省から、HTML 4.0/4.01 を立て続けに勧告し、多くの Web制作者に、
正しい文法の記述を訴えました。
■HTML4.01の文書型定義
HTML4.01における文書型の定義は以下の通りです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
この文書型定義は、厳格仕様を宣言するもので、いわゆる見栄えを特定する
タグは使えません。
例えば、<font> や、<center> あるいは、<p align="center"> などのよう
な、HTML3.2 で定義されたタグや属性は、いずれ廃止することが決定されてい
るもので、「非推奨：Deprecated」と呼ばれて区別されています。
（既に、XHTML1.1では、無視されて利用できません。）
なお、文書型定義の宣言は、HTMLの一番最初の行、つまり冒頭で記述しなけ
ればなりません。また、ダブルコートで囲まれた範囲は大文字と小文字を厳格
に区別するので、間違えのないように記述しなければなりません。
特に、"DTD"、"EN" は小文字の使用が認められていません。
なお、この記述は「互換型」と呼ばれるもので、「標準型」は、以下のよう
に記述します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3c.org/TR/html4/strict.dtd"> （改行なしで記述）
「互換型」と「標準型」では Webブラウザによっては、微妙に表示が異なり
ます。特に、Macintoshでは、それが顕著に現れます。
標準型は、URLにあるとおり、W3Cのサイトにある文書型定義を参照します。
それによって Webブラウザ側が、記述されているHTML文書の要素タイプを判断
し、仕様書に従って適切にレンダリングします。
ただし、ブラウザが本当に W3Cの文書型定義を参照するかどうかは明らかで
はありません。中には、それを無視し、自分の持っている仕様にあわせて解釈
し、レンダリングする場合もあります。
なお、この文書型定義はタグではありません。あくまでも宣言です。
読者の中には、既にホームページを開設している方も少なくないと思います。
文書型定義を、Strict（厳格仕様）で宣言していても、つい、昔のクセで物理
的な非推奨とされているタグセットで作ってしまうことも考えられます。
十分に確認しながら、文書型定義を選ばなければなりません。
余談ですが、文書型定義の記述は、「互換型」が正式な記述しようと云われ
ているらしいですが、その情報の出所があやふやなので、はっきりしたことは
分かりません。
ちなみに、当サイト内でのHTMLの文書型は、そのほとんどで「互換型」を利
用しています。
■過渡期仕様の文書型定義
「非推奨」とされているタグセットを用いる場合は、当たり前のことですが
厳格仕様を宣言することができません。
大変ありがたいことに W3Cでは、従来のタグセットを用いたHTMLの仕様書を
用意してくれました。当講座では利用しませんが、廃止予定のタグセットを使
うことができる文書型定義があります。
非推奨とされるタグセットを用いる「過渡期仕様」の文書型宣言は以下のと
おりです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
この過渡期仕様は、いずれ廃止されるということが決定されていますが、そ
の期間がいつまでなのか、実際には仕様書の中でも、あるいは W3Cでも明記し
ていません。どうやらすぐに廃止されることはなさそうです。
ただし、現実には、HTMLの後継とされている次世代マークアップ言語 XHTML
が既に勧告されており、いずれこの XHTMLに集約されることでしょう。
現在のところ、HTML4.01につづく新たなHTMLの仕様書の開発は行われており
ません。
Transitional（過渡期仕様）の標準型は以下の通りです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> （改行なしで記述します）
■フレームを使用する文書型宣言
ページがフレーム構成で作成する場合に、一番「親」となるフレームセット
を示したHTML文書の冒頭で宣言します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
この定義は、過渡期仕様にフレームが加わっただけのものです。
同様に、非推奨とされ、廃止予定の文書型宣言です。なお、各ウィンドウで示
される「子」となるHTML文書の文書型定義は、厳格仕様でもかまいませんが、
ユーザエージェントは判断できません。
フレームは便利な構造ですが、ユーザエージェントによっては、フレームを
サポートしていないものがあり、できるだけフレームの利用を慎むように勧告
されています。フレームについては、いずれ講座で取り上げます。
フレームの文書型定義の標準型は以下の通りです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/frameset.dtd"> （改行なしで記述します）
■ISO-HTML/JIS-HTML文書型定義
ISO-HTMLは、HTML4.01を基本に、文書の解釈を詳細に規定した非常に厳格な
規格で、HTMLStrictとは比べようもなく難しい特徴をもっています。
タグの属性は極めて少なく、そのほとんどが「属性集合」と呼ばれる汎用的
な属性に終始しています。
ISO-HTML準拠の文書は、全ての文書構造が階層化されています。
なお、JIS-HTMLとは、ISO-HTMLを日本語化したもので、内容はまったく同じ
で、文書型定義も同じものを使用します。
ISO-HTMLの文書定義は以下のとおりです。
<!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">
あるいは、
<!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HyperText Markup
Language//EN"> （改行せずに記述します。）
現在 Webブラウザが、この仕様をサポートしているかを判断するだけの材料
を持っておりませんが、ISO-HTML文書が厳格な論理構造として記述されている
ので、ほとんどのユーザエージェント、プラットフォームに適用しています。
ISO-HTMLは、SGMLの応用として、2000年に第１版として発表されました。
HTMLに自信のある方は、是非挑戦してみてはいかがでしょう・・・
ISO-HTMLユーザーズ・ガイド（英語）
http://www.cs.tcd.ie/15445/UG.html
日本語訳 Webサイト
http://www.y-adagio.com/public/standards/jis_html/toc.htm
■文書型定義の宣言は必要か？
結論から述べると、絶対必要です。仮に宣言を忘れた場合には、ブラウザ側
では、その文書のタグセットをどちらかと言えば原始的な、HTML 2.0として扱
うように仕様書の中で明記されていますが、実際には、宣言がなくても、ブラ
ウザ側の仕様によってレンダリング（画面に表示）されます。
「めんどうくせぇなぁ」と思うかもしれませんが、これは決まり事です。
もし、文書型定義が明示されていない場合、その文書はHTML文書ではない、
と言っても言い過ぎではありません。いや、本当です。
文書型定義は、SGMLの規則に基づいて決められています。
HTMLは、SGMLのサブセットとして定義された、いわばSGMLのアプリケーション
として位置付けられている関係で、「絶対」に宣言しなければならないのです。
なお、文書型定義を略して、DTDと呼ぶことがありますので、覚えておいて
ください。一般的に DTDは、Document Type Definition の略として通用する
略語です。XHTML、XMLを勉強される型は必須項目です。
次回は、HTMLの作り方と、ヘッダ部の記述について深く解説します。
（注釈用語解説）
○注１：CGI（Common Gateway Interface）
Webサーバと外部実行プログラムの間のインターフェイス仕様・機構のことを
指します。
厳密には CGIというのはプログラムを指すのではなく、プログラムをHTTPサ
ーバで動かすための「ルールと仕組み」です。
例えば、よく見かける「アクセスカウンター」や「掲示板」などは、HTMLだ
けでは実現できないものです。HTMLから CGIを通してサーバに置いてある別の
プログラムによって実現しています。
■CGIについてはこちらを参照してください。
CGI入門 http://www.scollabo.com/banban/cgi/
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆XHTML講座 スクリプトの扱い
XHTML1.1で扱うスクリプトには、注意が必要です。文書中に配置する場合の注
意点について解説します。
■スクリプトは #PCDATA
XHTML1.1では、非XHTMLデータは #PCDATAとして扱われます。
#PCDATAとは、SGML的に解釈されるべき文字列という意味があり、XHTMLでは
普通のテキストではない、と文書型定義の中で決められています。
スクリプトでは、実際に &、<、>、&&、などの文字が多々使われます。
普通のテキストとして解釈される CDATAでは、これらの文字をそのまま使うこ
とができます。
ところが、#PCDATAでは、実体参照文字として扱われるため、
& は、&、< は、<、> は、>
というように記述しなければならないのです。HTMLでは何も問題なく文書中
に記述できたスクリプトですが、XHTMLでは、まったく違う展開になります。
例えば、JavaScriptを例に取ると、
for (n=1; n>= -100; n-- ) {
document.write(n); }
このような for構文を実体参照で記述すると、
for (n=1; n>= -100; n-- ) {
document.write(n); }
と、なります。ところが、実体参照で記述すると、ブラウザは、JavaScript
としては処理できず、エラーを返します。
JavaScriptに限らず、VBScriptでも、他のスクリプトでも、まったく同じ扱
いとなります。
■CDATAセクション
XHTML1.1では、文書中にスクリプトを記述する場合、 CDATAセクションを設
定しなくてはなりません。
スクリプトのデータを CDATA（キャラクタ文字）として解釈させるために、
CDセクションを設けた記述法があります。 CDATAでは、実体参照文字がそのま
ま使用することが可能なために設けられています。
CDATAセクションは以下の通りです。
<scaript type="text/javascript">
<![CDATA[
for (n=1; n>= -100; n-- ) {
document.write(n);
}
]]>
</script>
XHTMLに準拠した Webブラウザではスクリプトが実行できます。しかし、こ
の CDATAセクションをサポートしている Webブラウザが少ないことで、実際の
ところ現実的ではありません。
XMLでは見慣れた記述法ですが、XHTMLとして Webブラウザのレンダリングに
は、ブラウザに依存しなければならないわけですから、CDセクションを使った
スクリプトの記述法は、避けたほうが安全といえるでしょう。
XHTMLは比較的新しいマークアップ言語であるため、XHTMLを完全サポートし
ている Webブラウザが少ないのが難点です。CDセクションをそのまま表示して
しまうブラウザがあることが理由として、この記述法はお勧めできません。
CDセクションを用いたJavaScriptサンプル
http://www.scollabo.com/banban/magazine/mmsample/sample_53-4.html
（最新の MSIE、Netscape、Opera などでは問題ありません。と、思いますが・・）
■外部スクリプト文書
XHTML1.1でスクリプトを利用する方法として、最も一般的でポピュラーな手
法は、外部に置く文書としてスクリプトを分離します。
今回は、外部スクリプト、外部スタイルシート、そして XHTMLの３つの文書
を作成します。
今回のスクリプトは、別ウィンドウで表示するウィンドウサイズ、ステータ
スバーツールバーなどの表示/非表示の選択、URLの入力などを示したものです。
任意の URLを入力し、それを表示させるウィンドウを好みで設定します。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆スクリプトを表現する XHTMLの作成
まず先に、外部スクリプトを作成します。テキストエディタを起動して、以下
の通りにタイプしてください。スクリプトは、JavaScriptです。
■ test.js
function makeArray(n) {
this.length = n;
for (var i = 1; i <= n; i++) {
this[i] = "no";
}
return this;
}
function myOpenWin(frm) {
myATR = new makeArray(7);
for (i=3;i<7;i++) {
if (frm[i].checked) {
myATR[i]="yes";
}
}
winAtrib="width="+frm[1].value+",height="+frm[2].value+",
toolbar="+myATR[3]+",directories="+myATR[4]+",location="+myATR[5]+",
status="+myATR[6];
window.open(frm[0].value,"myWin",winAtrib);
return false;
}
入力が終わりましたら、JavaScript文書として保存します。
保存の際、拡張子「js」を必ずファイル名に続いてタイプしてください。ここで
は、「test.js」という名前で保存します。
続いて、外部スタイルシートを作成します。以下のようにタイプしてください。
なお、コロン「：」、セミコロン「；」を間違えないように。
■ test.css
@charset "Shift_Jis";
body { background-color: #fff; color: #000 }
div {
margin: 1em 10% }
h1 {
font-size: 1.2em; background-color: #069; color: #fff;
border-top: 3px double #069;
border-bottom: 3px double #069; text-indent: 1em }
form {
background-color: #ff6; color: 000; padding: 1em;
border: 2px solid #000 }
label {
font-weight: bold; font-family: monospace }
input {
margin-right: 1.5em }
入力が終わりましたら、スタイルシート文書として保存します。
保存の際、拡張子「css」を必ずファイル名に続いてタイプしてください。
ここでは、「test.css」という名前で保存します。
なお、保存場所は、先ほどのスクリプト文書と同じ場所です。
■ XHTML文書
<?xml version="1.0" encoding="ISO-2022-JP"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><!-- 改行なしで記述 -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_Jis" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="stylesheet" type="text/css" href="test.css" />
<title>スクリプトの扱い/XHTML1.1</title>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<div>
<h1>URLを指定して、新しいウィンドウで開く JavaScript</h1>
<form>
<p>
<label>URI:
<input name="URI" value="http://www.google.com/" size="40" />
</label>
</p>
<p
<label>width:
<input name="width" value="400" size="5" />
</label>
<label>height:
<input name="height" value="400" size="5" />
</p>
<p>
<label>toolbar:
<input type="checkbox" name="toolbar" value="" size="5" />
</label>
<label>directories:
<input type="checkbox" name="directories" value="" size="5" />
</label>
</p>
<p>
<label>location:
<input type="checkbox" name="location" value="" size="5"
checked="checked"/>
</label>
<label>status:
<input type="checkbox" name="status" value="" size="5" />
</label>
<label>menubar:
<input type="checkbox" name="menubar" value="" size="5" />
</label>
</p>
<p>
<input type="button" name="open window" value="open window"
onClick="myOpenWin(this.form)" />
</p>
</form>
</div>
</body>
</html>
入力が終わりましたら、拡張子「.html」をつけて保存します。
文書の名前は任意につけてください。例えば、「test.html」など。くれぐれも
拡張子を忘れないように。
保存場所は、スクリプト文書、スタイルシート文書と同じ場所です。
サンプル実行結果
http://www.scollabo.com/banban/magazine/mmsample/sample_53-5.html
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆解説
■JavaScript「test.js」より
function makeArray(n) {
関数を設定しています。関数名は「makeArray(n)」です。
この関数は、配列の中の値を初期値として「no」を設定しています。
つまり、各フォームの入力の値を、フォームで示されたデフォルト（初期値）
に設定しています。詳しくは XHTML解説を参照してください。
this.length = n; for (var i = 1; i <= n; i++) { this[i] = "no"; }
return this;
フォームの入力欄を設定しています。それぞれのデータは「no」として、関数
の戻り値として返しています。
this.length は、配列の数（正確には、フォームの入力欄の数）示します。
ここで示される「no」は、新たに開くウィンドウのツールバーやステータス
バーなどを初期値として非表示になるよう設定しています。
function myOpenWin(frm) {
ここでも関数を設定しています。関数名は「myOpenWin(frm)」です。
この関数は XHTMLのフォームの中のイベント属性によって呼び出されます。
myATR = new makeArray(7);
配列インデックスの７番目の値を myATR変数に代入しています。
for (i=3;i<7;i++) { if (frm[i].checked) { myATR[i]="yes"; }
繰り返し構文で、配列変数 myATR[3] から myATR[7] 間での値を調べて
「yes」に設定しています。
これは、チェックボックスの入力値に、チェックが入っていた場合に適用さ
れます。この中の checed は、フォームの選択項目の値を調べるFormオブジェ
クトのプロパティです。
winAtrib="width="+frm[1].value+",height="+frm[2].value+", 以下省略
各入力欄から得た情報を元に、新たなウィンドウを設定しています。
■CSS文書「test.css」より
@charset "Shift_Jis";
スタイルシートの書式文字コードを設定しています。この場合は CSS文書が、
シフト-JISの文字コードを利用して書かれていることを示しています。
なお、文字コードの値は、あなたが利用するテキストエディタの文字コード
を採用してください。詳しくは、あなたのソフトウェアの「ヘルプ」を参照し
てください。
body { background-color: #fff; color: #000 }
画面に表示されるスクリーン（本文の領域）の背景色を白色、文字色を黒色に
初期値として設定しました。
この設定は、各要素で特別に色などを設定しない場合に適用されます。
div { margin: 1em 10% }
汎用ブロックレベル要素の余白を設定しています。上下には１文字分、左右に
画面全体の10％の比率の余白を設けました。
h1 { font-size: 1.2em; background-color: #069; color: #fff;
border-top: 3px double #069; border-bottom: 3px double #069;
text-indent: 1em }
見出しを設定しています。
文字の大きさは通常の20％の大きさ、文字色は白色、背景色はややくすみが
かった青色、上下に３ピクセル分の２重線、そして、１文字分の字下げを設定
しました。
form { background-color: #ff6; color: 000; padding: 1em;
border: 2px solid #000 }
フォーム全体の設定です。背景色を黄色、文字色を黒、２ピクセル分の太さを
持った黒色の枠線、枠線から１文字分の余白を設定しました。
label { font-weight: bold; font-family: monospace }
入力フィールドで示すラベルの文字を強調し、固定ピッチフォントに設定しま
した。
input { margin-right: 1.5em }
入力領域のフィールドの右側に１文字半の余白を設定しています。
ラベルや入力フィールドが近すぎないための設定です。
■XHTML文書から
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
この２つは、文書のコンテントタイプ（MIMEタイプ）を表しています。両者と
も、XHTML文書中で用いられるために、必要な項目です。
空要素なので、行末に半角スペース＋スラッシュを忘れないように。
<link rel="stylesheet" type="text/css" href="test.css" />
外部スタイルシート文書を読み込んでいます。同じく空要素です。
<script type="text/javascript" src="test.js"></script>
外部スクリプト文書を読み込んでいます。スタイルシート文書との扱いの違い
に、注意してください。今回のメインテーマです。
JavaScriptの外部文書の拡張子は「js」となっています。
<h1>URLを指定して、新しいウィンドウで開く JavaScript</h1>
第１見出しで表現しています。
見出しは、必ず第１見出しから記述しなければなりません。決して、h2、h3
から始まってはいけません。厳格に言えば文法違反になります。
<form><p>
フォームの中で記述される input要素などは、必ずブロックレベル要素の中で
配置されなければなりません。そのために、あえて p要素を設定しています。
<label>URI:<input name="URI" value="http://www.google.com/" size="40" />
ラベルは入力フィールドの「見出し」の役目を持っています。基本的に、その
入力フィールドが何を示しているのかを明確に表します。
input要素内で示される value属性は、あらかじめ入力フィールドの中で初
期値として表現させたものです。input要素では必須の属性です。
なお、何も表示させたくない場合は、value="" として記述します。
size="40" とは、入力フィールドの文字数を表していますが、必ずしも40文
字以内でなければならないという制限はありません。
<input name="width" value="400" size="5" />
ブラウザの横幅を設定するための入力フィールドです。初期値として 400ピク
セル幅に設定していますが、ユーザが任意に変更することが可能です。
<input type="checkbox" name="toolbar" value="" size="5" />
入力フィールドがチェックボックススタイルに設定しています。
<input type="checkbox" name="location" value="" size="5"
checked="checked"/>
チェックボックスのチェックが、あらかじめチェックされている状態にしてい
ます。
XHTML1.1では、属性を最小化（値のない属性）することができません。そこ
で、checked="cheked" というように記述しなければなりません。HTMLでは、
その必要はありません。
<input type="button" name="open window" value="open window"
onclick="myOpenWin(this.form)" />
入力フィールドをボタン型に設定し、ボタンが押されると、JavaScriptの関数
「myOpenWin()」が実行されます。
onclick属性はイベント属性と呼び、クリックされたときに発生するものです。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆HTML タグの解説 --- ins要素
追加情報を示す場合にこの要素で、そのテキストを囲みます。
要素分類：インラインレベル、ブロックレベル要素（同時使用は不可）
DTD仕様 ：HTML4.01Strict
終了タグ：必須
属性 ：cite、datetime、汎用属性（id、class、title、lang）
属性値 ：cite="URI 削除理由を示した文書の URI"
datetime="日時：削除した日時（ISO-8601形式）"
子要素として持てる要素：ほとんどの要素（ヘッダ部を除く）
文書中、重要な情報を追加することが発生した場合に、この要素で囲んで記述
します。一般的な視覚系ブラウザでは、下線が表示されます。
この要素は、指定する範囲によっては、ブロックレベル要素になる場合と、イ
ンラインレベル要素になる場合がありますが、インラインレベル要素として使用
した場合には、子要素としてブロックレベル要素を配置することができません。
また、同時使用もできませんので、注意してください。
先週解説した、del要素と同じ性格を持っています。
日時に利用する ISO-8601方式とは、以下のように記述します。
datetime="2003-05-29T09:30:25+09:00"
（日本時間2003年５月29日午後６時30分25秒となります。）
つまり、グリニッジ標準時間（UTC）より ９時間足した時間が日本時間とな
ります。
記述法
<ins datetime="2003-05-29T09:30:25+09:00">
ばんばんの親父が、本日定年退職となりました。
</ins>
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
今回はここまで、ではでは・・
今週のおさらいは Webページにも掲載しましたので、是非見ておいてください。
Webページでは HTML文の実行結果のサンプルもあり、より分かりやすく説明して
います。あわせて過去の記事のおさらいも掲載しています。
（今週のおさらい）
http://www.scollabo.com/banban/magazine/review_053.html
次回のコンテンツ（予定）
■ Webデザイン 第４回 --- ナビゲーションの設計
■ HTML講座 第４回 --- HTMLの作り方とヘッダ
■ XHTML講座 その16 --- 動画を扱う
■ タグの解説 --- （内容は未定）
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
質問・ご意見ははこちらまで→ 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://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
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
＜えでぃた〜ず・るーむ＞
新型肺炎（SARS）が世界的に問題になっています。
これによって、様々な催事などが中止になったりして、特にアジアでは大きな問
題になっているようです。
コンピューター・ウィルスも怖いけれど、このウィルスは人命に関わるので、
世界保健機構（WHO）も、細心の警戒を呼びかけています。
そういえば、日本国内でも２年前には「狂牛病」問題が大きく取り上げられて
問題視されたのですが、その後どうなったのでしょうか・・・？
いずれにしても、自然界が人類に逆襲しているような気がします。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆著作権について
個人がご自分のＰＣに保存して利用する以外の記事の転載、引用は基本的に応じ
ておりません。記事中の内容について、無断で使用することを固く禁じます。
なお、記事中のスタイルシート、HTMLをご自分のページ作成に自由に使ってい
ただいても差し支えありません。
Copyright(C) 2002-2003 www.scollabo.com/banban/
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
Copyright(C) 2002-3003 banban@scollabo.com