隔週金曜日配信 What's New 2004年9月3日
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
┏┏┏┏ 初心者のためのホームページ作り/Web for beginner
┏┏┏ http://www.scollabo.com/banban/
┏┏
┏ ＜第100号＞
banban@scollabo.com
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
当講座は、初心者や中級者が正しい文法と作法を身につけて、プロ級の本格
的な Webページ作成に役立つことを目的に配信されております。
当講座では HTML4.01、XHTML1.1、XML1.0 を中心とした文法が主体となって
います。なお、このマガジンは等幅フォントでお読みいただくと快適に読める
ようになります。
今週のコンテンツ
■ 正しい文法のために 第４回 --- 非推奨要素の代替
■ CSS講座 第20回 --- 外部スタイルシート
■ 属性の解説（第19回） --- datetime属性
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆正しい文法のために --- 非推奨要素の代替
非推奨という要素を使うことは、正しい文法にそぐわないということではあり
ません。文書型定義に則った文法であれば、非推奨という要素や属性を使うこ
とができます。
それ故、非推奨＝悪い文法とは言い切れません。念のため。
しかしながら、HTMLというマークアップ言語の原点を考えたとき、論理的な文
書構造が求められます。つまり、非推奨要素といわれる多くが「見栄え」を提
供するものとなっており、決して構造的な文書を提供するためにあるとは言い
難いものです。
例えば center要素は、これに囲まれた要素内容のすべてをセンタリング、
つまり中央寄せで表現させます。しかしながら、ブロックレベル要素としての
center要素には、構造的な意味を持ちません。
何度か説明してきたとおり、論理的な文書構造をしっかりと書くためには、そ
れぞれの要素に意味を持たせるようにしなくてはなりません。見栄えだけを求
めるタグを使うのではなく、構造を作り上げましょう。
■非推奨要素一覧
以下は、HTML4.01で定義されている非推奨といわれるタグの一覧です。
要素名 意味
-------------------------------------------------------------------
applet Javaアプレットをページに読み込む
basefont ページ上の初期値となるフォントを指定する
center 要素内容を中央ぞろえにする
dir ディレクトリのリスト項目を定義する
font フォントの色や大きさ、フォント名を指定する
isindex 文書内で検索可能な１行の入力フィールド (CGIと連動)
menu １行を超えないリストを定義する
s 文字に抹消線を表示する
strike 文字に抹消線を表示する
u 文字に下線を表示する
今回は、これらの非推奨要素の代替を解説します。
■ applet
Javaアプレットとは、Java言語で書かれたプログラムをページに読み込んで実
行させるために applet要素を使いますが、厳格仕様では object要素を使って
埋め込み、一時期は大流行したものです。
object要素を完全にサポートしていないブラウザがあるので一概に applet
要素を使うなとは言い切れません。ただし、Javaアプレットはデータをダウン
ロードしてからそれを動作させるためのアプリケーションを立ち上げるまで、
相当の時間が必要になり著しく閲覧者のリソースを消費します。そうした問題
を避けるため、最近は Flashに取って替わっているのが現状でしょう。
例文；
<object data="オブジェクトの URI" type="オブジェクトの MIMEタイプ"
classid="プラグインの URI" width="横幅" height="高さ" alt="代替文字">
<param name="color" value="文字色">
<param name="bgcolor" valur="背景色">
</object>
■ basefont
基準となるフォントの種類や大きさ、あるいは色などを指定するため、通常は
ヘッダ部で配置します。このタグによって宣言された場合、そのページのすべ
ての文字列は、これを基本として表示されます。
各要素ごとに細かなフォントを指定する場合には、basefontタグは適してい
ませんので、スタイルシートを使うことにより、表示の多様性を拡張すること
が可能です。代替としてはスタイルシートを利用しましょう。
■ center
このタグに囲まれたすべてのコンテンツは中央寄せとなります。物理的、およ
び強制的に中央寄せで表示されます。
HTML3.2 が標準仕様であったときには、非常にポピュラーで多くの作成者が
こぞって利用したものです。今ではいささか古典的な感もありますが、現在で
も利用されています。
残念ながら centerタグは HTMLの文書において、構造的な意味を持っていま
せん。同じ非推奨としての文書ならば <p align="center"> としたほうが、段
落を中央寄せにするという意味がありマシでしょう。
代替の手段としては、やはりスタイルシートを利用するほうが賢明です。
■ dir
これも古典的なディレクトリリストを定義するリストタグです。通常は、ディ
レクトリのリストとして用いますが、ごく普通のリストとして使用することが
できます。
しかしながら現在では、ul (番号なしリスト) 、ol (番号付きリスト) など
がブロックレベル要素として定義されていますので、今後はこれらのリストを
代替として使うようにしましょう。
■ font
テキストで用いられるフォントの色やサイズ、フォント種などを指定するため
に利用されるタグで、現在でも非常に人気があります。
しかし、厳密に文書からプレゼンテーション (見栄えやレイアウト) を分離
するという意味からは、あまり使いたくないタグでもあります。
テキストの文字を大きくしたり、色をつけたりするということは、何らかの
意図があるわけです。つまり「ある意味」があるからこそ設定するのではない
でしょうか。何の意味もなく大きさを変えたり色をつけるのは、閲覧する側か
ら見るとウザッたくなるものです。
意味があるのだとすれば、そのようにマークアップ (意味づけ) すべきで、
そうしたフレーズには、ちゃんと意味づけするタグが存在しています。
また、fontタグを使った構文は非常に読みづらく、後々の編集や更新作業に
は手間ります。
例えば、
<p>
<font size="5" color="#ff0000">赤く大きい文字<fonr color="#0000ff">
同じ大きさの青い文字</fotn></font><br>
<font size="3" color="#000000">ここでは普通の大きさの黒い文字</fron>
</p>
これをスタイルシートを使った場合には以下のとおりになります。
#red { cokor: #f00 }
#blue { color: #00f }
<h1>
<span id="red">赤く大きい文字</span>
<span id="blue">同じ大きさの青い文字"</span>
</h1>
<p>ここでは普通の大きさの黒い文字</p>
後者は、見出しと段落に別れて構造的な構文となっています。しかし、前者
は単に段落の中で文字の大きさを変えているに過ぎません。視覚的なブラウザ
では同じように見えても、非視覚系ブラウザブラウザでは、全然違うものとし
てレンダリングされます。コンテンツとしての意味づけが希薄となってしまい
ますので、fontタグだけを使った構文には注意が必要でしょう。
■ isindex
isindex は、１行の入力フィールドを形成します。入力フィールドは inputタ
グで代替とし、特に form要素内でなくても単独で利用できます。
サイト内の検索として定義されたタグですが CGIプログラムを使うというこ
とであれば、form要素とともに input で十分対応できます。
■ menu
これもリストの一種で、メニューとしてのリストを定義します。リストとして
の非推奨タグに dirがありますが、やはり ul、ol を代替として使うようにし
ます。
■ s、strike
文字に抹消線をつける物理タグです。ある文字に抹消線をつけるという行為は
何らかの意味があるわけです。通常は、記述された文字を後になって抹消線を
つけます。本来ならば削除してしまえばいいのですが、「履歴」という形で残
す場合には、その意味が閲覧者に分かるようにしたいものです。
単に抹消線をつけるよりも del要素を使って、抹消日や削除理由を示した文
書にアクセスできるなどをマークアップできるようにします。
例文：
<del detetime="2004-09-02T21:48:30+09:00" cite="reson.html">
ばんばん氏は病気で入院しました。
</del>
■ u
文字に下線 (アンダーライン) をつけて表示する物理タグです。これも作者が
何らかの意図を持っています。
リンクなどはそれと分かるように下線を表示しています。不用意な下線があ
ると閲覧者は戸惑ってしまうことになりますので、下線を設定する場合には、
十分に配慮する必要があります。
下線をつけた文字は、ある種の「注意」や特別な「意味」があるものとして設
定する場合があります。その意味では闇雲に下線を表示すべきではありません。
どうしても下線を表示しなければならない場面では、その意味付けをはっきり
とさせましょう。
文字を強調させたい場合には、strong要素で囲めば目的は達成されます。下
線を表示するよりも効果的です。
文字が跡で追加された場合には ins要素を使います。これは del要素同様に
追加された日付や理由を示す所在などを属性で示します。この ins要素は下線
をつけて表示されます。
◆まとめ
何度も説明してきたとおり、HTMLは文書を論理的な構造によって示すものです。
物理的なレイアウトを構造から排除し、それぞれの要素内容は、適切なタグに
よってマークアップすべきです。
それによる弊害はまったくありません。むしろ、どのような環境でも多くの
閲覧者から歓迎されることでしょう。
レイアウトや表示方法は、スタイルシート (CSS) によって行いましょう。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆CSS講座 --- 外部スタイルシート
スタイルシートを独立した１つの文書にして、HTML文書に読み込ませる方法を
リンクング・スタイルシートと呼びます。
外部スタイルシートの利点として以下の点が挙げられます。
・複数の文書に利用することができる。
・メンテナンスや更新時の作業が効率よく行える。
・スタイルシート文書から他の外部スタイルシートを呼び出せる。
HTMLでは、ヘッダ内に style要素を使ってスタイルシートを配置することがで
きますが、次世代マークアップ言語である XHTMLでは、外部にスタイルシート
を用意しなければなりません。特に XHTML1.1 では style要素が廃止されてい
ます。今のうちから外部スタイルシートを準備することで、将来に備えるよう
にしましょう。
■外部スタイルシートの作成
外部スタイルシートといっても、特に難しいわけではありません。単にスタイ
ルシートの内容をタイプするだけです。
スタイルシート文書を保存する際の識別子 (Windows では拡張子と呼ぶ) さ
え気をつければ、簡単に外部スタイルシートを作成することができます。
スタイルシート文書の識別子は「.css」となります。
■外部スタイルシートの読み込み
スタイルシート文書を作成したら、HTML文書に読み込ませます。ヘッダ部に以
下のように記述します。
<link rel="stylesheet" type="text/css" href="sample.css">
この構文は、sample と名付けた CSS (スタイルシート) 文書を読み込ませるも
のです。なお、href属性で示される URI は、パス名があればそれも記述します。
<link rel="stylesheet" type="text/css" href="css/sample.css">
この場合は、css というディレクトリ内にある sample.css を読み込ませてい
ます。スタイルシート文書が、他のディレクトリ (フォルダ) にある場合には
そのパス名が必要となります。
■外部スタイルシートの注意点
スタイルシート文書を作るテキストエディタと、HTML文書を作るエディタが同
じであれば問題はありません。
もし、それぞれが異なるソフトウェアで作成する場合、文字コードに注意し
てください。仮に、HTML文書を「Shift_Jis」で作ったとき、CSS文書をそれと
は違う「EUC-JP」で作成した場合には、読み込み時にスタイル部分が文字化け
を起こす可能性があります。
異なるソフトウェアの場合でも、文字コードが同じであれば文字化けは起こ
しません。異なる文字コードを利用した場合には、carset属性を使って適切な
文字コードをを指定します。
<link rel="stylesheet" type="text/css" href="css/sample.css"
chrset="EUC-JP"> CSS文書が EUC の場合
■他のスタイルシート文書の読み込み
スタイルシート文書から他のスタイルシート文書を読み込みます。これによっ
て１つの文書から複数のスタイルを HTML文書に取り込みます。
他のスタイルシート文書を取り込むためには、文書の冒頭で明示しなければな
りません。その際に、@import でスタイルシート文書を指定します。
具体的な構文は以下のとおりです。
@import url("スタイルシート文書の URI") メディアタイプ;
つまり、
@import url("aural.css") aural;
これは、外部スタイルシート aural.css を取り込むもので、そのメディア
タイプは音声用 (aural) であることを示しています。
□ CSSで扱うメディアタイプ
スタイルシートでは、様々なメディアタイプに適用できます。通常は screen
で、コンピュータのモニタ画面ですが、それ以外に印刷用、音声用、点字用な
ど多岐にわたっています。
screen コンピュータのモニター画面
aural 音声出力用
embossed 点字用プリンタ
braile 点字用出力メディア (点字用モニター)
handheld 携帯用通信端末機 (PDAなど)
tty テレタイプ (固定ピッチフォントを扱う機械)
tv テレビ
print プリンタ
projection プロジェクター
all すべての出力メディア (デフォルト)
なお、メディアタイプを指定しなかった場合には「all」が適用されます。
■外部スタイルシートを利用した HTMLの作成
それでは、上記の解説を踏まえて、スタイルシート文書を２つ作り、スタイル
シート文書からスタイルシートを読み込ませましょう。
まず先にスタイルシート文書を作ります。
□ sample-1.css
@import url("sample_100-2.css");
body {
margin-left: 6%;
margin-right: 6%;
background-color: #ffc;
color: #000 }
h1 {
margin-bottom: 0;
background: #069;
color: #fff;
font-size: 1.2em;
padding: 2px;
text-indent: 0.5em }
ここまでタイプできたら「sample-1.css」として適当なディレクトリ (フォ
ルダ) 保存してください。
もう１つスタイルシート文書を作ります。
□ sample-2.css
ul {
list-style-type: square;
margin-left: 2em }
p {
letter-spacing: 1px;
line-height: 130% }
ここまでタイプできたら「sample-2.css」として、先ほどの CSS文書と同じ
ディレクトリに保存します。次は HTML文書を作成します。
□ sample.html
<!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">
<link rel="stylesheet" type="text/css" href="sample_100-1.css">
<title>外部スタイルシート/初心者のためのホームページ作り</title>
</head>
<body>
<h1>外部スタイルシート</h1>
<p>
外部スタイルシートの利点は、複数のページに共通して利用できる点にあり、
メンテナンスや更新作業が容易になる。
</p>
<p>
スタイルシート文書は、他のスタイルシート文書も取り込め、複数のメディア
に対して有効に作用できる特徴もある。外部スタイルシートの主な特徴は、
</p>
<ul>
<li>複数のページに利用できる。</li>
<li>メンテナンスが用意で、更新作業の効率が上がる。</li>
<li>他のスタイルシートも取り込める。</li>
</ul>
<hr>
</body>
</html>
サンプルの実行結果
http://www.scollabo.com/banban/magazine/ms/sample_100-1.html
◆解説 (スタイルシートのみ解説)
□ @import url("sample_100-2.css");
外部にあるスタイルシート文書を取り込みます。@import は、必ず冒頭で宣言
しなければなりません。
□ body { margin-left: 6%; margin-right: 6%; background-color: #ffc;
color: #000 }
コンテンツを配置するための要素の左右の余白をブラウザ画面の６％としてい
ます。背景色はクリーム色、文字色は黒色としています。背景色を設定した場
合には、必ず文字色も同時に指定するようにしましょう。
□ h1 { margin-bottom: 0; background: #069; color: #fff;
font-size: 1.2em; padding: 2px; text-indent: 0.5em }
第一見出し要素にスタイル付けしています。文字のサイズを標準の２割増し、
背景色をくすんだ青色、文字色を白色、上側の余白を無くし、内側の余白は上
下左右とも２ピクセル分とし、文字を１文字分インデント (字下げ) しました。
□ ul { list-style-type: square; margin-left: 2em }
番号なしリストのマーカー (行頭の印) を四角にし、全体の左側の余白を２文
字分にしました。
□ p { letter-spacing: 1px; line-height: 130% }
段落要素内の文字間を１ピクセル、行間を１文字の30％として、読みやすい設
定にしました。
スタイルシートの各設定はお好みに直して指定するのも面白いでしょう。い
ろいろと変えながら楽しんでください。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆HTML、XHTML属性の解説 --- datetime属性
要素内容の変更や削除などがあった場合に、その日付を設定します。
■datetime属性 要素の日付を設定する
DTD： すべての文書型定義に適用
属性値： 日付
記述法： <del datetime="2004-09-02T21:10:30+09:00">
関連要素： del、ins
XHTMLの制限： なし
日付は世界協定時間を標準としているため、日本時間では９時間分足してやる
必要があります。必ずしも必要な属性ではありませんが、変更などが生じた場
合に利用できます。
日付の記法は以下のとおりです。なお、時間は24時間制です。
西暦-月-日T時間:分:秒 （日本時間の場合には +09:00 とする)
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
今回はここまで。
今週のおさらいは Webページにも掲載しましたので、是非参考までに見ておい
てください。
Webページでは HTML文の実行結果のサンプルもあり、より分かりやすく説明
しています。あわせて過去の記事のおさらいも掲載しています
（今週のおさらい）
http://www.scollabo.com/banban/magazine/review_100.html
次回は、9月17日に配信を予定しています。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆質問・ご意見ははこちらまで→ 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年10月17日
Copyright(C) 2002-2004 banban@scollabo.com