Home | 第88号 | 第89号 | 第90号 | 目次

初心者のためのホームページ作り　第89号

Web作成支援

メールマガジン「初心者のためのホームページ作り」でお伝えした内容を、「復習」の意味で掲載しています。テキストのみのマガジンと違って、実際のサンプルや画像を交えて解説していますので、理解が深まると思います。

なお文中、疑問点や分からない点がありましたら、ご遠慮なく当方まで メールにてご質問ください。

＜第89号＞ 今週のおさらい
　　　　　　　　　　　　　毎週金曜日配信　What's New 2004年3月19日
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
　  ■ HTML講座  第31回 --- DTDの不思議
　　■ CSS講座　第10回 --- 枠線
◆ HTML講座 --- DTDの不思議
文書型定義 (DTD = Document Type Definition) は、文書がどのバージョンの HTMLの仕様に従って記述するのかを宣言するもので、HTML文書の冒頭で必ず明示しなければなりません。
DTD では、要素と属性の記法に関する仕様を詳細に取り決めたもので、Webブラウザはその仕様に従ってレンダリングするものと決められています。
本来ならば、Webブラウザは常に明示されている DTDを参照し、それに則って解釈しなければならないのですが、ほとんどの場合ブラウザ固有の実装仕様に任されているのが実情です。そのため、DTD の種別によって、作者が意図しない特異の表現をする「不思議」な現象が発生します。
■ DTDの仕組み
DTDでは、要素の形式や利用法、利用できる属性や記法が定義されており、基本的に作者は DTD で決められている仕様に従って HTML文書を作成しなければなりません。
以下の仕様はリストを形成する ul要素について定義されている DTD の一部です。
<!-- Unordered Lists (UL) bullet styles -->
<!ELEMENT UL - - (LI)+     -- unordered list -->
<!ATTLIST UL
  %attrs;                  -- %coreattrs, %i18n, %events -->
この DTD では、順序を規定しないリスト (番号なしリスト) の要素型と子要素として配置できる要素、及び利用できる属性を提示し、ul要素における基本的な構造について明示しています。
ただし、出力方法 (表現方法) についてはまったく触れていません。
■ ブラウザの表現方法
仕様書で細かい出力方法が指定されていないということは、基本的に HTMLを解釈するソフトウェアに依存することになります。例えば、lynx という代表的なテキストブラウザでは、第一見出し要素 (h1要素) をセンタリングして出力します。
W3Cでは、User Agent Accessibility Guidelines (UAAG) というページで、Webブラウザのアクセシビリティについて述べられていますが、具体的な出力方法は触れられず、HTTP を解釈するソフトウェアに依存しています。
各銘柄のブラウザでは、コンテンツの表現を行うための独自の「スタイルシート」が実装されており、それを基本として HTML を解釈し、画面に出力します。DTD は、あくまで利用される要素の仕様に関する規格であり、出力には影響しないことになっています。
しかし実際には、まったく同じ HTMLコーディングであっても DTD の種別で表現が異なるのは歴然たる事実です。
■ 継承
通常、親要素で指定されたフォントに関する設定は、子要素や孫要素にも引き継がれます。これを「継承」と呼びます。しかし実際には、DTD によって無視されたりする場合があり、作者は混乱するばかりです。
異なる DTD による HTML の表現サンプル (すべて同じ構文)
実際にサンプルを見ていただいておわかりのとおり、概ね標準型の DTD を使った場合の方が、比較的標準に近い出力をするようです。サンプルはほんの一部しか用意しませんでしたが、多様な要素によっていろいろと弊害があるようです。
PageTop
◆ CSS講座 --- 枠線
要素にはそれぞれ上下左右の領域があります。スタイルシートでは、そうした上下左右の部分に「枠線」を指定することができます。今回は、枠線の表示指定に関する様々な属性と値について解説します。
スタイルシートでは、要素のタイプがどんなものでも、枠線を表示させることができます。例えインラインレベル要素でも、ちゃんと 枠線を表示 させることが可能です。
■ 枠線の形式
スタイルシートの枠線には単純な直線から、点線、二重線、稜線などの形式が定義されています。スタイルシートで枠線形式を指定するための属性は、border-style属性です。以下は、その枠線の形式の値を示したものです。
枠線形式の値とそのサンプル
solid 直線 実際のサンプル
dashed 破線 実際のサンプル
dotted 点線 実際のサンプル
double 二重線 実際のサンプル
groove 立体的に窪んだ感じの線 実際のサンプル
ridge 立体的に隆起した感じの線 実際のサンプル
inset 立体的に要素ごと窪んだ感じの矩形 実際のサンプル
outset 立体的に要素ごと隆起した感じの矩形 実際のサンプル
なお、枠線形式は上下左右を個別に指定することも可能です。詳しくは今週のメールマガジンを参照してください。
具体的なスタイルシートの書式は以下のとおりです。
p { border-top- style: double }
■ 枠線の太さ (幅)
枠線の太さを指定するスタイルシートとの属性は、border-width属性です。枠線の太さを指定する値はスタイルシートで利用できる単位と、あらかじめ定義されている値があります。この属性を使う場合には、border-style属性と合わせて使う必要があります。
枠線の太さを指定する値とそのサンプル
thin 細い線 実際のサンプル
medium 中くらいの太さ 実際のサンプル
thick 太い線 実際のサンプル
数値＋単位 2pt (2ポイントの太さに指定する枠線) 実際のサンプル
枠線の太さを指定するとき、上下左右を個別で指定することも可能です。詳しくは今週のメールマガジンを参照してください。
具体的なスタイルシートの書式は以下のとおりです。
p { border-top-style: solid 
    border-top- widt: thin }
