毎週金曜日配信 What's New 2003/7/25
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
初心者のためのホームページ作り/Web for beginner
http://www.scollabo.com/banban/
<第60号>
wfb-org@jcom.home.ne.jp
(初心者のホームページ作り臨時制作委員会)
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
当講座は、初心者や中級者が正しい文法と作法を身につけて、プロ級の本格的
な Webページ作成に役立つことを目的に配信されております。
当講座ではHTML4.01及び XHTML1.1 を中心とした文法が主体となっています。
なお、このマガジンは等幅フォントでお読みいただくと快適に読めるようになり
ます。
今週のコンテンツ
■ Webデザイン 第8回 --- アクセスログの利用
■ HTML講座 第8回 --- リンクとパス
■ XHTML講座 最終回 --- XHTML2.0概要
■ タグの解説 --- input要素
(おことわり)
HTML講座は初心者向け、XHTML講座は中級者向けに解説しています。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆Webデザイン
このコラムでお伝えしたように、ユーザにとって使いにくい、あるいはやって
欲しくない表現は Webデザインの骨子から外れるものです。
同時に、制作者の立場からユーザを判断すると、ユーザは非常に身勝手で移ろ
いやすくわがままなのです。
コンテンツが見にくい、配色が気に入らない、という理由だけですぐに去って
しまい2度と訪れてくれません。つまり、コンテンツの内容とは無関係で、第1
印象だけで、サイトに滞在するかどうかを瞬時に判断してしまいます。
ユーザがどのような目的で自分のページを見に来るのか、その目的意識を考慮
する必要あります。提供する情報とターゲットユーザの絞込み、そしてコンテン
ツの表示方法を考え、ユーザの欲求を満足させることが優先されます。
ユーザの意識を知る上でも、アクセスログの解析は欠かすことができません。
アクセスログは、単に訪問者の数を調べるだけでなく、どのようなキーワードで
やって来たのか、どこから来たのか、、訪問の時間帯や曜日、ブラウザの銘柄や
ユーザの使用しているOS、訪問したページはどこかなどの詳細を読み取ることが
できます。
アクセスログにはエラーログもあり、不用意なリンク切れなどの防止にも役立
ちます。
特に通販サイトでは、どのような商品に興味をもたれているのかを観察するこ
とができ、商品ラインナップの企画立案に威力を発揮します。
ただし、一般のプロバイダが提供するホームページ領域では、アクセスログを
提供していないことなどがあり、非常に残念な思いをしているユーザも少なくあ
りません。
また、アクセスログだけを頼りにするのは少し心配ですが、ユーザ動向の目安
となることを知る上では、大いに役立つことでしょう。
■アクセスログから知り得る情報
・訪問者総数、ダウンロードされたファイル数など
・日付、曜日、時間帯別のアクセス量
・1つ前の Webサイト(どこから来たかを知る)
・キーワード(検索サイトによってどのようなキーワードを入力したのか)
・ユーザエージェント(ブラウザ、OSとそのバージョン名)
・訪問したページ
・ユーザのドメイン名(基本的にメールアドレスは分からない)
(第9回 パンくずリストにつづく)
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆HTML講座
HTMLの最大の特徴は、他の文書にリンクできる点にあります。まさにハイパー
テキストとして、世界中のリソースを参照することが可能です。
リンクを示す構文はいたって簡単で、アンカータグを用います。
<a href="http://www.googl.com/">Google検索</a>
インライン要素である aタグに、href属性でリンク先の URLを示します。この
1行で間単にそのページにリンクすることができます。画期的なことです。
平たく説明すると、
<a href="リンク先の URL">リンク先の名称</a>
となります。リンク先の名称とは、その内容が分かるように適切なテキストを
配置します。
通常、ホームページ作りを行う場合、サイトのトップページだけでなく、その
ページから導かれる複数のページが作られます。それぞれのページはお互いに関
連してリンクする場合が一般的です。
アンカーは、それぞれのページを結ぶリンクを設定する上で、大変重要な役割
があるのです。
■絶対パス(Absolute Path)
上記のリンクを示す URLは「絶対パス」と呼ぶリンク先を表しました。絶対パ
スとは、「http://」で始まるリンク先のアドレスをフルパスで記述します。
この記述は、主に自分自身のサイトから他のサイト(サーバ)にリンクする場
合に用いられます。
絶対パスという所以は、「そのアドレスが世界で唯一である」ということか
ら「絶対」という意味が当てはまります。
パスとは、ファイルシステムの中で特定のファイルを指定するのに用いられ
階層構造の位置とファイル名の指定に使います。
例えば、絶対パスにおける www.scollabo.com/banban/ では、ネットワーク
上のリソースを参照します。この場合は、scollabo.com の中の banbanという
名前のディレクトリ(分かりやすくいえばフォルダ)を指します。
絶対パスでスラッシュ「/」の後に何もない場合には、通常 index という名
のファイルを探します。(サーバの種類によっては default もあります)
indexファイルがない場合には、エラー(404エラー:ファイルがない)を返
します。
■相対パス(Relative Path)
自分自身のサイト内にあるページにリンクする場合、通常「相対パス」が用い
られます。相対パスとは、「今いる場所から見た他の場所との位置関係」を示
します。
ただし、絶対パスを使うなという意味ではありません。サイト内であっても
絶対パスを使うことは許されています。
相対パスを理解する上で、「ディレクトリ」という「階層構造」の概念を知
る必要があります。
ディレクトリとは、UNIX上でよく使われる言葉で、Windows や Macintoshで
は「フォルダ」という言葉が当てはまるでしょう。
一般的には「一覧表」などという意味で使われますが、ある意味では的を得
た言葉です。
以下は、当サイト内のディレクトリ構造の一部です。
( / はディレクトリを示しています。また、ファイル名の後に続く記述は
拡張子で文書が何たるかを識別するためのもので識別子とも呼ばれます。)
/banban {ディレクトリ}
┣━━━━ index.html (HTMLファイル)
┃
┣━━━━ /lectur {ディレクトリ}
┃ styel.html、websafe.html等 (HTMLファイル)
┃
┣━━━━ /term {ディレクトリ}
┃ w3c.html、xt.html、java.html等 (HTMLファイル)
┃
┣━━━━ /images {ディレクトリ}
┃ title.gif、sample.png等 (画像ファイル)
┃
┣━━━━ /css {ディレクトリ}
┃ banbansheet.css (スタイルシートファイル)
┃
┗━━━━ /magazine {ディレクトリ}
┃ index.html、magazine.html等 (HTMLファイル)
┃
┗━━ /sample {ディレクトリ}
┃ sample.html等(HTMLファイル)
┃
┗━━ /images {ディレクトリ}
kabe.png等 (画像ファイル)
当サイトでは、各カテゴリ別にディレクトリを持っており、その中に各種の
ファイルが格納されています。
例えば、banbanというディレクトリは index.html というHTML文書と、他の
ディレクトリが配置されています。サイトのトップページはこの index.html
になります。拡張子が .htmlとなっていることで、このファイルがHTML文書で
あることを示しています。
index.html から見た lecturディレクトリの style.html へのリンクは、
<a href="lectue/style.html">スタイルシートについて</a>
このように記述して、リンクします。つまり、lecturディレクトリの style
という名のHTMLファイルを指定しています。
index.html から見た lecturディレクトリは同位階層にあります。同位であ
るためにディレクトリ名を指定し、その中にあるHTML文書を指定しています。
絶対パスも同様ですが、ファイル名を指定する場合には、ファイル名に続い
て、その拡張子も明示しなくてはなりません。
lecturディレクトリの style.html からトップページへリンクする場合には
パスの記述が異なります。
<a href="../index.html">Home</a>
これはlecturディレクトリの style.html からトップページへのリンクの記
述です。../ とは、「1つ上の階層」という意味です。つまり、lecturディレ
クトリは、banbanディレクトリの中にあります。
そのため、lecturディレクトリから見た場合には、banbanディレクトリが、
上位階層であるということが理解できるでしょう。上位階層とは、今いる場所
の「親」となるディレクトリであることと覚えてください。
banbanディレクトリ内にあるすべてのディレクトリ、ファイルはその最上位
ディレクトリが、banbanディレクトリであるということです。
では、深層階層になっている magazineディレクトリ内にある sampleディレ
クトリとの関係はどうなっているでしょうか。
トップページから、magazineディレクトリの深い階層にリンクする場合、そ
れぞれのディレクトリ名を順に記述します。
<a href="magazine/sample/sample.html">メールマガジンサンプル</a>
このように、各ディレクトリ名をスラッシュで区切って記述します。これで
目的のページにリンクできます。
それでは、その逆はいかがでしょうか。
<a href="../../index.html">Home</a>
これは、今いる場所から2つ上の階層にリンクすることを示しています。
../ が1つ上の階層を示しているとすれば、 ../../ は2つ上であることが
理解できます。もう1つ深い階層ならば、../../../ とすればよいわけです。
<a href="○○/△△.html"> 同位ディレクトリの○○ディレクトリ内の△
△ファイルへのリンク
<a href="../□□.html"> 上位ディレクトリの□□ファイルへのリンク
<a href="../../□□.html"> 上位ディレクトリの、その上位ディレクトリ
にある□□ファイルへのリンク
<a href="../○○/△△.html"> 上位ディレクトリの同位ディレクトリにあ
る△△ファイルへのリンク
<a href="○○/△△/□□.html"> 下位の○○ディレクトリ内の△△ディレ
クトリ内の□□ファイルへのリンク
■ディレクトリの概念を覚える
1つのディレクトリ内ですべてを配置すれば、面倒くさいパスという概念を
意識する必要はありません。
しかし、サイトを運営していくうちにページが増え、それに伴い画像ファイ
ルや関連するファイルが次々に増えてきます。ちなみに、当サイトでは現在の
ところ、1400あまりの様々なファイルがアップデートされています。
それらファイルがもし同じディレクトリに並んでいたら、メンテナンスや更
新には大変な作業が要求されてしまいます。
サイトを設計する上で、カテゴリ別に分けた情報を整理しておくことは、サ
イト運営に威力を発揮します。同じように、各カテゴリに整理され、目的別の
文書ファイルを格納するディレクトリを設定し、個別に分けてに配置しておけ
ば、メンテナンスが用意に行えます。
サイト構築にあたって、オープンするよりも維持・管理・運営することのほ
うがはるかに多くのエネルギーを消費するものなのですから。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆おまけ --- ディレクトリについての薀蓄
ディレクトリを表示させるために、スラッシュを用いましたが Windowsパソコ
ンでは、「\」のマークで示されます。
c\My Documents\Home\test.txt このように示されることがあります。
ただし、MS-DOSでは、\ でも / でもディレクトリとして理解してくれます。
また、Macintoshでは、コロン「:」で示されます。
HD:User:banban:My Folder:test.txt
UNIX系、例えば Linuxでは、スラッシュで示されることが一般的です。
このように、コンピューターはファイルを格納するためにディレクトリ構造で
示されています。ディレクトリは、すべて階層(ツリー構造)になっており、
決められた手順でそれぞれのファイルを参照しています。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆XHTML1.1 最終回
今回は、W3Cがドラフト(草案)として発表されている XHTML2.0の概要につい
て詳しく解説します。(ちょっと難しいと思いますが・・)
XHTML1.1の問題点として、文書型定義と名前空間の関係に曖昧さが残り、独自
タグを利用することができません。
XHTML1.1ではスキーマ(要素や属性の構成・順序などの仕様を示した文書)に
関する取り組みが弱いので、独自タグを設定することができないのです。
XHTMLは、元々 XMLのサブセットとして HTML4.01を再定義したものですが、十
分な仕様になっておりません。XMLでは、多様な利用法があるにもかかわらず、
XHTMLでは、XMLのような機能を持っていないことに苛立ちがあります。
正式勧告間近の XHTML2.0 では何がどのように変化したのか、今年5月に改定
されたワーキングドラフト(WD 2003-05-06草案) を参照し、調べてみました。
■変わるマークアップの記述法?
XHTML2.0は、HTML4.01やXHTML1.1から派生したマークアップ言語ですが、基本
的にこれらを下位の言語として定義し、互換性を持たない方向です。
しかし、仕様書には既存のアプリケーションを XHTML2.0 に変換するための
方法について書かれており、従来のリソースを生かすこともできるようです。
また、HTML4.01や XHTML1.0、1.1に文法などが似ているため、これまでこの
言語を使用してきた開発者にも扱いやすく設計されています。
ただし、極めて XMLに近づいたXHTML2.0ですが、今までの感覚とはかなり異
なった記述になっています。
仕様書を見る限りでは、その記法はドラスティックに変化している感があり
ます。ある部分では、従来のHTMLという概念を捨てなければならないのではな
いかという危惧さえ感じられます。
XHTML2.0が正式勧告されるまでに、制作者はある程度の XMLについての知識
を学ぶ必要があると思います。(ちーと、大変。)
■物理タグの廃止
XHTML1.1でも利用できた物理タグ b、i、tt、big、smallなどが廃止されます。
ユーザ環境を考えると歓迎すべき決定事項です。
■廃止される要素と属性
base要素、style属性は廃止されることになりそうです。ただし、style要素は
どうやら健在のようです。
head要素で用いられた profile属性は、html要素内に移動、変更されます。
■href属性の拡大 --- XLinkの導入
従来、リンクを示すアンカーでは、例えば、
<a href="○○"><dfn>○○</dfn></a>
と、記述しなくてはなりませんでしたが、XHTML2.0では、href属性が、他の要
素内容にも拡大し利用可能となります。
XMLで採用されている「XLink」の利用が XHTML2.0で可能になっています。
<dfn href="○○">○○</dfn> こんな感じで、利用できるのは歓迎です。
ユーザエージェント側から見た場合、XLink の href 属性は要素型に関係な
く機能するわけですから、わざわざ特に a要素として記述する必然性もないわ
けでしょう。
ただし現実には、上記の dfn要素における記述例は
<dfn xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="...">...
</dfn>
としてやれば、現行のユーザエージェント Mozillaでも動作します。
このように現在の「XLink」は以下のような欠陥があります。
・名前空間接頭辞が必要(xmlns:xlinkの記述)
・リンク先を示す属性名が href属性のみに固定されている
・ひとつの要素に複数のリンク先を指定できない(HTMLでも同様)
といった点から XHTMLほか既存の文書型では利用し難いという議論がありま
す。これを回避するための代替仕様(HLink: Link recognition for the XHTML
Family)の草案が、2002年9月13日に W3Cより公開されています。
正式勧告までには、この点がどのような仕様になるのか楽しみでもあります。
■見出し要素の大幅変更と section要素の追加
通常、HTML、XHTMLでは見出し要素に h1〜h6までを利用しています。XHTML2.0
では、新たに h要素および、section要素が加わり、従来の見出しの記述法から
大きく異なります。
例えば、(W3C XHTML2.0ドラフトより抜粋)
<body>
<h>This is a top level heading</h>
<p>....</p>
<section>
<p>....</p>
<h>This is a second-level heading</h>
<p>....</p>
<h>This is another second-level heading</h>
<p>....</p>
</section>
<section>
<p>....</p>
<h>This is another second-level heading</h>
<p>....</p>
<section>
<h>This is a third-level heading</h>
<p>....</p>
</section>
</section>
</body>
最初の h要素が第一見出しと定義し section要素内の h要素が第二見出し要素
と解釈されています。また section要素内で入れ子にて section要素が示され
ていますが、その中の h要素は第三見出し要素として解釈されます。
この新しい機能は、今まで見出し要素を扱う記述よりもはるかに論理的で、
比較的コンテンツの作成が容易にできることでしょう。
なお、h1〜h6要素は削除されることはなく、従来どおりの利用法が可能にな
っているようです。
■段落要素の子要素の変更
XHTML1.1では p要素内に、ブロックレベル要素を配置することができません。
しかし、XHTML2.0では、リスト、テーブル、引用ブロックなどが配置できるよ
うになります。
ただし、同じ p要素を配置することは相変わらず禁止されています。
従来は常に </p> と閉じてから新たにブロックレベルを配置していたのですが
その必要がなくなり、制作効率が上がることでしょう。(ホンマかいな)
■pre要素の仕様変更
整形済みテキストを表す pre要素では、必ずしも等幅フォントで描画しなくと
もよい旨などが注記されています。初期値が等幅フォントになるのかどうかは
明記されていません。
この pre要素に限らず、すべての要素でスタイルシートによって余白の改行
あるいは保持を表す設定が行えるようです。当サイトでは、今でもその設定を
行っているのだが・・
■追加されるイベント
XML Eventsモジュールが取り込まれ、新たに「listener」要素が定義される予
定です。またその他にも、幾つかイベント関連の属性が追加されるようですが
XML Events の仕様書を参照する必要があります。
■新たなインラインレベル要素 quote、line要素
短文の引用に用いられた q要素に変わって、「quote要素」が使かわれます。
q要素は非推奨扱いとなり、今後は quote要素に1本化されます。
この要素は、従来の q要素と異なり、引用符の自動生成を前提としません。
つまり、生のテキストに引用符を記述し、その内容を直接 quote要素と見なす
という規則で記述することになります。
恐らくは、HTML4.01での q要素の引用符関連の規則についての不満が多かっ
たことへの対処であろうと思われます。
従来の物理的な「改行」を示す br要素型に代えて、論理的な「行」を示す
「line要素」が導入されています。なお、br要素の方も依然健在ですが、こち
らは非推奨とされています。
<line>多分、この要素を使うことで改行されるはずです。</line>
<line>むしろ、この記法のほうが論理的で歓迎されます。</line>
■ナビゲーションリスト要素の追加
従来、リスト要素は ol、ul、dl要素に限られていましたが XHTML2.0では、新
たにナビゲーションリスト「nl要素」が追加されます。
この要素は、サイトの構成をマーク付けするための要素になり、具体的には
併せて導入された「name要素」によってメニューの名前・ディレクトリ名など
を示し、その後にリスト項目を続けて記述します。
<nl>
<name>目次</name>
<li href="#Introduction">XHTML初級講座</li>
<li>
<nl>
<name>1. XHTMLの基本</name>
<li href="#xml_1-1">2.1 XML宣言</li>
<li href="#xml_1-2">2.2. 小文字の記述</li>
<li href="#xml_1-3">2.3. 終了タグの扱い</li>
</nl>
</li>
<li href="#xml_3">3. 結論</li>
</nl>
今は廃止されていますが、HTMLでは「menu要素」というものがありました。
この新しい要素型は、それを彷彿させていますが、果たしてこれがどのような
形で表現するのか興味深いものです。「XLink」 との併用が可能だということ
で、上記のようなサンプルとなりました。
■XFormsの導入
フォーム周辺の各要素の定義は、XForms1.0 モジュールを取り込んで定義され
る予定です。これを理解するためには、ある程度の XMLスキルを要します。
初心者の方には、以下の文章が日本語として理解できないと思いますが、取
りあえず仕様書そのままを翻訳しました。
XMLのXFormsに関しては以下のとおりです。
XFormsでは、送信すべきデータとそれを入力するコントロールとを分離し、
フォームの再利用やさまざまな機種での応用を可能にします。
データを詳細に型付けしてチェックを容易にし、あるいは主要な用途に対応
したイベントハンドラを使うことでスクリプトなどの必要性を減じるといった
特徴も持ちます。
フォームとして送信するデータは 「model要素」で定義します。
各ユニフォームは input、select要素などの機能を示す要素で表現し ref属性
などを用いてモデル(データ)と結びつけます。
さらに「bind要素」や XMLスキーマを直接埋め込んでデータのタイプや値の
範囲などに制約を与えチェックも可能にします。
また、今後のフォームに求められる要件をまとめた XForms Requirementsと
いう文書も別個に討議されており、2001年4月6日に新しい草案が公開されてい
ます。
■フレームと target属性の復活
何でいまさらと、いかぶる声が聞こえそうです。なにしろHTML4.01であれほど
フレームを悪玉扱いの非推奨にしておいて、どうして復活する必要があるのか
分かりません。
XHTML2.0では、XMLで利用する XFrames を使えるようにしています。
フレームを用いる場合には、XFrames の名前空間を利用することになります。
XFtames名前空間:http://www.w3.org/2002/06/xframes
名前空間 からも判断できるように、XFrames は XHTML とは別個の独立した仕
様になっています。
XFrames 記述例
<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet type="text/css" href="#style" ?>
<!DOCTYPE frames PUBLIC "... Public id of XFrames ..."
"... System id of XFrames ..." >
<frames xmlns="http://www.w3.org/2002/06/xframes">
<head>
<title>フレームの例</title>
<style type="text/css" id="style">
colum {height:20%;}
#frame3 {height:80%;}
#frame1 {width:33%;}
#frame2 {width:67%;}
</style>
</head>
<row>
<colum>
<frame source="frame1.html" id="frame1" />
<frame source="frame2.html" id="frame2" />
</row>
<frame source="frame3.html" id="frame3" />
</colum>
</row>
HTML4.01の <frameset col="...">...</frameset> が <row>...</row> に、
<frameset row="...">...</frameset> が <colum>...</colum> に対応する形
になりますが、XFrames の定義の方が 理解しやすくなっています。
ちなみに、XFramse の head 要素は省略可能となっています。また、現時点
では head の内容は title と style のみですが、metaの要素型を取り込む可
能性もあるようです。
当然のことながら、フレームで利用するリンクに「target属性」も復活して
います。この属性は XFramesモジュールを想定して定義されるようです。
■スキーマ
今年3月、XMLユーザには待望されていた XML Schema が正式勧告されました。
独自タグを設定する場合に用いられる要素と属性の機能、順序などの仕様に関
するスキーマが、XHTML2.0に利用できるかどうか今のところ未定ですが、非常
に興味のある勧告になっていますので、期待できるでしょう。
スキーマは DTD(文書型定義)の欠点を補う新しいデータ定義型を示すため
に策定されました。これによると、文書型定義の宣言なしで、名前空間の中で
指定することが可能になるのではと予想できます。
しかし、XHTML2.0でも文書型定義が存在し、「ねばならない」という規定で
あった場合には、スキーマの設定との整合性が図れるかどうか、その矛盾点を
どう解決するのか興味のあるところでもあります。
なお現在のところ、XHTML2.0における DTDは以下のとおりです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 2.0//EN"
"http://www.w3.org/TR/xhtml2/DTD/xhtml2.dtd">
また、XHTML2.0名前空間はこのように定義される予定です。
http://www.w3.org/2002/06/xhtml2
XHTML2.0サンプル
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 2.0//EN"
"http://www.w3.org/TR/xhtml2/DTD/xhtml2.dtd">
<html xmlns="http://www.w3.org/2002/06/xhtml2" xml:lang="ja" >
<head>
<title>初心者のためのホームページ作り</title>
</head>
<body>
<p>Moved to <a
href="http://www.scollabo.com/banban">Web for beginner</a>
</p>
</body>
</html>
■まとめ
XHTML1.0、XHTML1.1と、相次いで勧告された次世代マークアップ言語ですが、
使い込むうちに、本来の XMLの機能が利用できないことに矛盾と疑問を感じて
います。
それらの仕様が過渡期のマークアップであることは明白です。取りあえず文
法を学んでおけよ、というメッセージであるかもしれません。
しかし、XHTML2.0はまったく違うものという感を抱きます。もう XMLそのも
のなのじゃないのか、という仕様になっています。これでは初心者が簡単に利
用できるというマークアップ言語ではないと思います。
一方で、XHTML1.1の矛盾点を解決しようという試みは歓迎されます。どちら
にせよ、私たちは XMLを学ぶ必要があります。
参考資料
W3C XHTML2.0 草案 http://www.w3.org/TR/xhtml2/
XLink 詳細 http://www.w3.org/TR/xlink/
XML Evant http://www.w3.org/TR/xml-events/
XForm 詳細 http://www.w3.org/TR/2002/WD-xforms-20020118/
XML Schema http://www.w3.org/TR/xmlschema-1/
(お知らせ)
今回で、XHTML1.1講座を終了します。当面は HTMLを中心にした構成で、XHTML
の記述法などを併記した内容で編集します。ご了承ください。
なお、次回より XML初級入門講座を予定しています。ちょっと難しいかもし
れませんが、なるべく分かりやすく解説します。
(とにかく奥が深すぎて自信ありませんが・・)
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆HTML4.01 タグの解説 --- input要素
フォーム内でユーザからの入力フィールドを設定するために利用されます。
要素分類:インラインレベル要素
DTD仕様 :HTML4.01Strict
終了タグ:なし(空要素)
属性 :汎用属性(id、class、title、lang)
type、name、value、size、maxlength、tabindex、accesskey
disabled、readonly、checked、accept、src、alt
usemap、ismap、align
属性値 :type ="形式" 入力の形式を指定します。複数の設定は不可。
例:text、radio、button、checkbox、submit、resetなど
:name ="名前" 入力フィールドに任意の名前をつけます。
:value ="値" 初期値として、入力フィールドに表示させる値。
:size ="幅" type属性が text、password のときに、そのフィールド
の幅を文字数で設定しそれ以外ではピクセル単位になります。
:maxlength ="最大文字数" 入力フィールドにおける最大文字数を設
定します。初期値は文字数の制限はありません。
:tabindex ="数値" タブキーを利用して各入力フィールドの移動を順
を追ってできるように設定します。マウスが使えないユーザへ
の配慮としてこの設定を強く求められています。
:accesskey ="任意の1文字" ユーザの入力フィールドへのショート
カットキーを割り当てます。マウスが使えないユーザへの配
慮としてこの設定を強く求められています。
:disabled この属性の値はありません。これを設定した入力フィー
ルドへは、ユーザは選択も変更もできません。このデータは
送信されません。
:readonly 選択可能ですが変更することはできません。このデータは
送信されることはありません。
:checked この属性の値はありません。type属性が checkbox のとき
あらかじめ選択されている状態にします。
:accept ="MIMEタイプ" type属性が「file」の場合のみ、サーバのプ
ログラムがデータとして処理可能なMIMEタイプを指定します。
:src ="URL" type属性が imageの場合、送信ボタンとして利用する画
像を指定します。
:alt ="代替テキスト" type属性が imageの場合、その代替テキスト
を指定します。必須の項目です。
:usemap ="URI" イメージマップの設定。type属性が imageの場合で
クライアント・サイド・イメージマップを設定する場合に対応
させます。
:ismap ="URI" 非推奨属性。サーバサイド・イメージマップの設定。
:align ="位置" 非推奨属性。input要素の位置指定。
子要素として持てる要素 : なし
基本的に、form要素内で使われることが一般的ですが、単独で使用することも
可能です。ただし、一部の古い Webブラウザでは無視される場合があります。
この要素を使用する場合には、必ずブロックレベル要素内で配置しなければな
りません。見落としやすいミスなので気をつけましょう。
ユーザがデータを入力し、そのデータを送信するための入力フィールドを形成
するための要素として用いられます。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
今回はここまで、ではでは・・
今週のおさらいは Webページにも掲載しましたので、是非見ておいてください。
Webページでは HTML文の実行結果のサンプルもあり、より分かりやすく説明して
います。あわせて過去の記事のおさらいも掲載しています。
(今週のおさらい)
http://www.scollabo.com/banban/magazine/review_060.html
次回は8月1日に予定していますが、社員旅行やメンバーの夏休みになどよって
ことによるとお休みする場合があります。その際には別途ご案内いたします。ご
了承ください。
次回予定のコンテンツ(変更する場合があります。)
■ Webデザイン 第9回 --- パンくずリスト
■ HTML講座 第9回 --- フォント
■ XML初級入門講座 第1回 --- 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
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆更新情報
自作マシン制作記をアップしました。ばんばん氏が作りかけの自作コンピュー
ターの製作過程を委員会が引き継いで作成しました。
写真をふんだんに使っていますので、ナローバンド環境の方には少々接続しに
くいかと思います。(ページ当り最大48KB)
お暇な時に参考程度にご覧ください。何かの役に立てば幸いでです。あわせて
ハードウェアに関する用語集も掲載しました。
臨時制作委員会が初めて本格的に作成したページです。
自作マシン制作記 http://www.scollabo.com/banban/mypc/
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
<編集後記>
ばんばん氏のパソコンの中に膨大な量の XMLに関するドキュメントがあります。
現在、委員会で手分けをしてこの資料を分析分類し、マガジンの原稿にするため
の作業を行っています。
それこそ初めてお目にかかる単語がたくさん詰まっています。委員会では少々
難しすぎて理解するのが大変ですが、何とか初心者の方にも分かりやすいよう編
集し、このマガジンでお伝えしたいと思っています。(でも、本当に難しい)
ばんばん氏は今週から精密検査と歩行訓練に入っています。今は弱々しい1歩
ですが、再起の1歩であることは間違いないでしょう。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆著作権について
個人がご自分のPCに保存して利用する以外の記事の転載、引用は基本的に応じ
ておりません。記事中の内容について、無断で使用することを固く禁じます。
なお、記事中のスタイルシート、HTMLをご自分のページ作成に自由に使ってい
ただいても差し支えありません。
Copyright(C) 2002-2003 www.scollabo.com/banban/
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
Copyright(C) 2002-3003 banban@scollabo.com