〜 と同じ
役割となります。
具体的な書式； 文字列.strike()
document.write("JavaScript".strike());
変数 a に格納された文字列に抹消線をつけて表示します。
□ sub、sup
subメソッドは下付き文字を、supメソッドは上付き文字を表現します。
具体的な書式； 文字列.sub()、 文字列.sup()
a = "2";
document.write("水の化学式は、H", a.sub(), ”Oです。");
H2Oの化学式の「2」を、下付き文字で表現します。
□ substr
文字列から、指定した位置から指定した範囲で文字を抜き出します。１文字目
が 0 であることに注意してください。
具体的な書式： 文字列.substr(開始位置, 抜き出す文字数)
a = "JavaScript";
document.write(a.substr(4,6));
変数 a に格納された文字列の中から、５番目の文字から６文字抜き出し
ます。返される値は、「Script」になります。
□ substring
文字列から指定した範囲の位置で文字を抜き出します。substrメソッドは文字
数で抜き出しますが、このメソッドは「位置」で抜き出します。
具体的な書式： 文字列.substring(開始位置, 終了位置)
a = "JavaScript";
document.write(a.substring(4,9));
変数 a に格納された文字列の中から、５番目の文字から９番目の文字まで
を抜き出します。返される値は、「Script」になります。
□ toLowerCase、toUpperCase
指定した文字列 (アルファベットのみ適用) すべてを、小文字、あるいは大文
字に変換します。
具体的な書式： 文字列.toLowerCase()、 文字列.toUpperCaswe()
a = "JavaScript";
document.write(a.toLowerCase());
変数 a に格納された文字列を、すべて小文字に変換して表示します。
□ length
Stringオブジェクトで唯一定義されている lenghは、文字列の長さを参照しま
す。返される値は数値となります。
具体的な書式： 文字列.length
a = "初心者のためのホームページ作り";
document.write(a.length, "文字です。);
変数 a に格納された文字列の文字数を表示しています。
なお、Metscape、及び Mozillaでは、全角の日本語 (２バイト文字) の１文字
は２、MESIは、非アスキー文字でも１文字は１として計算します。
※主だったメソッドとプロパティのの実行結果は「今週のおさらい」をご覧く
ださい。 (下段に URI があります。)
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆Tips --- 文字列オブジェクト
文字列をオブジェクトとして扱う場合には、明示的に宣言します。しかし、実
際には、明示的に宣言しなくても文字列オブジェクトとして扱われるのが一般
的になっています。
a = new String("JavaScript"); 明示的に文字列オブジェクトを生成
a = "JavaScript"; 明示しなくても文字列オブジェクトとして利用可能
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆WindowsXP Service Pack2 対策
今月の２日よりリリースされた WindowsXP Service Pack 2 (以下SP-2) には
かつてないセキュリティ機能を強化しました。昨今の脅威に対するマイクロソ
フト社の回等です。
すでに皆様の中には Windows Update よりダウンロードしてインストールし
ている方もおられると思います。10月からは全国の郵便局や、PCショップでも
SP-2の CD-ROMを無料で配布されることも予定されています。
■SP-2の問題点
SP-2を適用した Microsoft Internet Explorer (以下MSIE) では Webページに
埋め込まれているプログラムに対して警告を表示します。
ActiveX (注１) を利用したコンテンツはすべてその対象にあり、Flash や
JavaScriptなどのオブジェクトも含まれます。
そうしたオブジェクトが埋め込まれたページを閲覧すると警告のダイヤログ
ボックスが表示されます。
「情報バーにお気づきですか？
ポップアップウィンドウや、安全でない可能性のあるファイルのダウン
ロードが IE でブロックされると、情報バーで警告します。
Webページが正しく表示されない場合、ブラウザ上の上の部分に表示さ
れる情報バーをご覧ください。」
ダイヤログボックスのとおり、「情報バー」と称せられるブロックには、以下
のような説明文があります。
「セキュリティ保護のため、コンピュータにアクセスできるアクティブコン
テンツは表示されないよう Internet Explorer で制限されています。
オプションを表示するには、ここをクリックしてください。」
閲覧者は、情報バーをクリックしてオブジェクトをブロックするか許可するか
を選択することになります。
ページにスクリプトや動画を埋め込んだ場合、SP-2を適用したコンピュータ
は常に警告のメッセージが現れ、その都度閲覧者は余計な操作を強いられるこ
とになります。悪意を持ったサイトから身を守るという点では非常に効果があ
りますが、そうしたサイトは実際には少ないものです。
しかしながら、圧倒的多数のページで ActiveXを利用したコンテンツを採用し
ている現実を考えると、当分混乱は続きそうです。
■SP-2の強化された機能
1.ネットワーク保護 （Windows ファイアウォール機能）
2.メモリ保護 （最新技術で再コンパイルされたコードの提供)
3.安全性の高い電子メール処理 （添付ファイル処理に関するAPIの強化）
4.ブラウズのセキュリティ強化 （ポップアップブロック機能）
5.コンピュータの保守性の向上 （自動更新機能）
■SP-2への対策
トップページで ActiveX を利用するコンテンツ作りを避けることが賢明です。
初めて訪れる閲覧者にとって、不要な警告を与えて緊張させると、どうしても
不安になってしまいます。
ActiveX を利用するコンテンツは別のページで用意し、その趣旨をあらかじ
め説明しておいたほうが安全でしょう。
なお、マイクロソフト社では Web制作者に向けた対応について同社のサイトで
掲載していますので、ぜひともご一読ください。
SP-2への対応
http://www.microsoft.com/japan/msdn/windows/windowsxp/xpsp2websites.asp
SP-2 Webサイトの最適化
http://www.microsoft.com/japan/msdn/windows/windowsxp/xpsp2web.asp
■SP-2インストールの注意点
WindowsUpdateより SP-2をインストールする場合、そのダウンロードファイル
は 100MB前後になります。今月末より WindowsXPユーザでは、自動更新により
ダウンロードされますが、ナローバンドでの通信時間に注意してください。
マイクロソフト社では、SP-2に限って自動更新を止めるためのツールも用意
していますので利用するのも方法です。
主要都市では本日から、また来月より全国の郵便局などで無償で配布されま
すので、それを利用するようにしましょう。
自動更新停止ツールのダウンロード (2005年4月12日まで有効)
http://go.microsoft.com/?linkid=988173
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆お詫びと訂正
前回「第100号」で掲載したスタイルシートのサンプルに間違いがありました。
ここに訂正し深くお詫びいたします。
誤 import url("sample_100-2.css");
正 @import url("sample_100-2.css");
importの冒頭でアットマーク「@」が抜けていました。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
今回はここまで。
今週のおさらいは Webページにも掲載しましたので、是非参考までに見ておい
てください。
Webページでは HTML文の実行結果のサンプルもあり、より分かりやすく説明
しています。あわせて過去の記事のおさらいも掲載しています
（今週のおさらい）
http://www.scollabo.com/banban/magazine/review_101.html
次回は、10月1日に配信を予定しています。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆質問・ご意見ははこちらまで→ banban@scollabo.com
なお、ご質問の際には、あなたがお使いのOS、ブラウザ、テキストエディタな
ど、なるべく分かりやすく制作環境を明記していただけると回答しやすくなる
と思います。
ただし、個人的な事由により返事が遅れることがあります。ご了承ください。
お急ぎの場合には、当サイト内の掲示板をご利用ください。きっと誰かが答え
てくれると思います。
発行者 ばんばん
協 力 スズキ・コラボレーション http://www.scollabo.com/
配信エンジン まぐまぐ http://www.mag2.com/ （ID 0000090196）
誤字・脱字・変換ミス・表現欠乏などには、平にご容赦願います。
■バックナンバー こちらで公開しています。
プレーンテキスト http://www.scollabo.com/banban/magazine/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/
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
初心者のためのホームページ作り_107.txt 100666 0 0 41655 10225251312 15755 隔週金曜日配信 What's New 2004年12月24日
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
新・初心者のためのホームページ作り/Web for beginner
http://www.scollabo.com/banban/
＜第107号＞
banban@scollabo.com
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
当講座は、初心者が正しい文法と作法を身につけて、魅力的な Webページ作
成に役立つことを目的に配信されております。
当講座では HTML4.01、XHTML1.1 を中心とした文法が主体となっています。
なお、このマガジンは等幅フォントでお読みいただくと快適に読めるようにな
ります。今号が本年最後の配信となります。
今週のコンテンツ
■ やさしいHTML入門 (第２回) --- HTMLの基本
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆やさしいHTML入門 --- HTMLの基本
専門的に言えば「HTML基本データ形式」となりますが、難しい話は横に置き、
ここでは最低限知っておく必要のある基本的な作法について述べます。
■タグの書き方
HTMLであらかじめ決められているタグは < と > で括って半角英文字でタイプ
します。文字は大文字でも小文字でもかまいません。当講座では将来を見越し
て小文字で説明します。
タグとは「荷札」の訳がありますが、ある情報を荷札で囲んで閲覧ソフトに運
ぶという考え方から「タグ」と呼ばれた経緯があります。
マークアップするということは、情報をタグで囲むことにほかなりません。
正しくマークアップされたHTMLドキュメントは、どのような環境でも正しく情
報が伝わることができます。
正しいマークアップとは、標準に照らし合わせて「妥当なマークアップ」であ
るということです。この「標準」については講座の中で適時取り上げます。
なお、将来を見越すとは、次世代マークアップ言語である XHTMLや XMLなどが
小文字で記述することが求められているためです。
タグは不平等記号を使ってタグ名を囲みます。
例えば、<タグ> というような感じです。タグはマークアップすべき要素に
対して適切なタグを選んで記述します。要素とは情報が持つ「あるまとまった
内容」をあらわします。要素ごとのタグに関しては講座を進める中で詳しく解
説します。
■タグとその属性
タグには属性 (Attribute) を持つものがほとんどです。属性とはタグの機能
を補ったり拡張する働きがあり、属性のあるなしではまったく異なる機能を有
します。
例えば、以下のリンクを示す構文について解説しましょう。
目次 「目次」というページに移動する
目次 「目次」という文字にアンカーを設定
aタグでも属性が違うと、その働きが変わります。前者では単純に指定され
たページにジャンプしますが、そのとき、ごく普通のブラウザでは下線が引か
れ文字色も変化します。一歩、後者ではその部分にアンカーを設定し、他の箇
所から参照できる印をつけるだけで、表示にはまったく影響がありません。
通常、属性のないタグはそのままの機能で表示させますが、属性がないとまっ
たく機能しないタグもあります。サンプルに用いた aタグはその代表です。
属性はその値が数値やアルファベットだけのものなら引用符で囲む必要はあり
ません。ただし、全角文字や記号などを用いた場合には、必ず引用符で囲まな
ければなりません。
↑ ↑ ↑ ↑
引用符必要 不必要 不必要 必要
なお XMLや XHTMLでは、すべての属性値は引用符で囲まなければならないと
決められているので、当講座では将来を踏まえてすべての属性値を引用符で囲
むように強くお勧めします。
タグと属性の間には必ず半角スペースを置いてください。続けて記述すると
コンピュータが正しく判断できません。また、全角のスペースは文字扱いとな
りますので厳禁です。
■ブロックレベルとインラインレベル
タグには大きく分けて２つの要素を囲みます。この点は非常に重要なので是非
覚えていただきたいところです。
○ブロックレベル
あるまとまった情報で括られるものをブロックと呼びます。例えば表組やリス
ト、見出しや段落などそれぞれが単独で完結するかたまりと思ってください。
ブロックレベルは基本的に前後に改行を持ちます。またブロックレベルの中
にブロックレベルを配置できる場合とできない場合があります。すべてのイン
ラインレベルは、必ずこのブロックレベルの中で配置されなければなりません。
現在定義されているブロックレベルを表すタグは以下のとおりです。
adress 作者の所在情報をあらわす
blockquote 長文の引用文をあらわす
div 汎用ブロック要素
dl 定義済みリストを定義する
fieldset 入力フィールドのグループ化
form 入力フォームを定義する
h1〜h6 見出しをあらわす (数値の低いものから優先される)
hr 罫線をあらわす
ol 番号つきリストを定義する
p 段落をあらわす
pre 整形済みテキストをあらわす
table 表組をあらわす
ul 番号なしリストを定義する
○インラインレベル
インラインとは「線の中にある」と直訳できますが、要するに普通の文字列と
同等にあります。つまり文字列の中で利用するタグをインラインと称します。
例えばある文字列の中で、文字を強調したい場合や抹消線を表示させたい場
合など、ある種の意味を持たせる場合に利用します。
またインラインであるため、前後に改行や空白は持っていません。すべての
インラインレベルのタグは、必ずブロックレベルの中で配置されなければなり
ません。
インラインレベルとして定義されているタグは以下のとおりです。
a ハイパーリンクを定義する
abbr 発音できない略語を表す
acronym 発音できる略語を表す
b 文字を強調する (一般的に太字にする)
bdo 文字の方向 (右から、あるいは左から) を定義する
big 通常より大きな文字に表現する
br 強制改行
button ボタンをあらわす
cite 参照先の URL をあらわす
code コンピュータ・プログラムコードとして表示する
dfn 追加のテキストとしてあらわす
em 文字を強調する
img 画像の表示
input 入力フィールドを形成する
kbd ユーザからの入力文字をあらわす
label 入力フィールドのラベルをあらわす
map イメージマップを定義する
object 静止画、動画などのオブジェクトを定義する
q 短文の引用を表す
samp コンピュータのサンプルデータとして表示させる
select 選択可能な入力フィールドを定義する
small 通常より小さい文字に表現する
span 汎用インライン要素
strong 文字を強調する (最も強い表現)
sub 下付文字として表示する
sup 上付文字として表示する
texteare テキストの入力フィールドを定義する
tt テレタイプ文字として表示する
var 文字が変数として表示する
■コンテナタグとエンプティ (空) タグ
通常、タグは開始タグと終了タグとで構成される「コンテナタグ」で表されま
す。終了タグはそのタグ名の冒頭でスラッシュ「/」を用います。
<開始タグ> 要素
具体的には、
第一見出し要素
ブロックレベルで用いられるタグのすべてがコンテナタグです。また、インラ
インで使われる「置き換え要素 (後述) 」は終了タグがありません。ただし、
コンテナタグの中には終了タグを省略できるものがありますが、将来を踏まえ
て、省略することがないよう強くお勧めします。
(ブロックレベルである罫線表示の hr は例外的に終了タグを持っていませ
ん。これなども置き換え要素の１つでもあるでしょう。)
エンプティタグは最初から終了タグが定義されていないタグで、別名「置き換
え要素」とも呼ばれます。画像や入力フィールドなどがこれに当たります。
具体的な例として
■非推奨と呼ばれるタグ
現在の最新の HTMLバージョンは 4.01です。HTMLの仕様は様々な改良を重ねて
バージョンアップしてきました。HTML4.01では大きく分けて３つのタイプがあ
ります。これに関してはいずれ詳しく説明しますので省きますが、過去のバー
ジョンで利用されていたタグなどを使う場合と、HTML4.01だけで定義されてい
るタグだけを使う場合、そしてフレームを使う場合に分かれます。
HTML4.01は過去のバージョンから飛躍的な改正がありました。その大きな目的
はマークアップの理念に直結するために工夫が凝らされています。誰でも、ど
んな環境でも閲覧可能なマークアップとするために、使うことが「好ましくな
いタグ」を選択し、それを「非推奨タグ」としました。
つまり、非推奨と呼ばれるタグを使った場合、環境によっては作者の情報が
正しく伝わらない可能性があるわけです。特定の環境、特定のソフトを使わな
ければならないということは、広く公開されたインターネットの世界では、非
常に不便なことです。
非推奨と呼ばれるタグ (実は非推奨属性もあります) は、閲覧環境に大きく左
右し、必ずしも作者が提供する情報を適切にレンダリング (理解可能な表現)
できない可能性があります。
また、閲覧者の利用するソフトウェアでは対応していないものも決して少な
くありません。以前のバージョンでは当たり前のように利用していたタグも、
HTML4.01では「好ましくない」タグになっていることに注意してください。
○非推奨タグ一覧
apllet 外部のJava言語で作成されたアプレットの表示
basefont ページ上の基本フォント (大きさや色、字体など) を指定する
center コンテンツを中央に配置する
dir 番号なしリスト (ディレクトリリストなどの表示)
font フォント (大きさや色、字体など) を指定する
isindex 文書内で検索可能なインデックスを作成する (CGIと関連)
menu メニューを表示するリスト (番号なしリスト)
s、strike 抹消線を表示する
u アンダーライン (下線) を表示する
これたのタグの代替手段については講座の中で適時説明します。
Webの標準仕様を制定する W3C (World Wide Web Consortium) という機関が決
定したHTML4.01ではそうした広範囲なアクセス性を確保する (これをアクセシ
ビリティと呼ぶ) 仕様が取り込まれ
た画期的なバージョンです。
当講座では、HTML4.01を中心としたアクセシブルで正確な文法に沿った内容
で解説します。
■倫理的な構造
HTMLは物理的なレイアウトを求めるのではなく、論理的な構造を求めるという
大前提があります。これは HTMLに限らず、XMLなど他のマークアップ言語すべ
てについて同じことが言えます。
論理的な構造を求めるといっても、ちょっとピンとこないかもしれません。と
ても難しいように思えます。しかし、HTMLの文法を学ぶと「なるほど」とうな
ずける点が出てきます。
簡単に説明することがなかなか困難ですが、論理構造はツリー構造であるこ
とから説明しましょう。
○ツリー構造
ツリー (木) を説明すると、ちょうど親子兄弟などの家族関係を想像できます。
親がいて子がいて孫がいる、あるいは兄弟もいるという関係を図に表すと以下
のようになります。(等副フォントでお読みください。)
┏━━━┓
┃ 親 ┃
┗━┳━┛
┏━━━━━━┻━━━━━━┓
┏━┻━┓ ┏━┻━┓
┃ 子 ┃ ┃ 子 ┃
┗━┳━┛ ┗━┳━┛
┏━━┻━━┓ ┏━━┻━━┓
┏━┻━┓ ┏━┻━┓ ┏━┻━┓ ┏━┻━┓
┃ 孫 ┃ ┃ 孫 ┃ ┃ 孫 ┃ ┃ 孫 ┃
┗━━━┛ ┗━━━┛ ┗━━━┛ ┗━┳━┛
┏━┻━┓
┃ ひ孫 ┃
┗━━━┛
平たく言えば、これがツリー構造です。それぞれに「階層」があることが理
解できると思います。最下層の「ひ孫」から「親」を見たとき、「孫」「子」
という２つの階層より上であることがわかります。
これをタグに当てはめると以下のようになります。 (各タグについては講座
を進める中で説明します。)
┏━━━┓
┃ html ┃
┗━┳━┛
┏━━━━━━┻━━━━━━┓
┏━┻━┓ ┏━┻━┓
┃ head ┃ ┃ body ┃
┗━┳━┛ ┗━┳━┛
┏━━┻━━┓ ┏━━┻━━┓
┏━┻━┓ ┏━┻━┓ ┏━┻━┓ ┏━┻━┓
┃ meta ┃ ┃title ┃ ┃ h1 ┃ ┃ p ┃
┗━━━┛ ┗━━━┛ ┗━━━┛ ┗━┳━┛
┏━┻━┓
┃ em ┃
┗━━━┛
このツリー構造から判断すると、以下の構文が考えられます。
← 親
← 子
← 孫
○△□ ← 孫
← 子
見出し
← 孫
段落になります。 ← 孫
文字の強調になります。 ← ひ孫
htmlタグが最上位となり、その下位層に head と bodyがあるのがわかります。
つまり、親となるタグは html のひとつだけです。その直接の子タグが head
と body というわけです。
headタグの子タグ、つまり html から見た場合の孫が meta と titleです。
逆に言えば、meta と titleの親は head になるわけです。
同様に htmlの子タグである body には h1、p という子タグがあり、p の子タ
グには em が配置されています。
このように、あるタグ内に囲まれたタグには親子関係が成立します。先ほど
インラインタグについて解説しましたが、インラインタグは必ずブロックレベ
ルタグの子、あるいは孫にならなければなりません。
論理的な構造とは、ある情報の要素をタグで囲むとき、それが「意味を成すブ
ロック」で囲まれていることが前提となります。HTMLドキュメントでは、最上
位に htmlタグがあり、その子タグとして head と body があります。
まず、このことをしっかりと覚えてください。
■Tips --- head と body
head (ヘッダ部) では、HTMLドキュメントが独自に持っている各種の情報を、
Webサーバやユーザエージェント (http を解釈するソフトウェア群、ブラウザ
やプロキシなども含まれる) に伝えるために記述されます。
titleタグ以外は、ブラウザに表示されるものはありません。
body（コンテンツ本体) は、実際にユーザエージェントで表現されるコンテン
ツを配置します。文字 (テキスト) や画像、フォーム、表組、リストなど、作
者が閲覧者に伝える情報は、すべてこのタグ内に配置されます。
具体的な head やコンテンツ表現につきましては、講座を進行する中で詳し
くお伝えします。
※ 次回は実際の HTML 作成に伴うヘッダについて解説する予定です。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
今回はここまで。
今週のおさらいは Webページにも掲載しましたので、是非参考までに見ておい
てください。
Webページでは HTML文の実行結果のサンプルもあり、より分かりやすく説明
しています。あわせて過去の記事のおさらいも掲載しています
（今週のおさらい）
http://www.scollabo.com/banban/magazine/review_107.html
次回配信は年が改まった 2005年1月7日を予定しています。それでは皆様、よい
お年を。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆質問・ご意見ははこちらまで→ banban@scollabo.com
なお、ご質問の際には、あなたがお使いのOS、ブラウザ、テキストエディタな
ど、なるべく分かりやすく制作環境を明記していただけると回答しやすくなる
と思います。
ただし、個人的な事由により返事が遅れることがあります。ご了承ください。
お急ぎの場合には、当サイト内の掲示板をご利用ください。きっと誰かが答え
てくれると思います。
発行者 ばんばん
協 力 スズキ・コラボレーション http://www.scollabo.com/
配信エンジン まぐまぐ http://www.mag2.com/ （ID 0000090196）
誤字・脱字・変換ミス・表現欠乏などには、平にご容赦願います。
■バックナンバー こちらで公開しています。
プレーンテキスト http://www.scollabo.com/banban/magazine/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/
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
初心者のためのホームページ作り_108.txt 100666 0 0 23064 10225251270 15753 隔週金曜日配信 What's New 2005年1月7日
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
初心者のためのホームページ作り/Web for beginner
http://www.scollabo.com/banban/
＜第109号＞
banban@scollabo.com
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
当講座は、初心者が正しい文法と作法を身につけて、魅力的な Webページ作
成に役立つことを目的に配信されております。
当講座では HTML4.01、XHTML1.1 を中心とした文法が主体となっています。
なお、このマガジンは等幅フォントでお読みいただくと快適に読めるようにな
ります。
今週のコンテンツ
■ やさしいHTML (第３回) --- ヘッダの役割と記述法
■ Tips --- 日本語文字コード
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆やさしいHTML --- ヘッダの役割と記述法
今回より具体的なページ作成に関して講座を進行していきます。今回はページ
のヘッダに当たる部分について説明します。ページ作成の上では面白くない部
分ですが、コンテンツを性格に表現して伝達するためには避けて通ることがで
きない課題でもあります。
具体的には 〜 で囲まれた内容を示します。
■ヘッダの役割
ヘッダの大きな役割は、htmlドキュメントの各種情報を Webサーバ (HTTPサー
バ) やユーザエージェント (ブラウザなど) に伝えるためにあります。
具体的には、ドキュメントを記述した文字コードを伝えることで文字化けを
防止したり、そのHTMLドキュメント以外の他のドキュメントを参照したり、作
者の情報などを伝えたりします。
こうした情報は「メタ情報」と呼ばれ、人間よりもコンピュータが理解すべき
情報として位置付けられます。メタ情報は metaタグを用います。
○ metaタグの内容と記述法
metaタグは内容モデルを持たないエンプティタグですので、終了タグはありま
せん。ヘッダに複数配置することが可能です。
文字化けを防止するための記述は以下のとおりです。
http-equiv属性 Webサーバに情報のヘッダを送信させる場合に利用します。
content属性 メタデータのプロパティ (属性) の値を指定します。
ここでは、メタ情報としてHTMLドキュメントがテキスト形式で「html」の識別
子 (Windowsでは拡張子と呼ぶ) を示し、その文字コードに「Shift_Jis形式」
を利用していることを Webサーバに伝えています。
(文字コードに関しては Tips を参照してください。)
作者の情報を伝える metaタグは以下のように記述します。
name属性 メタデータのプロパティを指定します。
なお、この情報は必ずしもブラウザやサーバが正しく解釈するとは限りません。
記述しなくてもまったく問題ありません。
検索サーチ型ロボット (Googleなど) への情報を提供する記述
name属性の値の意味
description ページ、あるいはサイトの要約
keyword ページ、あるいはサイトの検索キーワード
robots 検索ロボットの検索許可
これらは必ずしもすべての検索サーチロボットに対応しているわけではあり
ません。中には無視してしまうロボットも存在しています。
キーワードはカンマで区切っていくつでも設定できます。
○ linkタグの内容と記述法
HTMLドキュメントと他の文書の関係を示す場合には、linkタグを用います。こ
の linkタグもエンプティタグなので終了タグはありません。
他のドキュメントを取り込んで利用する方法としてスタイルシート文書があり
ます。 (スタイルシートに関する解説はいずれ講座の中で詳しく説明します。)
スタイルシートの取り込み
rel属性 HTMLドキュメントから見た href属性で示される文書との関係を示す。
type属性 関連する文書の MIMEタイプを指定しブラウザに伝えられます。
href属性 取り込む文書の所在 (URL) を示します。
rel属性とは、その HTMLドキュメントから見た他のドキュメント (文書) との
関係を示します。これを「リンクタイプ」と呼び、前後関係などにも利用され
ます。
rel属性のリンクタイプ
next 次のドキュメントを指定
prev 現在より前のドキュメントを指定
index 索引に当たるドキュメントを指定
map サイトマップに当たるドキュメントを指定
glossary 関連する用語集を収めたドキュメントを指定
○ドキュメントの題名を指定する
HTMLドキュメントの題名 (タイトル) を設定するために titleタグを使います。
metaや linkタグは省略することが可能ですが、titleタグは必ず記述しなけれ
ばなりません。このタグは文書の題名を囲むコンテナタグのため終了タグは必
須です。
文書の題名を設定する記述
初心者のためのホームページ作り
HTMLドキュメントのタイトルは、そのページを端的にあらわす短い言葉で表現
します。一般的なグラフィカルな四角形ブラウザでは、タイトルバーにその要
素内容が表示されます。
ヘッダ部で記述する中で、唯一ブラウザに表示されるものです。
■ヘッダは htmlタグの子タグ
HTMLドキュメントを作成する場合、その最上位タグが html です。この直接の
要素内容が 〜 と、 〜 となります。
なお、htmlタグも、head、bodyタグも省略可能ですが、正統派を目指す上で
も、後々のメンテナンスのためにも、これらのタグを省略せずに記述すること
をお勧めします。
次回の「やさしいHTML入門」では、コンテンツを配置するための作業に入りま
す。本格的な Webページ作成の中心となります。
今回お伝えしたヘッダが、HTMLドキュメントの頭の部分であるならば、コン
テンツを配置するボディ部 (本体) は Webページの主役となるでしょう。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆Tips --- 文字コード
現在 Web上で利用が許されている日本語の文字コードセットは、以下の３種類
となっています。
SHIFT_JIS JISコードをベースに制定され最もポピュラーな文字コード
ISO-2022-JP JIS (日本工業規格) で制定された文字コード (JISコード)
EUC-JP UNIX上で標準となっている文字コード
文字コードとは「含まれる文字を明示した集まり」と言われ、それぞれの国に
よって明確に定義されています。コンピューターは０と１の組み合わせ (２進
数) によって解釈されますが、文字コードはそれぞれの文字を２進数に符号化
された集まりです。それゆえ「文字符号コード」とも呼ばれます。
インターネット上にある Webサーバは、HTMLドキュメントにあるヘッダを解釈
してその文字符号をブラウザに渡しますが、ヘッダに文字コードの記述がない
場合にはブラウザの振る舞いに任されます。時として文字化けを起こすのは、
ヘッダに記述がなく、ブラウザが勝手に解釈してしまうためにあります。
HTMLドキュメントを作成する際に、自分がどの文字コードを使うのか知る必要
があります。Windowsに付属のメモ帳やワードパッドなどは SHIFT_JISとなって
いますが、他のソフトウェアを使う場合、そのソフトのマニュアルやヘルプを
参照して調べる必要があります。
例えば、SHIFT_JIS を使っているにもかかわらず ISO-2022-JPを明示した場合
には間違いなく文字化けします。それは Webでもローカルでも文字化けます。
現在の文字コードと一致した文字コードを明示しなければなりません。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
今回はここまで。
今週のおさらいは Webページにも掲載しましたので、是非参考までに見ておい
てください。
Webページでは HTML文の実行結果のサンプルもあり、より分かりやすく説明
しています。あわせて過去の記事のおさらいも掲載しています
（今週のおさらい）
http://www.scollabo.com/banban/magazine/review_108.html
次回は、1月21日に配信を予定しています。次回は久しぶりに JavaScript講
座を予定しています。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆質問・ご意見ははこちらまで→ banban@scollabo.com
なお、ご質問の際には、あなたがお使いのOS、ブラウザ、テキストエディタな
ど、なるべく分かりやすく制作環境を明記していただけると回答しやすくなる
と思います。
ただし、個人的な事由により返事が遅れることがあります。ご了承ください。
お急ぎの場合には、当サイト内の掲示板をご利用ください。きっと誰かが答え
てくれると思います。
発行者 ばんばん
協 力 スズキ・コラボレーション http://www.scollabo.com/
配信エンジン まぐまぐ http://www.mag2.com/ （ID 0000090196）
誤字・脱字・変換ミス・表現欠乏などには、平にご容赦願います。
■バックナンバー こちらで公開しています。
プレーンテキスト http://www.scollabo.com/banban/magazine/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/
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
初心者のためのホームページ作り_109.txt 100666 0 0 41610 10225251246 15754 隔週金曜日配信 What's New 2005年1月21日
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
初心者のためのホームページ作り/Web for beginner
http://www.scollabo.com/banban/
＜第109号＞
banban@scollabo.com
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
当講座は、初心者が正しい文法と作法を身につけて、魅力的な Webページ作
成に役立つことを目的に配信されております。
当講座では HTML4.01、XHTML1.1 を中心とした文法が主体となっています。
なお、このマガジンは等幅フォントでお読みいただくと快適に読めるようにな
ります。
今週のコンテンツ
■ JavaScript講座 (第23回) --- Form/Elementオブジェクト
■ Tips --- フォームとJavaScript
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆JavaScript講座 --- Form/Elementオブジェクト
Form 及び Elementオブジェクトは、HTMLドキュメント中で利用される form要
素を使用することで自動的に生成されるオブジェクトです。
Formオブジェクトと、Elementオブジェクトは同義に扱われますが、Elementオ
ブジェクトは、form要素内で配置される各入力フィールドを扱います。ただし
両者のメソッドとプロパティはほぼ同じものが定義されていますが、機能が若
干異なります。
Formオブジェクトは Elementオブジェクトの上位オブジェクトに位置し、さ
らに Elementオブジェクトには11個の下位オブジェクトが定義されています。
フォームをオブジェクトとして扱ったとき、閲覧者がフォームの入力フィール
ドに何かを書いたりしたときに、動的にレスポンスさせることができます。
今回は Form、及び Elementオブジェクトについて解説します。
■ Form/Elementオブジェクトのプロパティ
○ action
フォームに入力されたデータの送信先 URL の参照したり設定します。送信先
は主に CGIスクリプトの URLが用いられるのが一般的です。
HTMLタグの action属性と同じ働きを持ちます。普通ではこのメソッドは用
いられることが少ないようです。
書式
document.フォーム名.action(送信先URL)
例文
document.myForm.action(/user/bin/sample.cgi);
○ encoding
フォームで入力皿他データを送信する際のエンコード (符号化) を参照した
り設定するときに使います。formタグの enctype属性と同じ役割をするもの
ですが、利用するブラウザ銘柄によっては無視されることがあります。
書式
エンコード方式.encoding
例文
document.myForm.encoding = "text/plain";
○ length
HTMLドキュメント中のフォームの総数、フォーム内の要素の総数を参照しま
す。Formオブジェクトではフォームの総数を、また Elementオブジェクトで
はフォーム内に配置されている入力フィールドの総数を参照します。
書式
document.フォーム名.lengh
なお Elementオブジェクトにおける lenghプロパティでは、返される総数
が実際の総数よりも１つ少ないことに注意してください。
○ method
form要素内で記述する method属性の送信形式 (get、または post) を参照、
あるいは設定します。返される値は post、または get です。文書が読み込
まれた後でも、設定の値を変更することが可能です。
書式
フォーム名.method = post あるいは get
例文
document.myForm.method = "post";
○ name
formタグ内で記述されている name属性の値 (フォーム名) を参照します。な
お、このプロパティでフォーム名を変更することはできません。
Elementオブジェクトでは、入力フィールドで指定された名前を参照します。
書式
document.フォーム名.name (Formオブジェクトの場合)
document.エレメント名.フォーム名.name (Elementオブジェクト)
例文
a = document.Myform.name;
a = document.element[0].myForm.name;
○ target
フォームデータの送信先のターゲットウィンドウを参照、または設定します。
書式
document.フォーム名.target
例文
■ Form/Elementオブジェクトのメソッド
○ reset
入力されたフォームデータを初期化し最初の状態に戻します。inputタグの
type属性が「reset」と同じ役割を持ちます。
書式
フォーム名.rest()
例文
document.myForm.reset();
○ submit
入力されたデータの送信に用います。inputタグの type属性が「submit」と
同じ役割を持ちます。
書式
フォーム名.submit()
例文
document.myForm.submit();
■ Form/Elementオブジェクトの下位オブジェクト
Form、及び Elementオブジェクトには下位層に位置する11個のオブジェクトを
内包しています。
下位オブジェクト
Button、Checkbox、FileUpload、Hidden、Password、Radio、Reset、Text、
Textarea、Submit、Select、(Option)
HTMLのタグに詳しい方ならピンと来たハズです。これらのオブジェクトは、
いずれも入力フィールドを形成するタグやその属性に準じています。そのた
め、利用する際にオブジェクト名を明記しなくても下位オブジェクトとして
自動的に割り当てられます。
各オブジェクトのプロパティとメソッドを利用する場合の書式は
document.フォーム名.エレメント名[番号].プロパティまたはメソッド
エレメント名に「elements」を代用できます。その場合の番号は formタグ
内に配置された入力フィールドの順番となります。ただし、最初の入力フィー
ルドが、 0 であることに注意してください。
もし２番目の入力フィールドに適用させたい場合には [1] となります。
■ Buttonオブジェクト
Buttonオブジェクトは inputタグの type属性の値が「button」の場合に利用
可能なオブジェクトです。
○ Buttonオブジェクトのプロパティ
name name属性で指定されているタグ名を参照
type ボタンの形式を参照
length value属性で指定されているボタンの文字列を参照、または設定
○ Buttonオブジェクトのメソッド
blur 選択されている入力フィールドのフォーカスを外す (選択を抜ける)
click 自動的に選択されたボタンをクリックする
focus フォーム内の入力フィールドを選択する (フォーカスする)
■ Checkboxオブジェクト
Checkboxオブジェクトは inputタグの type属性の値が「checkbox」の場合に利
用可能なオブジェクトです。
○ Checkboxオブジェクトのプロパティ
checked チェックされている場合に真、されていない場合に偽を返す
name name属性で指定されている要素名を参照する
type 指定されたコントロールの形式 (checkbox) の値を返す
value value属性で指定されている値 (送信内容) を参照、または設定する
defaultChecked 初期のチェック状態の値を返す
○ Checkboxオブジェクトのメソッド
blur 選択されている入力フィールドのフォーカスを外す
click 自動的に選択されたボタンをクリックする
focus フォーム内の入力フィールドを選択する
■ FileUploadオブジェクト
FileUploadオブジェクトは inputタグで value属性の値が「fileupload」の場
合に利用可能なオブジェクトです。 (ブラウザから別文書などを送付する場合
に用いられる属性です。)
○ FileUploadオブジェクトのメソッド
blur 選択されている入力フィールドのフォーカスを外す
focus フォーム内の入力フィールドを選択する
○ FileUploadオブジェクトのプロパティ
name name属性で指定されている要素名を参照する
type 指定された入力フィールドの形式 (fileupload) の値を返す
value value属性で指定されている値（送信内容）を参照、または設定
■ Hiddenオブジェクト
Hiddenオブジェクトは、 で示される隠しフィールドで
通常は画面に表示されず管理用として利用されます。
○ Hiddenオブジェクトのプロパティ (メソッドは定義されていません)
name name属性で指定されている要素名を参照する
type 指定された入力フィールドの形式 (hidden) の値を返す
value value属性で指定されている値（送信内容）を参照、または設定
■ Passwordオブジェクト
inputタグの type属性の値が「password」で示される入力フィールドをオブジ
ェクトとして扱います。
○ Passwordオブジェクトのプロパティ
name name属性で指定されている要素名を参照
type 指定されたコントロールの形式 (password) の値を返す
value value属性で指定されている値 (送信内容) を参照、または設定
defaultValue スワードの初期入力の値を参照
○ Passwordオブジェクトのメソッド
blur 選択されているコントロールのフォーカスを外す
focus フォームのコントロールを選択する
select フォーカスされたパスワードの文字列を選択状態にする
■ Radioオブジェクト
inputタグの type属性の値が「radio」で示されるラジオボタン方式の入力フ
ィールドをオブジェクトとして扱います。
○ Radioオブジェクトのプロパティ
checked チェックされている場合に真、されていない場合に偽を返す
name name属性で指定されている要素名を参照
type 指定されたコントロールの形式 (radio) の値を返す
value value属性で指定されている値 (送信内容) を参照、または設定
defaultChecked 初期値としてチェック状態の値を返す
○ Radioオブジェクトのメソッド
blur 選択されているラジオボタンのフォーカスを外す
click 自動的に選択されたラジオボタンをクリックする
focus フォーム内のラジオボタンを選択する
■ Resetオブジェクト
Resetオブジェクトは、inputタグの type属性の値が「reset」で示される取消
ボタンをオブジェクトとして扱うものです。
○ Resetオブジェクトのプロパティ
name name属性で指定されている要素名を参照
type 指定されたコントロールの形式 (reset) の値を返す
value value属性で指定されている値 (送信内容) を参照、または設定
○ Resetオブジェクトのメソッド
blur 選択されているリセットボタンのフォーカスを外す
click 自動的に選択されたリセットボタンをクリックする
focus フォーム内のリセットボタンを選択する
■ Textオブジェクト
Textオブジェクトは、inputタグの type属性の値が「text」で示される文字入
力フィールドをオブジェクトとして扱うものです。
○ Textオブジェクトのプロパティ
name name属性で指定されている要素名を参照
type 指定された入力フィールドの形式（text）の値を返す
value 入力された入力フィールドの値を参照、または設定
defaultValue 入力フィールドの初期入力の値を参照
○ Textオブジェクトのメソッド
blur 選択されている入力フィールドのフォーカスを外す
click 自動的に選択された入力フィールドをクリックする
select フォーカスされた入力フィールドの文字列を選択状態にする
■ Textareaオブジェクト
texteraタグで示される文字入力フィールドをオブジェクトとします。Textオ
ブジェクトの違いは、複数行にわたる文字入力フィールドであることです。
inputタグの type属性が「text」の場合は、１行の文字入力フィールドとな
ります。
○ Textareaオブジェクトのプロパティ
name name属性で指定されている要素名を参照
type 指定された入力フィールドの形式（textarea）の値を返す
value 入力された入力フィールドの値を参照、または設定
defaultValue 入力フィールドの初期入力の値を参照
○ Textereaオブジェクトのメソッド
blur 選択されている入力フィールドのフォーカスを外す
click 自動的に選択された入力フィールドをクリックする
select フォーカスされた入力フィールドの文字列を選択状態にする
■ Submitオブジェクト
Submitオブジェクトは、inputタグの type属性の値が「submit」で示される送
信ボタンをオブジェクトとして扱うものです。
○ Submitオブジェクトのプロパティ
name name属性で指定されている要素名を参照
type 指定された入力フィールドの形式（submit）の値を返す
value 入力された入力フィールドの値を参照、または設定
○ Submitオブジェクトのメソッド
blur 選択されている送信ボタンのフォーカスを外す
click 自動的に選択された送信ボタンをクリックする
focus フォーム内の送信ボタンを選択する
■ Selectオブジェクト
Selectオブジェクトは、 で囲まれたメニュー選択方式
の入力フィールドをオブジェクトとします。
なお、メニュー項目は optionタグによって形成されるため、下位オブジェ
クトとして Optionオブジェクトが定義されています。
○ Selectオブジェクトのプロパティ
name name属性で指定されている要素名を参照
option メニューの選択項目 (optionタグで定義)を参照、または設定
type 指定されたコントロールの形式 (select-one) の値を返す
value value属性で指定されている値 (送信内容) を参照、または設定
selectedIndex 選択されているメニュー項目のインデックス番号を参照
○ Selectオブジェクトのメソッド
blur 選択されているメニュー項目のフォーカスを外す
focus あるメニュー項目を選択する
length optionタグで定義されている選択項目の総数を参照
■ Optionオブジェクト (Selectオブジェクトの下位オブジェクト)
Optionオブジェクトは、optionタグで形成されるメニュー方式のメニュー項目
を示すもので、あらかじめ入力する値が決められています。
このオブジェクトは Selectオブジェクトが上位オブジェクトとなります。
○ Optionオブジェクトのプロパティ (メソッドは定義されていません)
index メニューの選択項目のインデックス番号を参照
selected 選択されている場合は真、選択されていない場合は偽を返す
text 選択されているメニュー項目の文字列を参照、または設定
defaultSelected
初期に選択されている場合は真、選択されていない場合は偽を返す
※当サイトの「今週のおさらい」に簡単なサンプルと、Formオブジェクトの利
用法を掲載しましたので、折があればご覧ください。
http://www.scollabo.com/banban/magazine/review_109.html
◆Tips --- フォームとJavaScript
閲覧者から入力されたフォームのデータを、JavaScriptによってチェックする
ことができます。
例えばメールアドレスが不正かどうか、あるいは入力漏れがないかどうかを
判断するには、今回掲げたオブジェクトを駆使することで作成できます。
また、JavaScriptの起動にイベントハンドラを使うことが一般的です。ある入
力フィールドのフォーカス (選択状態) を外れたときや、フォーカスされたと
き、イベントハンドラによってスクリプトを実行させます。
今回はサンプルを用意しませんでしたが、当講座のバックナンバー「第63号」
を参考にしていただければ、今回の解説が理解しやすいと思います。
なお、入力されたデータを実際に利用する場合には、サーバ側で CGIに対応す
る必要があります。フォームを作ることはそれほど難しいことではありません
が、データを再利用する場合には難解な CGIプログラムを書かなければなりま
せん。
また、サーバ側でも CGIに対応している必要があります。一般のプロバイダ
が提供する Webサーバにはこの点に限界があるようです。
無料で使える CGIサーバも幾つかあるので、いろいろと探して自分の環境に
当てはまるサーバをお選びください。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
今回はここまで。
今週のおさらいは Webページにも掲載しましたので、是非参考までに見ておい
てください。
Webページでは HTML文の実行結果のサンプルもあり、より分かりやすく説明
しています。あわせて過去の記事のおさらいも掲載しています
（今週のおさらい）
http://www.scollabo.com/banban/magazine/review_109.html
次回は、当方の都合で３週間後の 2月11日に配信を予定しています。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆質問・ご意見ははこちらまで→ banban@scollabo.com
なお、ご質問の際には、あなたがお使いのOS、ブラウザ、テキストエディタな
ど、なるべく分かりやすく制作環境を明記していただけると回答しやすくなる
と思います。
ただし、個人的な事由により返事が遅れることがあります。ご了承ください。
お急ぎの場合には、当サイト内の掲示板をご利用ください。きっと誰かが答え
てくれると思います。
発行者 ばんばん
協 力 スズキ・コラボレーション http://www.scollabo.com/
配信エンジン まぐまぐ http://www.mag2.com/ （ID 0000090196）
誤字・脱字・変換ミス・表現欠乏などには、平にご容赦願います。
■バックナンバー こちらで公開しています。
プレーンテキスト http://www.scollabo.com/banban/magazine/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
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
＜えでぃた〜ず・る〜む＞
今年は以前に増して外に出かける機会が増えました。そのせいなのか分かりま
せんが、今年はずいぶん寒いなぁと感じています。冬だから当たり前の話です
が、一番の悩みは「花粉症」です。
今年の花粉の飛散は既に１ヶ月前から始まっており、昨年の猛暑で花粉量が多
く当地では例年の10倍くらいになるそうです。目が痒く鼻水が猛烈に出てきま
す。５月末までこの症状が続くのかと思うと非常に辛いものがあります。
今まで薬に頼らずに過ごしてきましたが、今年ばかりは考えなくてはなりま
せん。春はそこまできているのにねぇ・・・
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆著作権について
個人がご自分のＰＣに保存して利用する以外の記事の転載、引用は基本的に応
じておりません。記事中の内容について、無断で使用することを固く禁じます。
なお、記事中のスタイルシート、スクリプト、HTMLをご自分のページ作成に
自由に使っていただいても差し支えありません。
Copyright(C) 2002-2005 www.scollabo.com/banban/
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
初心者のためのホームページ作り_110.txt 100666 0 0 37600 10225251222 15742 隔週金曜日配信 What's New 2005年2月11日
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
初心者のためのホームページ作り/Web for beginner
http://www.scollabo.com/banban/
＜第110号＞
banban@scollabo.com
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
当講座は、初心者が正しい文法と作法を身につけて、魅力的な Webページ作
成に役立つことを目的に配信されております。
当講座では HTML4.01、XHTML1.1 を中心とした文法が主体となっています。
なお、このマガジンは等幅フォントでお読みいただくと快適に読めるようにな
ります。
今週のコンテンツ
■ やさしいHTML (第４回) --- 見出しと段落
■ Tips --- 検索サーチロボットと見出し
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆やさしいHTML --- 見出しと段落
今回からコンテンツを表示するために具体的なタグを使って、HTML作成の実践
的な内容となります。過去に掲載された内容と重複する場合もありますが、よ
り確実に文法を身に付けていくためにご了承ください。
■見出しとは
ページを作成する上で一番先に表示させる「見出し」について解説します。見
出しとはそのページに掲載される情報の「要約」であり「キャッチコピー」で
もあります。
例えば私たちが新聞を読むときに、まず先に見出しから読む内容を無意識の
うちに探し出します。興味のある見出しから初めてその記事を読むわけです。
これを通常「ナナメ読み」と呼び、興味のない見出しや記事は読み飛ばします。
見出しの次にあるのが、その見出しで示した記事の詳細です。これが「段落」
です。段落については後ほど解説します。
見出しは英語でヘッドライン (Headline) と訳され、まさに記事の内容から
適切な要約文が適用されます。見出しには「大見出し」「中見出し」「小見出
し」などに分けられ、HTMLでは見出しを以下のように記述します。
第一見出し 見出し
第二見出し 見出し
第三見出し 見出し
第四見出し 見出し
第五見出し 見出し
第六見出し 見出し
さて、第一から第六までの使い方には作法があります。一般的な視覚系ブラウ
ザでは第一見出しが一番大きな文字で表示され、次いで第二、第三と文字のサ
イズが小さくなっていきます。
文字サイズの変化に見出しを使うのは間違いです。見出しはあくまで見出しな
のですからその点に注意してください。
第一見出しを「章」として考えたとき、第二見出しは「節」、第三は「項」
としましょう。すると以下のような見出しの順序になります。
第一章 HTMLの基本
第一章 第一節 見出しについて
(説明記事)
第一章 第二節 見出しの階層について
第二節 第一項 見出しの正しい順序
(説明記事)
第二節 第二項 間違えだらけの見出し
(説明記事)
こんな感じでコンテンツが作成されます。これを実際のタグで記述した場合
に、以下のようになります。
HTMLの基本
見出しについて
説明記事 〜
見出しの海草について
見出しの正しい順序
説明記事 〜
間違えだらけの見出し
説明記事 〜
具体的に説明すれば、第二見出しは第一見出しの後に配置されるべきなのです。
第一見出しがなくて、いきなり第二や第三見出しを配置すること葉、文章的に
も文法的にもおかしいものです。
文字のサイズが第三のほうが一番よいという考え方で利用する人もいるよう
ですが、現在の Webページ作成では見出しの文字サイズは自由に変更すること
が可能となっています。 (これについては講座の中で適時説明します。)
視覚障害者の利用する音声ブラウザの中には「第一見出し」と発声することが
あります。それがいきなり第二や第三では閲覧者が混乱してしまいます。
見出しには「階層」があり、順序があるということを覚えてください。
見出しタグはブロックレベル要素として定義されており、このタグの範囲に他
のブロックレベルを配置することができません。また、一般的な視覚系ブラウ
ザでは見出しタグの前後に１行分の余白を表示させる場合があります。
■段落とは
一般に「段落」とは、あるまとまった内容を示したコンテンツをさします。
見出しでその段落の要約が示されたとおり、見出しに従った詳細のまとまり
が段落となります。
段落を定義するタグは 〜
を用います。段落は英語で Paragraph
ということから、段落タグが になったとされています。
段落タグはブロックレベル要素として定義され、この中には他のブロックレベ
ルを配置することができません。また、終了タグは省略することが可能となっ
ていますが、当講座では終了タグの省略は推奨していません。次世代マークア
ップ言語である XHTMLでは、一切の省略タグは認められておりません。
段落は見出しと対になることが一般的です。ページの冒頭でいきなり段落では
特別な意図がない限り見出しと併用することをお勧めします。
一般的な視覚系ブラウザでは段落タグの前後に１行分の余白を伴って表示され
ますが、これは見出しタグと同様にあくまでブラウザの仕様であり、標準仕様
では特に表示方法については述べられておりません。
これを逆手にとって余白を表示させるために段落タグを使うのは、明らかな
文法違反となります。段落はそのために使うものではありません。
■段落と改行
段落の中で記述される文字コンテンツの途中で改行する必要に迫られることが
多々あります。文字などのインライン要素は強制改行タグ
を使って改行
することができます。
しかしながら閲覧者の利用するソフトウェア (ブラウザ) では、文字コンテン
ツは画面の行末で自動改行するので、あえて強制的に改行する必要はないし、
段落を追加するだけで十分に対応することができます。
例文
強制改行タグを使った場合
強制改行タグを連発して、あたかもそれが段落のように見せるのは明
らかな文法違反となるものです。
また、段落の途中で改行したい場合には、一旦段落を終了して新たな段
落を追加することで対応できます。
段落の追加による改行場合
強制改行タグを連発して、あたかもそれが段落のように見せるのは明
らかな文法違反となるものです。
また、段落の途中で改行したい場合には、一旦段落を終了して新たな
段落を追加することで対応できます。
なお、強制改行タグ
はエンプティタグ (空タグ) なので終了タグは不
要です。
■見出しと段落の表示方法 (スタイルシート)
見出しの文字の大きさや余白、段落の余白などは作者が任意に設定することが
できます。それを可能にしたのがスタイルシート (Cascading Style Sheet)
です。
スタイルシートは物理的なレイアウトを、HTMLドキュメントから排除するため
の代替機能として開発されました。HTML3.2では font や centerタグなど物理
的にレイアウトを整えるタグが多数定義されましたが、HTML4.01では物理的な
タグは「非推奨：Deprecated」とされました。
非推奨タグを使う替りとしてスタイルシートの利用を強く推奨したのです。
スタイルシートを使うと、適用要素に対して背景色、余白、枠線、文字色、配
置など非常にきめ細かく設定することは可能です。
スタイルシートは非HTMLデータとなるので、作成には若干の心得が必要です
が慣れてしまえば簡単です。ブラウザに出力させるレイアウト表現には強力な
武器となるので是非マスターしておきたいところです。
○スタイルシートを使ったHTMLドキュメント
今回の見出しと段落のスタイルシートを私流に設定して解説します。
スタイルシートの作成方法 (設定方法) は大きく分けて３種類ありますが、今
回はヘッダ部に記述する「埋め込み型 (エンベッド方式) 」を採用します。
前述したとおり見出しタグも段落タグも一般的な視覚系ブラウザでは前後に１
行分の余白を表示します。また第一見出しは非常に大きな文字サイズで表示さ
れます。
今回は余計な余白をコントロールし、文字サイズを変更したりします。以下
に HTMLとスタイルシートのコーディングを示します。
見出しと段落
見出しと段落
見出しと段落は「対」で利用されることが一般的です。見出しには段落で
述べる内容の要約 (つまり題名) となるような文章を考えましょう。
段落とは、１つのまとまった内容 (記事、コンテンツ) の集合体ですが、
１つの見出しに複数の段落を設定することが可能です。
サンプルの実行結果
http://www.scollabo.com/banban/magazine/ms/sample_110-1.html
◆解説
■
文書型定義 (DTD:Document Type Definition) を示す宣言です。文書型定義に
ついては別途講座の中で詳しく説明する予定です。
簡単に説明すると、すべてのHTMLドキュメントではその冒頭で、利用される
タグの集合 (タグセット) のタイプを明示する必要があります。ただし文書型
定義が宣言されていなくてもほとんどのブラウザでは問題なく表示させること
ができます。 (一部に表示の差異があります。)
文書型定義の宣言が明示していない場合には、通常HTML4.01過渡期仕様とし
て扱われますが、厳密には HTML2.0 に区別されることになっています。
■
HTMLドキュメントの最上要素として htmlタグを用います。htmlタグは省略が
可能になっていますが、当講座ではすべてのタグを省略せずに記述することを
推奨しています。
htmlタグの属性 (タグの機能を高めたり、別機能を設定する場合に利用) で
は lang属性を使っていますが、これは htmlタグ直下のすべてのタグに日本語
コードを割り当てるために設定しています。
原則的には言語コードをHTMLドキュメントに明示するよう求められていますの
で、最上要素で設定することが効果的でしょう。
■
Webサーバ、あるいはブラウザに対してこのドキュメントがテキスト形式で作
成されたHTML文書であることを明示しています。また文字化け防止として作成
された文書がシフトJISコードであることも明示しています。
どのようなプラットフォームでもソフトウェアでも、HTMLドキュメントとして
正しく解釈してもらうことは非常に重要なことです。その意味でもこの構文は
外せないところです。
■
HTMLドキュメント中にスタイルシートを利用することを、サーバやブラウザに
明示します。スタイルシートを使う場合に必須となります。
■見出しと段落
HTMLドキュメントのタイトルを設定しています。１つのHTMLドキュメントには
必ず１つのタイトルをヘッダ部に配置しなければなりません。
■
JavaScriptの場合
２つの非HTMLデータの記述法を見てお分かりのとおり、両者ともコメント内で
配置されますが、コメントアウトする際の記述方が若干異なることに注意して
ください。
■まとめ
ヘッダではコンテンツを配置するのではなく、あくまでページが持つ情報を配
置するということがお分かりと思います。しかしながら、すべてのユーザエー
ジェントや、HTTPサーバに対応するわけではありません。
今後は、XHTML、XMLなどで既に使われている RFDを中心とした情報発信に置
き換わるものと推測します。ある意味では、現在のヘッダの情報は廃れていく
のではないでしょうか。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆Tips --- 文字符号コードについて
文字コードの選択は少々厄介な問題です。つまり Web制作者がどの種類の文字
コードを選ぶのかは、基本的に作成に利用するソフトウェアに依存します。
HTMLを自動的に生成するオーサリングソフトでは、特に悩むことはありませ
んが、テキストエディタを使ってタグを書き込むときに問題になります。
日本語を使う場合の文字符号コードは以下の３種類です。
・SHIFT_JIS シフトJIS (Windows標準の日本語コード)
・ISO-2022-JP ISO制定のコード (電子メールで利用されている)
・EUC-JP ENIX系日本語コード
もし、利用する文字符号が分からない場合には、ご利用になるソフトウェアの
マニュアルやヘルプを参照してください。実際の文字コードと違うコードを指
定した場合、間違いなく文字化けを起こします。
日本語を使うページの場合、日本語が出現する前に文字コードを指定するよう
にしましょう。不用意な文字化けを防ぐ上でも重要なことです。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆CSS講座 --- メディア別複合スタイルシート
今回は複数の出力メディア別に設定した１つのスタイルシートを作成します。
通常、何も指定しない場合は、初期値としてスタイルシートの出力先はすべて
(all) となっています。
スタイルシートでは、出力先メディアとして、音声、点字、プロジェクター、
あるいは携帯用小型通信機、プリンターなどがあります。今回は、音声とプリ
ンター、およびスクリーンという３つのメディアに対するスタイルシートを作
成します。
■複合する出力メディアへの対応
各メディアを指定する場合には、そのメディアタイプの冒頭に (@media) アッ
トマークと media を添えます。
以下は、スクリーンに対して指定した場合です。
@media screen {
body { font-size: 1em }
}
このようにメディアを指定し、、{ と } の間にスタイルシートを記述します。
この場合、メディアをカンマで区切って複数指定することも可能です。
@media screen, print {
body { font-size: 1em }
}
メディアを指定したスタイルシートは、他のメディアでは適用されません。そ
の点を含んだ上でスタイルシートを検討してください。
■HTMLからメディアを指定する
ヘッダで外部文書を取り込む際に利用するとき、link要素を用いますが、その
際に直接出力メディアを指定することができます。link要素の属性でメディア
タイプを指定します。
例文
この構文でも、カンマで区切ることにより複数のメディアタイプを指定するこ
とが可能となっています。
次回は、プリンターと音声に対するスタイルシートの作成を解説します。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆HTML、XHTML属性の解説 --- maxlength属性
入力フィールドにおいて、受け付けられる最大の文字数を指定する属性です。
■maxkength属性 入力文字数を制限する
DTD： すべての文書型定義に適用
属性値： 数値 (文字数)
記述法：
関連要素： input
XHTMLの制限： なし
input要素における type属性の値が text または password のときにのみ利用
可能な属性です。それ以外の値では無視されます。
何らかの入力を受け付けるとき、ある文字数を超えて入力されてしまう場合
に有効な属性となります。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
今回はここまで。
申し訳ありませんが「今週のおさらい」は未完です。４〜５日中にはアップで
きると思います。しばらくお待ちください。
今週のおさらい目次 http://www.scollabo.com/banban/magazine/
次回は、10月15日に配信を予定しています。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆質問・ご意見ははこちらまで→ banban@scollabo.com
なお、ご質問の際には、あなたがお使いのOS、ブラウザ、テキストエディタな
ど、なるべく分かりやすく制作環境を明記していただけると回答しやすくなる
と思います。
ただし、個人的な事由により返事が遅れることがあります。ご了承ください。
お急ぎの場合には、当サイト内の掲示板をご利用ください。きっと誰かが答え
てくれると思います。
発行者 ばんばん
協 力 スズキ・コラボレーション http://www.scollabo.com/
配信エンジン まぐまぐ http://www.mag2.com/ （ID 0000090196）
誤字・脱字・変換ミス・表現欠乏などには、平にご容赦願います。
■バックナンバー こちらで公開しています。
プレーンテキスト http://www.scollabo.com/banban/magazine/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/
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□