毎週金曜日配信 What's New 2003/7/11
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
初心者のためのホームページ作り/Web for beginner
http://www.scollabo.com/banban/
＜第58号＞
wfb-org@jcom.home.ne.jp
（初心者のホームページ作り臨時制作委員会）
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
当講座は、初心者や中級者が正しい文法と作法を身につけて、プロ級の本格的
な Webページ作成に役立つことを目的に配信されております。
当講座ではHTML4.01及び XHTML1.1 を中心とした文法が主体となっています。
なお、このマガジンは等幅フォントでお読みいただくと快適に読めるようになり
ます。
今週のコンテンツ
■ Webデザイン 第７回 --- 文字と情報 その２
■ HTML講座 第７回 --- スタイルシートの利用法
■ XHTML講座 その19 --- コンテンツの配置 その４
■ タグの解説 --- form要素
（おことわり）
HTML講座は初心者向け、XHTML講座は中級者向けに解説しています。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆Webデザイン
文字、つまりテキストはなかなか読んでくれません。紙と違ってディスプレイ
上にある文字は読みにくいものです。ディスプレイのフォーカスが甘い、透過光
なので目が疲れやすい、同じ姿勢で読まなくてはならない、スクロールすると視
点がずれてしまうなど、文字を読む環境とはいいがたいものです。
同時に、文章は動画やアニメなどと違ってその意味を汲み取って理解しなけれ
ばならないため、ユーザは常に頭を使わなければなりません。
そういった中で、どうしたら読んでくれるようになるでしょうか？いろいろと
工夫すべき点があります。
高齢化に伴い Web上のアクセシビリティはますます重要になってきます。お年
寄りは小さな文字が読みづらいものです。小さな文字にしている場合には改良す
る必要があります。
少なくとも、文字の大きさを設定する場合には、pt（ポイント）などのような
絶対値を指定してはいけません。絶対値では、ユーザが自分のブラウザで設定す
る文字の大きさを無視してしまうからです。
文字と文字の間、行と行の間に適度なスペースを設定することも読みやすさを
向上させます。
字体を設定する場合にもアンチエイリアスに気をつけなければなりません。特
に Macintoshにおける明朝体は美しく表示してくれますが、全体的にボヤけた印
象となり、決して可読性が良いとはいえません。
一般的に１行で表示する文字数は、50文字が限界といわれています。できるこ
となら50文字以内のほうが、読んでくれる可能性が高くなります。50文字が数段
にまたがっていると、最初から読もうという気が失せてしまう恐れがあります。
（ちなみに、このマガジンの１行の文字数は、36文字です。）
余白を設けたり、インデントを設定したり、文章にメリハリをつけ、読みやす
い環境を設計することを考慮しましょう。
（第８回アクセスログにつづく）
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆HTML講座
ホームページを鮮やかに彩り、視覚的な訴求をデザインする欲求は Web制作者
の誰もが持つもので、その手法は実にさまざまです。
「見栄え」とは、実のところ色や大きさ、位置などを指します。
しかし、HTMLとは視覚に訴える作られ方を求めるものではありません。あくま
でも構造的にコンテンツ要素を配置するためにあるものです。多くの制作者が、
この大原則を忘れているために、実際には情報から隔離されてしまう状況が多々
発生しています。
つまり、視覚に訴えるだけのページでは、非視覚系ブラウザからのアクセスを
困難にしているのです。 Webの概念である「誰にでも平等に」という情報アクセ
スの原則から逸脱している現在の状況は、本当に悲しむべきことです。
では、どのようにすれば多くの訪問者を満足させることができるでしょうか？
■スタイルシートを利用する背景
Webページを閲覧するためのソフトウェアがブラウザと呼ばれることは、何度
か説明してきました。ブラウザは、ページに記述されているHTMLを順次理解し
ブラウザの仕様（注１）に基づいてレンダリング（表示）します。
しかし、ブラウザが意味不明な記述に出会った場合には、それを無視して次
へ移ります。これはある意味では非常に重要なところです。
通常、プログラムに意味不明なバグやエラーがあった場合には、処理を中断
してしまいます。HTMLがプログラムではなく、単なるテキストであるために処
理を中断することなく、不明な部分だけを飛ばしてレンダリングを続けるわけ
です。
この機能を拡大解釈すると、ブラウザにとって「意味不明な部分」を利用す
ることができるともいえるでしょう。
スタイルシートをサポートしていない非視覚系ブラウザでは、スタイルシー
トは意味が分からないので、その処理をパスします。HTMLの文書構造だけを解
釈して音声や点字、テキストなどに変換してレンダリングします。
つまり、スタイルシートで視覚的なデザインを設計すれば、非視覚系ブラウ
ザには迷惑がかからないということになります。
HTML4.01Strictは、見栄えを設定するタグや属性を使うことができません。
非視覚系ブラウザを利用する人たちにとっては福音となり歓迎されていること
でしょう。
例えば、背景色を設定する属性は利用できません。
Ｘ <body bgcolor="#ffffcc">
HTML4.01では、見栄えをスタイルシートで利用するよう強く推奨しています。
○ <body style="background-color:#ffc">
スタイルシートがサポートされていないブラウザ、あるいはスタイルシート
をオフにしているブラウザでは、style="background-color:#ffc" は実行され
ません。
■スタイルシート利用法
スタイルシートでは、色、大きさ、余白、枠線、位置など非常に多くの機能が
盛り込まれ、ホームページを豊かに装飾することが可能です。私の経験から判
断すると、どのようなレイアウトでも可能なほどです。
スタイルシートを利用する方法は３つあります。各タグに直接記述するイン
ライン方式、ヘッダ部にあらかじめ埋め込むエンベッド方式、そして、外部に
別文書として読み込ませるリンキング方式で、それぞいれに特徴があります。
◎インライン方式
以下のようなスタイルシートの利用法、つまりタグに直接 style属性を利用し
た設定をインライン方式と呼び、そのタグのみ適用されます。
<p style="background-color:#ffc">背景色を持ったテキスト</p>
これは、段落タグに style属性を使って背景色を設定するスタイルシートの利
用法です。（色の設定については、講座を進める中で詳しく解説します。）
◎エンベッド（埋め込み）方式
HTMLのヘッダ部にあらかじめスタイルシートを記述する方法で比較的多く用い
られている手法です。あるタグに設定するとそのページのそのタグすべてに適
用されます。
ヘッダ部に次のように記述します。
<style type="text/css">
<!--
p { background-color: #ffc }
-->
</style>
この設定は、段落をあらわす pタグすべてに背景色が適用されてしまいます。
なお、コメント方式を採用しているのは、スタイルシートに対応していないブ
ラウザへの配慮としているためです。
コメントで囲まれていない場合、すたいるしーと未対応のブラウザでは、そ
のままソースコードを出力してしまう危険があります。
◎リンキング方式（外部スタイルシート）
スタイルシートの設定を、HTML文中に記述せず、外部文書として読み込ませる
方法です。
この方法の利点は、複数のページに同じ設定を適用させることができ、後々
のメンテナンスが容易に行える点にあります。当サイトでは、そのほとんどで
外部スタイルシート方式を採用しています。
外部に置いたリンキング方式では、スタイルシート文書をHTMLに読み込ませ
るために、ヘッダ部に以下のように記述します。
<link rel="stylsheet" type="text/css" href="○○.css">
○○とは、スタイルシート文書に任意でつけた文書名です。作者が自由にス
タイルシートの名前を付けることができます。ただし、半角英数字です。また
大文字と小文字を厳格に区別するので間違えないようにします。
■スタイルシートを利用する注意点
HTMLにスタイルシートを利用する場合、HTMLのヘッダ内で、スタイルシートを
利用することを、明示的にユーザエージェントに伝えねばなりません。
要するに、「このHTMLは、スタイルシートを使うぞ！」というような宣言の
ようなものです。
記述法
<meta http-equiv="Content-Style-Type" content="text/css" >
この記述は、コンテンツのスタイルシートのコンテントタイプ（MIMEタイプ）
がテキストベースで作成された Cascading Stylesheet であることを明示しま
す。スタイルシートを利用する場合の必須の構文です。
MIMEタイプとは Web上で送られるデータ型をHTMLとして利用できるよう定義
するものとお考えください。
■スタイルシートの優先順位
スタイルシートの記述法は３つありますが、その優先順位について説明します。
優先順は、リンキング方式→エンベッド方式→インライン方式の順で、一番
優先されるのがインライン方式です。
基本的に、前で指定された設定を継承しますが、同じ属性の設定は優先順位
の高い設定を取ります。
例えば、リンキング方式で以下のように設定されたとします。
p { font-size: large; color: #ff0000 }（文字の大きさが large、色が赤色）
ところが、インライン方式で、
<p style="color:#0000ff"> とした場合、
この場合は、インライン方式が優先されて文字色を青色にします。ところが
文字の大きさは、リンキング方式で設定された値が継承されます。
■何故スタイルシートを学ぶ？
この講座は、HTMLの厳格仕様に基づいて解説しています。正しい文法はユーザ
の環境に依存することなく、たった１つの文書で、すべてのユーザエージェン
トに対応できます。
訪問者のブラウザ銘柄を意識することなく、あなたが提供する情報コンテン
ツを正確に伝えることができます。
その意味では、スタイルシートは不要かもしれません。しかし、ページを鮮
やかに彩るレイアウトデザインの欲求を満たすために、スタイルシートは不可
欠です。
スタイルシートが完全なわけではありませんが、現実にほとんどの視覚系ブ
ラウザで実装している事実を考えれば、スタイルシートを利用することに何も
抵抗はないはずです。
正しい文法を維持することができるのなら、どんな手段でも利用したいもの
です。スタイルシートは、それを実現してくれる数少ない手段でもあるのです。
◆スタイルシートを利用したHTMLの作成
ここで簡単なHTML文書を作成しましょう。スタイルシートを利用して見栄えを
設定します。スタイルシート部分はコロン「：」、セミコロン「；」を間違えな
いようにタイプしてください。
テキストエディタ（メモ帳やSimpleText）を起動して以下のようにタイプして
ください。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_Jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Microsoft Office System 2003</title>
<style type="text/css">
<!--
body {
margin: 1em 15%;
padding: 0;
color: #000000;
background-color: #ffffff;
letter-spacing: 1px;
line-height: 130% }
h1 {
font-size: x-large;
color: #006699;
background-color: inherit }
p {
text-indent: 1em }
-->
</style>
</head>
<body>
<h1>Microsoft Office System 2003</h1>
<p>
2003年秋に発売が予定されている次期マイクロソフト社のオフィス・アプ
リケーションは、「System」という名がつけられ、従来とはまったく異な
る構成で作られています。
</p>
<p>
特に、オフィス・アプリのすべてに完全に XML対応として、オフィスで
作成されたそれぞれの文書を、他のアプリケーションにも再利用可能だと
いう。それは本当なのか、検証してみよう。
</p>
</body>
</html>
入力が終わりましたら、HTML文書として保存します。
保存の際に、拡張子を記述しなくてはなりません。HTML文書としての拡張子
は「html」、あるいは「htm」です。
文書名は任意ですので、自由に名前をつけてください。なお、ローカル環境
では、日本語名でもかまいませんが、サーバにファイル転送する場合には、必
ず半角英数字を使うようにしなければなりません。
例えば、「sample.html」というような名前と拡張子をタイプして保存する
ことによって、HTML文書として保存できます。もう一度編集する場合には、テ
キストエディタの「ファイル」から「開く」を選んで、該当するファイルを選
択すると、HTML文書が編集可能になります。
サンプル実行結果
http://www.scollabo.com/banban/magazine/mmsample/sample_58-1.html
◆解説
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
HTML4.01厳格仕様の文書型定義です。HTMLでは文書の冒頭で利用するタグセッ
トの種別を明示的に宣言しなければなりません。決まりごとです。
<html lang="ja">
日本語を使ったHTML文書であるため、言語コードを「ja」と指定しています。
基本的に言語コードは、ルート要素である htmlタグに lang属性を用いて指定
します。
なお、ここの属性値「ja」に引用符で囲んでいます。属性値が英数字である
場合には引用符で囲むことを省略できますが、それ以外の記号やハイフン、ア
ンダーバーを記述する場合には、引用符で囲まなければなりません。
ただし XHTMLでは、どんな場合でも引用符で囲まなければなりません。
<meta http-equiv="Content-Type" content="text/html; charset=Shift_Jis">
文書作成の際に利用する文字コードを指定しています。必須の構文です。
metaタグは、文書内容のメタデータを Webサーバ、あるいはユーザエージェ
ントに伝える役目があります。
このタグは、エンプティ（空）要素と呼ばれ、終了タグを持っていません。
http-equiv属性は、文書のプロパティ（文書情報）を示すもので、そのプロ
パティの値を示すのが content属性です。
text/html という値は文書のMIMEタイプを示しています。なお、文字コード
を示す値は、大文字でも小文字でもかまいません。（SHIFT_JIS 、shift_jis）
httpとは Web上の文書を参照するためのプロトコル（通信手順）を表し、通
常 WebブラウザでインターネットのHTML文書を閲覧する際に利用されます。
なお、ファイル転送では FTP、メールの送信に SMTP、受信には POP3などの
プロトコルが一般的に利用されています。
<meta http-equiv="Content-Style-Type" content="text/css">
文書中に「Cascading Stylesheet」を利用していることを示しています。
スタイルシートを利用する場合には、そのMIMEタイプをユーザエージェント
に伝える必要があるために、必ず記述するように心がけましょう。
<title>Microsoft Office System 2003</title>
文書のタイトルを設定しています。titleタグは必須です。
通常、ヘッダ部で記述される構文は Webブラウザでは何も表示されませんが
唯一、このタグだけがブラウザのタイトルバーに表示されます。
検索サーチ型ロボットは、このタグで囲まれたテキストを参照し、検索の際
のデータベースに格納されます。文書内容を的確に示す題名をつけましょう。
<style type="text/css">
スタイルシートを設定する場合に用いられます。ユーザエージェントにスタイ
ルシートのMIMEタイプを伝えるために、「text/css」は必須です。
なお、styleタグは、ヘッダ部でしか利用することができません。
body { margin: 1em 15%; padding: 0; color: #000000;
background-color: #ffffff; letter-spacing: 1px;
line-height: 130% }
HTMLでコンテンツを表示させるための最上位に位置するbodyタグに設定してい
ます。
全体の余白の設定で、上下に1文字分、左右に15％の余白を設けました。
％の設定は、ユーザのブラウザ画面の相対値を指します。
padding: 0 に設定したのは、Operaブラウザが余白の設定の初期値にこの属
性が設定されているための配慮です。
bodyタグ全体の背景色を白色、文字色を黒色に設定しました。ユーザのブラ
ウザによっては初期値に灰色が設定されている場合に、これが適用されます。
letter-spacing: 1px; は 文字と文字の間に１ピクセル分の余白を設定して
文字にある程度の間隔を持たせることにより読みやすい環境にしています。
line-height: 130% は、文字の行間（上下の間隔）を１文字の30％分に設定
して、文字が読みやすいよう環境に設定しています。
h1 { font-size: x-large; color: #006699; background-color: inherit }
第一見出しタグを設定しています。
フォントの大きさを x-largeにして、通常より２廻りほどの大きさに設定し
ました。文字色はややくすみがかった青色です。なお、文字色を設定する場合
には背景色も同時設定するように求められています。
ここでの背景色は親要素であるbodyタグで設定された背景色を使うという意
味で、inherit という値にしました。
フォントの大きさ、色などについては、講座を進めていく中で詳しい解説す
る予定です。取りあえず何も分からないという方は、この設定で入力してくだ
さい。理解できる方は自分なりの設定をお試しください。
p { text-indent: 1em }
段落要素を示す pタグを設定しました。このタグに囲まれる一番最初の文字を
１文字分のインデント（字下げ）を設定しました。
テキストにアクセントをつける上で有効な手段の１つです。ページ内で記述
されるすべての段落タグに適用されます。
以下省略。（たぶん初心者の方でもこの講座を通して理解できるのではないか
と思っています。どうしても分からない方はご質問ください。懇切丁寧にご説
明いたします。）
◆スタイルシートの構造
スタイルシートは、セレクタ（選択部）と、宣言部から成り立っています。
宣言部は属性（プロパティあるいはアトリビュート）と値で構成されています。
body { margin: 1em } の場合、
body セレクタ
margin: 1em 宣言部
margin 属性（ぞくせい）
1em 値（あたい）
◆まとめ
スタイルシートは、HTML文書構造からプレゼンテーションを分離する手段であ
ることは、前回説明したとおりです。
スタイルシートは万能ではありませんが、レイアウト・デザイナーの描く設
計書そのままを出力することができます。スタイルシートを駆使すれば、まず
レイアウトの表現に悩まなくて済みます。
今回作成したHTML文書中からスタイルシートにかかわる部分を削除してみれ
ば、HTML文書が論理的な構造で記述されていることに気がつくはずです。その
構造は非常にシンプルで、誰が見ても理解可能なHTMLになっています。
SGMLの大原則である、プラットフォームを選ばない、人間のコンピューター
も理解可能である、ということが見事に示されているでしょう。
スタイルシートは非常に奥が深く、学ぶうちにいよいよ面白くなってきます。
何よりもユニバーサル・デザインの入り口に立つことを実現します。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆XHTML講座
コンテンツの配置は、レイアウト・デザインを構築する際、非常に重要な項目
の１つといえるでしょう。テキストと画像などの位置関係や、余白の設定など、
位置揃えを設定するための手法はいくつかあります。
今回は、スタイルシートの z-index属性、visibility属性を使って、配置の設
定を行います。
■ z-index属性の機能
絶対位置を複数設定する場合、レイヤー（層状）という重なりを指定すること
ができます。この属性は、レイヤーをコントロールし、コンテンツの重なり順
を指定することができます。
なお、この属性を使う場合には、コンテンツが位置指定されることが条件と
なります。（position属性が absoluteであること）
レイヤーを簡単に説明すれば、透明な紙を重ねるということを想像してくだ
さい。その透明な紙に何かを書いた場合、何枚もの透明な紙を重ねても、書い
たものを見ることができます。このようにレイヤーは重ねるという概念で成り
立っています。
複数の画像を重ねて表示する場合に用いられることが多く、凝ったレイアウ
トを構築することができます。画像だけでなく、他の要素にも利用できます。
・整数 ： 値が大きいほど上に配置する（負数も利用可能）
・auto ： 親要素と同じ階層に配置する（デフォルト値）
整数は 0を基点としてマイナスも設定可能です。その属性とその値はほとん
どの視覚系ブラウザで対応されています。
■ visibility属性の機能
visibility属性は、要素の表示非表示を設定するもので、非表示とした場合に
は、領域だけが確保されコンテンツを見えない状態にします。
コンテンツを非表示にして、JavaScriptと組み合わせて表示させるなどの使
い方に利用されていることが多い属性です。
・visible ： 表示する（デフォルト値）
・hidden ： 非表示にする（ただし要素の領域は確保される）
・collapse： テーブルの行、列、およびそのグループを非表示にする
これらの CSS設定を踏まえて、実際に XHTML、CSS文書を作成します。
テキストエディタを起動して、下記の要領でタイプしてください。
（XHTML1.1文書より）
<?xml version="1.0" encoding="Shift_Jis"?>
<!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" type="text/css" />
<link rev="made" href="mailto:banban@scollabo.com" />
<link rel="stylesheet" type="text/css" href="sample.css" />
<title>z-indez属性と visibility属性の利用</title>
</head>
<body>
<div id="param-4">
<h1>z-index属性の効果</h1>
</div>
<div id="param-3">
<em>重なり順の妙技</em>
</div>
<div id="param-2">
<img src="images/niagara.jpg" alt="ナイアガラの滝" width="250"
height="180" /> <!-- 改行せずに -->
</div>
<div id="param-1">
<img src="images/sakura.jpg" alt="桜の写真" width="250" height="180" />
</div>
<div id="param-5">
<h2>visivility属性の効果</h2>
<p>
<img id="hidden" src="images/sakura.jpg" alt="桜の写真"
width="250" height="180" /> <!-- 改行せずに -->
このように、本来、左側に表示されるべき「ナイアガラの滝」の写真画像の
領域だけを残して、非表示に設定することができます。 <!-- 改行せずに -->
</p>
</div>
</body>
</html>
入力が終わりましたら保存します。拡張子「.html」をつけてください。
保存する際の名前は任意に付けてください。例えば、sample_58.html という
ようにして、必ず拡張子を記述してください。
次に、スタイルシートを作成します。以下のようにタイプしてください。
特に、コロン「：」、セミコロン「；」を間違えないように。
（CSS文書より sample.css）
@charset "Shift_Jis";
body {
margin: 1em 5%;
padding: 0;
background-color: #fff;
color: #000 }
div {
position: absolute }
#param-1 {
z-index: -1;
left: 100px;
top: 30px }
#param-2 {
z-index: 0;
left: 200px;
top: 80px }
#param-3 {
z-index: 1;
left: 180px;
top: 120px }
#param-4 {
z-index: 2;
left: 280px;
top: 20px }
#param-5 {
left: 50px;
top: 380px }
h1 {
display: inline;
padding: 3px;
font-size: x-large;
color: #069;
background-color: #fcf }
em {
font-size: xx-large;
font-style: none;
color: white;
background-color: black;
padding: 0.5em }
h2 {
display: inline;
padding: 3px;
font-size: x-large;
color: #063;
background-color: #cff }
img#hidden {
visibility : hidden;
float: left }
入力が終わりましたらスタイルシート文書として保存します。
ここでは文書名を「sample」として拡張子「.css」をつけます。保存のダイ
ヤログボックスで、「sample.css」とタイプして保存してください。
なお、保存先は先ほどの XHTML文書と同じフォルダにします。
サンプル実行結果
http://www.scollabo.com/banban/magazine/mmsample/sample_58-2.html
◆解説
XHTML構文については何度も解説していますので省略します。もし分からない
点がありましたら、ご質問ください。
div { position: absolute }
汎用ブロックレベル要素 divを絶対位置に指定します。この設定は、すべての
div要素に適用します。
#param-1 { z-index: -1; left: 100px; top: 30px }
ここでは、絶対位置の指定を設定しています。重なり順位は、マイナス指定で
すので、一番下の層に位置して表示します。
要素名を特定せずに idセレクタのみの設定をしています。
この場合、要素は何でもいいわけです。例えば、p id="param-1" としても
かまいません。ただし、絶対位置指定の関係がありますの 、div要素に適用し
ます。
セレクタに要素名を記述しない使用法は、クラス属性にも当てはまります。
.param とすれば、<span class="param"> でも、<p class="param"> でも同時
に利用することができます。
ただし、id属性では、たった１回しか使えない制限があります。複数同時に
利用する場合には、クラスで設定する必要があります。
img#hidden { visibility : hidden; float: left }
画像の領域を確保しながら非表示に、テキストは画像の右側に回りこむように
設定しています。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆HTML タグの解説 form要素
フォームは、ユーザに入力してもらうための領域や、構成部品などを配置する
ために利用されます。
要素分類：ブロックレベル要素
DTD仕様 ：HTML4.01Strict
終了タグ：必須
属性 ：action、method、name、汎用属性（id、class、title、lang）
enctype
属性値 ：action = "URI" （必須）
method = "post" あるいは "get"（デフォルト値は get）
name = "任意の名前"
enctype = "送信するデータのMIMEタイプ"
子要素として持てる要素
: ブロックレベル要素（table、p、divなど）のみ
直接 input、select、textarea要素などは配置できません。
フォームの利用法はいろいろと考えられます。お問い合わせやアンケート、あ
るいは、スクリプトなどでも使われています。
送信されるデータは action属性で示される URI になりますが、そのほとんど
で CGIが当てられます。
データを送信する際、enctype属性で text/plainを設定しても、実際には判読
不能となります。また、ブラウザによっては送信されない場合もあります。
そういった障害を避けるために Webサーバーにプログラムをおいて、そのプロ
グラムがデータ処理をして本来の場所に送信されます。
ただし CGIプログラムは非常に難解で、初心者がおいそれと手を出せる代物で
はありません。
フォームを設定する記述で、初心者が最も間違えやすいのは、form要素の子要
素がブロックレベル要素であることに気付かない点です。いきなり入力フィール
ドを設定しまうのです。
間違い例：
<form action="/bin/samp_cgi/" method="post">
<input type="text" name="名前" value="お名前を記入してください">
</form>
正しい記述例：
<form action="/bin/samp_cgi/" method="post">
<p>
<input type="text" name="名前" value="お名前を記入してください">
</p>
</form>
一部上場の企業のホームページでも、このような間違った構文を書いていると
ころがあります。知る人が見れば、本当に恥ずかしいことです。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
今回はここまで、ではでは・・
今週のおさらいは Webページにも掲載しましたので、是非見ておいてください。
Webページでは HTML文の実行結果のサンプルもあり、より分かりやすく説明して
います。あわせて過去の記事のおさらいも掲載しています。
（今週のおさらい）
http://www.scollabo.com/banban/magazine/review_058.html
次回は、7月18日に配信を予定しています。
次回予定しているコンテンツ（変更する場合があります）
■ JavaScript講座 第11回 --- プルダウンメニューを作る
■ コラム --- Java言語とアプレット
■ Microsoft Office System 2003 --- データベースと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
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
＜編集後記＞
「船頭多くして船、山に上る」 という「ことわざ」があります。この意味は、
我も我もとリーダー的な発言で事を成そうとすると、まったくバラバラで目的を
達することができない例えです。
委員会も12名いますと、色々と意見が分かれ方針が定まりにくくなってしまう
のが現状です。ばんばん氏はそんなことがイヤで、結局１人で作業を進めていた
のでしょう。
ばんばん氏は今週初めに手術を受けました。４時間にも及ぶ大手術でしたが、
医師の話では大成功とのことで、全員ほっとしています。今後は術後の治療を施
され、その後リハビリに入るとのこと、どうやら先が見えてきたようです。
しばらく面会謝絶となっていますので本人に会うことができませんが、ご家族
の話では良好な状態が続いているとのことです。
手術は、主にばんばん氏が若い時に作ってしまった脳内の血の固まりを取り除
くことだったようです。彼は10代の時から「オートバイレース」に熱中し、世界
グランプリを夢見て活動していました。
何度も転倒し、今では右の腎臓を失い、鼻と鎖骨にはプラスチックが入ってい
ます。また、強く頭を打ちつけることを繰り返すうちに脳内に出血があり、それ
が原因で脳圧を上げて、めまいや吐き気、一時的な意識喪失などを繰り返してい
ました。
手術による後遺症が今後どのように現れるのか懸念されますが、きっと彼の強
い意志で跳ねのけてくれるだろうと信じています。
皆様から届けられた「熱い熱い応援メール」は委員会で印刷し、本人に全部届
けています。本当にたくさんの心のこもったメール、掲示板の書き込みをありが
とうございます。本人に代わり、心からお礼申し上げます。
さて、今晩は次週の編集会議です。きっとまた大騒ぎでもめることでしょう。
こんなことをしていたら、ばんばん氏に叱られそうです。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆著作権について
個人がご自分のＰＣに保存して利用する以外の記事の転載、引用は基本的に応じ
ておりません。記事中の内容について、無断で使用することを固く禁じます。
なお、記事中のスタイルシート、HTMLをご自分のページ作成に自由に使ってい
ただいても差し支えありません。
Copyright(C) 2002-2003 www.scollabo.com/banban/
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
Copyright(C) 2002-3003 banban@scollabo.com