毎週金曜日配信 What's New 2004年3月19日
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
┏┏┏┏ 初心者のためのホームページ作り/Web for beginner
┏┏┏ http://www.scollabo.com/banban/
┏┏
┏ ＜第89号＞
banban@scollabo.com
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
当講座は、初心者や中級者が正しい文法と作法を身につけて、プロ級の本格的
な Webページ作成に役立つことを目的に配信されております。
当講座では HTML4.01、XHTML1.1、XML1.0 を中心とした文法が主体となってい
ます。なお、このマガジンは等幅フォントでお読みいただくと快適に読めるよう
になります。
今週のコンテンツ
■ Webデザイン 第31回 --- ブログの維持
■ HTML講座 第31回 --- 文書型定義 (DTD) の不思議
■ CSS講座 第10回 --- 枠線
■ 属性の解説（第14回） --- target属性
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆Webデザイン（第31回） ブログの維持
大流行している「ブログ：Weblog」ですが、実際に毎日情報を発信するのは大
変なことです。「ブログを公開したからには、毎日書くぞ！」と張り切ってい
る方も少なくないと思います。
私も、個人的な偏見に満ちたブログを公開していますが、決して毎日書いて
いるわけではありません。思いついた日に思いついたことを勝手に書いている
だけです。
毎日何かを発信し続けるのは、どうしても自分自身が消耗するのではないか
と考えたことがありました。
しかし、考えてみれば「ブログ」が登場した背景は、9.11以降の何も言えな
くなったアメリカの社会で、「それはちがうだろう！」という、ともすると反
社会的な意見を持った「勇気ある」人たちから始まったのです。
当時のアメリカは、テロという共通の敵に対する翼賛的な体制になりつつあ
り、新聞やテレビなどのマスコミが政府に対して何も言えない状態でした。何
か反論すると「テロに味方するのか」という見方をされ排斥されました。
そうした中で、「こりゃ違うんじゃないの？」という疑問をもった知識人た
ちが「本音」で語るツールとして「ブログ」が注目されました。
日記という形で自分の本音をコンテンツとして発信したブログは、こうした
背景の中で爆発的に流行し、１つの文化として定着しつつあります。
■長く続けられるということ
ブログは、その仕組みから他のブログにトラックバックを発信することで、大
きな輪となって広がっています。それは閲覧する人にとっても有用な情報を簡
単に探せるという利点も併せ持っています。
ブログを開設するということは、そうした大きなうねりを持った輪に参加す
るのと同じです。だからこそ、じっくりと練りこんだ発言を発信し続けたいも
のです。
発信続けることは決して「消耗」することにはなりません。何かを発言する
ということは、それなりの裏づけがあるわけです。そして、書き続けることに
よって書き方のコツがつかみ取れるし、持続することによる「力」がついてき
ます。
これは Webサイトの運営でも同じことです。持続することで成長することが
あります。とにかく Webという広大な空間に向かって発信するわけですから、
何ごとも真剣で、真正面から取り組みたいものです。
(第32回 SEO対策につづく)
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆HTML講座 (第31回) 文書型定義 (DTD) の不思議
不思議なことに、HTMLがまったく同じ構文なのに、文書型定義によっては異な
る表現をします。それは何故でしょう？
■文書型定義とは
文書型定義を一言で述べれば、作成するHTML文書の仕様を定義するものです。
つまり、記述されるHTMLが、どのバージョンに準拠しているかを明示的に宣
言します。本来ならば Webブラウザは記述された文書型定義を参照し、その仕
様にしたがってレンダリングすべきものですが、実際は Webブラウザが実装し
ている仕様にしたがってレンダリングするのが実情です。
そのため、HTML文書はブラウザ固有の仕様によって異なる表現になることが
あります。
具体的な相違は、親要素の設定を継承しないとか、あらかじめ定義されてい
る文字の大きさや、余白、位置の不具合などが報告されています。
１．HTML4.01 Transitional 互換型
この文書型定義は、それ以前のバージョンで定義された要素や属性など
を使うことができる過渡期仕様の互換型で、DTDを参照する URI は含ま
れません。
互換型の文書型定義は以下のように記述します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
２．HTML4.01 Transitional 標準型
Transitional互換型と同様に、以前の要素、属性などを使うことができ
ます。この宣言は、その仕様を参照する URI が含まれます。
基本的に Webブラウザは、その仕様を参照してレンダリングすること
となっていますが、銘柄によってはそれを無視することがあります。
標準型の文書型定義は以下のように記述します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
３．HTML4.01 Strict 互換型
この文書型定義は「厳格仕様」として、以前の要素や属性を使うことが
できません。あくまでも HTML4.01 として定義された要素と属性しか使
えません。以前のタイプを「非推奨」扱いとしています。本来の理想と
する構文を示すものです。DTDを参照する URI は含まれません。
HTML4.01 Strict 互換型の文書型定義は以下のように記述します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
４．HTML4.01 Strict 標準型
Strict互換型同様、以前の要素や属性を使うことができません。
この宣言は、その仕様を参照する URI が含まれます。
基本的に Webブラウザは、その仕様を参照してレンダリングすること
となっていますが、銘柄によってはそれを無視することがあります。
HTML4.01 Strict 標準型の文書型定義は以下のように記述します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
５．HTML4.01 Frameset 互換型
フレームを利用する場合に限って、この文書型定義を宣言しなければな
りません。仕様は、Transitional型と同じ以前の要素と属性を使うこと
ができます。DTDを参照する URI は含まれません。
HTML4.01 Frameset 互換型の文書型定義は以下のように記述します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
６．HTML4.01 Frameset 標準型
Frameset互換型同様に、フレームを利用する場合にこの文書型定義を宣
言します。この宣言は、その仕様を参照する URI が含まれます。
基本的に Webブラウザは、その仕様を参照してレンダリングすること
となっていますが、銘柄によってはそれを無視することがあります。
HTML4.01 Frameset 標準型の文書型定義は以下のように記述します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
■継承とは、
継承について具体的に説明すると、
文字色 基本的に親要素の文字色が子要素にも継承される
文字サイズ 基本的に親要素で設定された文字サイズが継承され、子要素で
文字サイズが設定された場合には、親要素で設定された文字サ
イズの比率となる
例えば、body要素で指定された文字サイズは、他の要素で文字サイズを指定
しなかった場合には、親要素の文字サイズが継承されます。子要素で文字サイ
ズを指定した場合 (例えば 90%とした場合) 親要素の文字サイズを基本とした
比率にならなければなりません。
ところが、文書型定義を変えることによって Webブラウザはそれぞれの銘柄
で異なるふるまいをします。
以下のファイルを見比べてください。微妙に異なることに注意してください。
HTML4.01 Transitional 互換型
http://www.scollabo.com/banban/magazine/mm/sample_89-1.html
HTML4.01 Transitional 標準型
http://www.scollabo.com/banban/magazine/mm/sample_89-2.html
HTML4.01 Strict 互換型
http://www.scollabo.com/banban/magazine/mm/sample_89-3.html
HTML4.01 Strict 標準型
http://www.scollabo.com/banban/magazine/mm/sample_89-4.html
当然 OS や Webブラウザの銘柄が異なれば、それぞれのレンダリングも変化
します。
比較的新しいブラウザでは、文書型定義を参照する URI の有無で、異なる
場合があります。例えば、Windows版、及び Macintosh版 MSIE の場合、互換
型と標準型で文字サイズのレンダリングに相違があります。
結果から申し添えれば、HTML Transitional を使う場合には、概ね標準型の
レンダリングに好感が持てます。
なお、文書型定義を宣言しない場合、仕様書では HTML 2.0 として扱うよう
に規定されています。HTML文書では、その冒頭で必ず文書型定義を明示的に宣
言しなければなりません。正しいHTMLを作成するためにもお忘れなく。
XHTMLの場合には、XML宣言の有無でも Webブラウザによっては、その振る舞
いが違ってきます。なかなか「標準」となるブラウザを探すのは容易ではない
ようです。
次回は、アクセシブルなテキストの表現について解説します。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆Tips 文書型定義の統一
サイト内で登録されているすべてのページでは、特に意味がなければ同じ文書
型定義を宣言するように心がけましょう。今回説明したとおり、文書型定義の
種別によっては異なる表現をします。
ページを繰るたびに違う表現というのはあまり心地よいものではありません。
文字サイズや余白、継承といった様々な要素の中で、それらが変化するという
文書型定義の性質を考慮して、統一性のあるページを作成することが大切なこ
とではないかと考えます。
文書型定義の種別によって異なるレンダリングという弊害は避けられないも
のです。作者の意図とは異なることが多々あるのが実情です。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆CSS講座（第10回） 枠線表示
末梢線や下線表示を含まないものとして、HTMLで枠線が表示できるのは、基本
的にテーブル要素だけです。その他の枠線指定に関する要素や属性は、すべて
独自規格であるため、環境によっては無視されることがあります。
スタイルシートでは、ブラウザ画面に表示するすべての要素で、様々な形式
の枠線を設定することが可能です。インラインレベルでも、ブロックレベルな
どの要素に、簡単に枠線を設定することができます。
枠線を指定するとき、枠線の形式、色、太さといった３つの属性が用意され
ており、それぞれを個別、あるいは一括で設定することができます。
■枠線の形式
枠線の形式とは、枠線の表現を示すもので、単純な直線や破線、点線などの形
式を指し、スタイルシートでは、border-style属性で設定します。
枠線を指定するために、あらかじめ以下のような８つの形式が用意されてい
ます。
solid 直線 ( ― )
dashed 破線 ( -- )
double 二重線 ( ＝ )
dotted 点線 ( … )
groove 立体的に窪んだ感じの線
ridge 立体的に隆起した感じの線
inset 立体的に要素ごと窪んだ感じの矩形
outset 立体的に要素ごと隆起した感じの矩形
border-style属性で形式を指定する方法は、上下左右を個別で、あるいは、
一括で設定します。なお、枠線の色や太さはブラウザ依存となります。
□枠線形式を個別で設定
上下左右の枠線形式の指定は以下のとおりです。
botder-top-style 上側の枠線形式を指定する
botder-left-style 左側の枠線形式を指定する
botder-right-style 右側の枠線形式を指定する
botder-bottom-style 下側の枠線形式を指定する
□枠線形式を一括で指定する
上下左右の枠線形式を一括で設定する方法です。
border-style 上下左右に指定した形式で枠線を表示する
□具体的な書式
枠線形式を設定する具体的な書式は以下のとおりです。
p { border-bottom-style: dotted } 要素の下側に点線の枠線を設定
p { border-style: solid } 要素の上下左右に直線の枠線を設定
■枠線の太さ
枠線の太さを指定する場合、同時に枠線形式を併用する必要があります。形式
が設定されない場合、枠線そのものを表示することができません。
枠線の太さは、border-width属性を使いますが、それぞれ個別に設定するこ
とができます。
□枠線の太さを指定する単位
枠線の太さを指定するとき、以下の単位を使います。
thin 細い枠線
medium 中くらいの太さの枠線
thick 太い枠線
数値＋単位 スタイルシートで扱う単位で太さを指定する
thin、medium、thick などの実際の太さは、ブラウザに依存します。
数値と単位を組み合わせた太さは、それぞれの単位に依存します。
□枠線の太さを個別に設定
上下左右の枠線の太さの指定は以下のとおりです。
border-top-width 上側の枠線の太さを設定する
border-left-width 左側の枠線の太さを設定する
border-right-width 右側の枠線の太さを設定する
border-bottom-width 下側の枠線の太さを設定する
□枠線の太さを指定する具体的な書式
前述したとおり、枠線の太さを指定する場合は、border-style属性を一緒に
用いる必要があります。
h1 { border-style: solid; border-left-width: 2em }
p { border-style: dashed; border-bottom-width: medium }
■枠線の色
枠線の色を指定する場合には、同時に、border-style属性を指定する必要があ
ります。もし、その属性を指定していない場合には、枠線は表示されません。
□枠線の色を指定する単位
枠線に色をつける場合には、以下の3つの単位が指定できます。
16進数フルスペック RGBを２桁ずつで指定 (#ff9900 オレンジ色)
16進数の３桁指定 RGBを1桁で指定 (#f90 は #ff9900 と同じ)
カラーネーム (色名) あらかじめ定義されている16色の色名で指定
□枠線の色を個別に指定
枠線の色は上下左右に個別で設定することができます。
border-top-color 上側の枠線の色を設定する
border-left-color 左側の枠線の色を設定する
border-right-color 右側の枠線の色を設定する
border-bottom-color 下側の枠線の色を設定する
□枠線の色を指定する具体的な書式
枠線の太さを指定する場合は、border-style属性を一緒に用いる必要があり
ます。
h1 { border-style: ridge; border-left-color: green }
p { border-style: solid; border-bottom-color: #09f }
■枠線の各設定を一括で行う
枠線は、要素の上下左右の位置や形式、太さ、色などを一括で指定することが
できます。いちいち border-style、border-width、border-color などの属性
を個別に設定することなく行えます。
□各設定を位置を指定して一括で指定する
上下左右の位置を指定して、形式、太さ、色などを一括で指定します。
border-left 要素の左側に枠線を一括で設定する
border-top 要素の上側の枠線を一括で設定する
border-right 要素の右側に枠線を一括で設定する
border-bottom 要素の下側に枠線を一括で設定する
□各設定をまとめて指定する
上下左右にまとめて各枠線表示のスタイルを設定します。各設定の値は半角
のスペースで区切って、それぞれで指定します。
border 上下左右に枠線の太さ、色、形式を一括で指定します。
□一括設定の具体的な書式
この属性を使った設定には、border-style属性は必要ありません。
h1 { border-left: 2em solid #f90; border-right: 2em solid #f90 }
p { border: thicl double #039 }
■padding属性を併用する方法
どのような方法で枠線を設定するにせよ、枠線とコンテンツに隙間がないのは
窮屈に感じます。そこで、前回説明した padding属性を使って、コンテンツに
余裕をもたせる方法があります。
p { border: 1ps solid red; padding: 2px }
この設定は、段落要素のコンテンツに赤色の１ピクセル幅の枠線を表示させ
るものですが、枠線とコンテンツの間に２ピクセル分の余白を設定しています。
このようにすることで、見やすい環境を提供することができますので、いろい
ろとお試しください。
次回は、背景画像の設定について解説します。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆HTML、XHTML属性の解説 --- target属性
リンク先のページを指定したウィンドウで表示させるために用いられます。
特に、フレームを使ったページでは必須の属性になります。フレームがない
場合には、新規のウィンドウを開かせることが可能です。
■target属性 リンク先の表示ウィンドウを指定する
DTD： HTML4.01 Transitional、および Frameset で利用可能
属性値： フレーム名、 _top、 _blank、 _self、 _parent など
記述法： <a href="sample.html" target="_blank"> … </a>
関連要素： a、area、base、link、form など
XHTMLの制限： XHTML1.0 Transitional および Frameset で利用可能ですが、
XHTML1.0 Strict および XHTML1.1 では利用できません。
フレームを使うページでは、複数のウィンドウで構成されるため、各ウィンド
ウで表示させるリンクには、target属性を使わなければなりません。また、フ
レームを解除させる場合には、_top という値を使います。 _self の場合は、
同じウィンドウ内でリンクするときに用います。
フレームがないページでリンクをクリックしたとき、新しいウィンドウで表
示させているときには、target属性が使われ、_blank、あるいは _parentなど
の値が指定されています。
どちらにしても、閲覧者のリソースを消費するだけなので、リンクはできる
だけ同じウィンドウ内で設定したいものです。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
今回はここまで、ではでは・・
今週のおさらいは Webページにも掲載しましたので、是非見ておいてください。
Webページでは HTML文の実行結果のサンプルもあり、より分かりやすく説明して
います。あわせて過去の記事のおさらいも掲載しています。
（今週のおさらい）
http://www.scollabo.com/banban/magazine/review_089.html
次回は、3月26日に配信を予定しています。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
質問・ご意見ははこちらまで→ banban@scollabo.com
なお、ご質問の際には、あなたがお使いのＯＳや Webブラウザ、テキストエデ
ィタなど、なるべく分かりやすく制作環境を明記していただけると回答しやすく
なると思います。
ただし、個人的な事由により返事が遅れることがあります。ご了承ください。
お急ぎの場合には、当サイト内の掲示板をご利用ください。きっと誰かが答えて
くれると思います。
発行者 ばんばん
協 力 スズキ・コラボレーション 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
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
＜えでぃた〜ず・る〜む＞
このところ個人情報の流出が問題になっていますが、身近にある個人情報につ
いては、あまりにも関心が払われていないような気がします。
私も自分の個人情報を、どんなところにバラ撒いているのかを考えました。
ガソリンスタンドで発行するサービスカード、自動車デーラー、病院の受診カ
ード、大手家電店のポイントカード、病院、行きつけの床屋さん、ISP (プロ
バイダ) 、オンラインショップ、銀行、不動産屋、その他数え上げるとかなり
の数になります。
こうした中で個人情報がしっかり管理されていることに疑問を感じます。そ
う思うとこれから先、そうそう簡単に申込書などに記入することに不安を抱き
ます。イヤな世の中になりましたねぇ。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆著作権について
個人がご自分のＰＣに保存して利用する以外の記事の転載、引用は基本的に応じ
ておりません。記事中の内容について、無断で使用することを固く禁じます。
なお、記事中のスタイルシート、HTMLをご自分のページ作成に自由に使ってい
ただいても差し支えありません。
Copyright(C) 2002-2004 www.scollabo.com/banban/
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
最新公開日 2004年3月22日
Copyright(C) 2002-2004 banban@scollabo.com