■ 枠線の色
枠線には色をつけることができます。色は16進数を使う場合と、あらかじめ定義されている16色の 色名 (カラーネーム) を利用することになります。
スタイルシートによる枠線の色指定は、border-color属性を使います。なお、この属性を利用する場合、あらかじめ border-style属性を指定する必要があります。
枠線の色を指定する値とそのサンプル
16進数 RGB による16進数の色指定 (緑) 緑色 #009900
色名 16色のカラーネームから色を指定する (紫) 紫色　purple
枠線の色を指定するとき、上下左右を個別で指定することも可能です。詳しくは今週のメールマガジンを参照してください。
具体的なスタイルシートの書式は以下のとおりです。
p { border-top-style:  solid 
    border-top- color: purple }
■ 枠線に関するスタイルの一括指定
枠線に関するそれぞれの設定を個別に行うのは現実的ではないと思います。当サイト内でもそのような使い方はしていません。
枠線は、形式、太さ、色という３つの要素があるわけで、これを一括で設定するほうがはるかに効率的です。
上下左右を個別に一括指定
枠線を表示させたい場所を指定する方法と、上下左右を一括で表示させる方法があります。以下は枠線を表示させる場所を指定する場合です。
border-top: 色 太さ 形式;
枠線表示する位置指定は、
具体的な書式は、
 span { border-bottom: 3px double #069 }
これは、汎用インラインレベル要素の下側に３ピクセル分の青色の二重線を表示させる設定です。各値は半角スペースで区切って指定します。この場合、それぞれの値の並びは順不同です。
このスタイルシートの 実際の見本はこのとおりです。
上下左右を一括指定
枠線の上下左右を一括で指定する属性は border属性です。この属性は、上下左右の枠線を同時に行うものです。
上下左右に一括で指定する具体的な書式は、
 span { border: medium solid #900 }
このスタイルシートの 実際の見本はこのとおりです。
要素の上下左右に一括で枠線を指定する場合、枠線と要素のコンテンツが近すぎる傾向があります。この場合、前回説明したとおり padding属性を併用するようにします。 
 span { border: medium solid #900; padding: 2px }
こうすることで枠線とコンテンツの間に２ピクセル分の余白を表示させることで、コンテンツに余裕が生まれます。
このスタイルシートの 実際の見本はこのとおりです。
This page is Valid HTML 4.01! 初版公開日 2004年3月19日
Copyright（C） 2002-2004 banban@scollabo.com