第 9 章 . HTM し DHTML とクライアントサイドスクリプト ・別ファイルで定義する ( 外部スタイルシート ) スタイルシートを別のファイルで定義し、リンクさせる方法もあります。 スタイルシートを定義したファイルは . css という拡張子をつけます。このファイル く link rel=nstylesheet" は、外部スタイルシートとも呼ばれます。 ・外部スタイルシートの例 く html> く head> く /head> く b0dY> type=" text/css" href= . /others/sty1e01. css"> “くⅱ nk ・・・”で読み込んだ外部スタイルシートの スタイルが適用される く /bodY> く / h しⅢ 1 > (HTML) リンク styIeOl ℃ ss の 定義が適用される styIeOl ℃ ss 外部スタイルシート なお、埋め込みスタイルシートでも、 @import 宣言 * で外部ファイルを読み込むこ く ! <style type="text/css"> く head> ・インポートスタイルシートの例 とができます ( インポートスタイルシート ) 。 @土Ⅲ por に url ( .. /0thers/styIe01. css) p { line—height: 140 宅 } strong { C010r : red } </bodY> <bodY> く /head> く /style> 外部ファイルを読み込む 適用される シートの定義が 埋め込みスタイル styIeO 1 ℃ ss を含む @import スタイルシート 埋め込み (HTML) styIeOl ℃ ss 【@import 】 Netscape 4. x は対応していません。なお、 Netscape 4. x は CSS への対応に問題があり、 Netscape 4. x がスタイルシートを読み込まないように、あえて @import 宣言を使用しているというサイトも多く見られま す。 248
CSS (Cascading Style Sheets) st ⅵ e 属性を使って直接スタイルを指定する方法です。 b 。 dy 部で使うほとんどの要 ・任意の場所に埋め込む ( インラインスタイル ) 9.3 インラインでスタイルを指定する場合は、 meta 要素でデフォルトスタイルを指定 タイルを指定したい場合は、 div 要素、 span 要素を使用します。 素で st ⅵ e 属性を使用できます。また、 p 要素などの論理要素とは別に範囲を定めてス します。 ・インラインスタイルの例 <head> く meta http-equiv="Content—Sty1e-Type" ↑スタイルのタイプを指定する く /head> く bodY> content="text/css"> く hl style="border-style: ou に se に " > スタイルシートの使い方く / hl > ↑ HI ( 大見出し ) 部分に立体的なポーダー ( 境界線 ) を表示 * く div style="margin: 0 2em"> ↑く div > ~ く / div > 部分に上下 0 、左右 2 文字分のマージン ( 余白 ) を入れる く p > スタイルシートを使うには次の 3 通りの方法があります。く /P> く > く 1 土 > 外部スタイルシートく / 1 土 > く 1 土 > 埋め込みスタイルシートく / 1 土 > く1i> く span style="color: red " > インラインく / span > スタイルく / 1 土 > く / ul > く /div> く /bodY> ↑く span > ~ く / span > 部分の文字色を赤にする : n 朝 1 を新三← 1h11 ヨーし : 「 0 物ト朝 1 三 , を 、、 ; ぼをい日編第印表お気入、ツー 0 世 0 アドしス ( 0 ) 第れ nli 味 s ・ 5 」ト←。 、移動卩レ ) スタイルシートの使い方 スタイルシートを使うには次の 3 通りの方法があります . ・外部スタイルシート ・埋め込みスタイルシート ノスタイル ※要素の一部を指定したい場合は span 要素 ( インライン系要素 : p. 238 ) 、複数の要素を囲むように指 あらかじめ定義しておいたスタイルを適用させることもできます ( p. 252 ) 。 なお、 id や class 属性を使って、外部スタイルシートや埋め込みスタイルシートで 定したい場合は div 要素 ( プロック系要素 : P. 231 ) を使用します。 249 しているかどうかはブラウザによって異なります。 【 border-style 】 0 set のほかに、 inset 、 solid 、 double などが指定可能 ( デフォルトは none)o なお、各値に対応
9.2 HTML (HyperText Markup Language) ・リストの例 く p > スタイルシートを使うには次の 3 通りの方法があります。 </P> く u1 > く li > 外部スタイルシートく / 1 土 > く li > 埋め込みスタイルシートく / 1 土 > く 1 土 > インラインく / 1 土 > く / ul > く dl > く d む > 外部スタイルシートく / dt > ←用語 く dd > 1 土 nk 要素を使って定義ファイルを読み込むく / dd > ←定義内容 く dt > 埋め込みスタイルシートく / dt > く dd > s セ yle 要素を使って定義するく / dd > く dt > インラインく / d し > <dd>style 属性で定義する </dd> く / dl > ) ⅱ引 2 html ー M 雛 0 ) 幵 lnternet ExpIorer 国同ロ . アイル ( E ) 編集 ( E ) 表示 ( お気に入以ツー。八ルブ ( 印ロ スタイルシートを使うには次の 3 通りの方法があります。 ・外部スタイルシート ・埋め込みスタイルシート ・インライン 外部スタイルシート ⅱ nk 要素を使って定義ファイルを読み込む 埋め込みスタイルシート st ⅵ e 要素を使って定義する インライン st ⅵ e 属性で定義する 表 9-6 ・リスト要素 番号付きリスト 番号なしリスト リスト項目 (ol,ul,dir,menu 要素内で使用 ) 定義リスト 定義される用語 ( 引要素内で使用 ) 定義内容 ( 引要素内で使用 ) ディレクトリリスト。 "dir /w ”あるいは "ls" のような表示が想定されているが、 実際にはと同じ表示内容とするブラウサが多い menu メニューリスト。記号のつかないリストが想定されているが、実際にはと同じ 表示内容とするブラウザが多い を TransitionaI DTD (Loose DTD) 追加分 ・ 0 ・ 0 233
9.1 HTML から DHTML へ スタイルシートは、表示形態をきめ細かく設計することができるため、 web での表 現力が大幅に向上します。このほか、スタイルシートを活用することで、「構造と見栄 えの分離」と、「デザインの再利用」が可能になります。 ・構造と見栄えの分離 HTML だけで何でも定義できるというのは 1 つの魅力ではあります。しかし、文書 の中にデザインが入り込むと、肝心な、なにが見出しでどこが引用かなどといった、 論理構造がわかりにくくなってしまいます。 たとえば、 HTML でよく使われるテクニックに、 " 左右を空けたいときは引用であ るかのように書く " というものがあります。引用 (blockquote) と示した部分が、主 要プラウザで、たまたま左右に空白を入れて表示されていたためです。 左右が空いているほうが読みやすく、簡単に左右を空けるにはそうするしかなかっ たのもまた現実です。そうはいっても、見た目を変えるために意味づけをするので は、主客転倒です。 スタイルシートを使うことで、論理構造と見栄えを分離させ、内容を明確にするこ とができます。 図 9-5 ・構造と見栄えの分離 HTML ( 構造 ) HTML 構造 見栄え 役割分担 テータ ( コンテンツ ) に専念することで すっきりとわかりやすく ・デサインの再利用 スタイルシート ( 見栄え ) 見栄え ( プレゼンテーション ) 用の多彩な 機能を使ってきめ細かいデサインを 複数の HTML 文書で同じスタイルシートを使うことにより、文書の見栄えを簡単に 統一することができます。また、デザイン変更も容易になります。たとえば、サイト全 体のデザインを変更するには全 HTML ファイルの編集が必要ですが、共通のスタイル シートを使っていれば、そのスタイルシートと変更するだけですみます。 223
第 9 章 HTML / DHTML とクライアントサイドスクリプト ・ DOM (Document Object M0del) DOM (Document Object M0del)* は、プログラムやスクリプトを利用して、 web ページの内容にアクセスしたり、更新したりできるようにするためのインター フェースです。プログラムを作る際、 HTML や XML の内容を、オプジェクトとして 簡単に扱うことができます。たとえば、 HTML の中に埋め込んだクライアントサイ ドスクリプト ( P. 225 ) では、 HTML の背景色を変更したり、 HTML ファイル内のリ ンク情報を知ることができますが、このときにも DOM が使用されています。 第 6 章オブジェクト指向と分散処理 : P. 145 図 9-3 ・ DOM のイメ ーン DOM ・ DOM は HTML や XML のコンテンツを オブジェクトとして取り出す技術 4 h 1 要素 a 要素 4 工フ DOM を利用した技術の 1 つが DHTML です。 たとえばクライアントサイドスクリプトから HTML の内容 ( コンテンツ ) ヘアクセスする ときにも DOM が利用されています スタイルシート HTML の見栄えを定義する技術をスタイルシートといいます。 HTML とは異なる スタイルシート用の言語を使って、 HTML によって意味付けされた部分をどう表示 するかを定義します。 " 見出しは枠で囲んで表示する " 、 " 文章部分は行間を少し広げ、 といったきめ細かい指定が可能です。 段落間に空行を入れない " 図 9-4 ・スタイルシートによるレイアウト指定 スタイルシート 見出しには 枠をつけて 大きく表示 スタイルシート 本文は出だしを 1 字下げて 行間を空けて表示 HTML ここは 見出し HTML ここは 本文 スタイルシート HTML の見栄えを定義 するものを「スタイルシー ト』といいます。 H T M L とは異なるスタ ート用の言語を使っ 【 DOM 】 DOM には考え方のモデルそのものという意味と、 DOM という考え方に基づく A 円 (Application program lnterface : P. 134 ) という意味があります。なお、 XML を操作する A 円には、 DOM のほかに xml-dev メーリングリストを中心に開発された SAX (SimpleAPlforXML) があります ( p. 288 ) 。 222
オブジェクト間通信プロトコル オプジェクトサーバ オブジェクト指向 親要素 ・か 151 , 340 ース ァーモン オブジェクト要求プローカー 153 1 61 146 161 227 269 248 91 250 106 151 148 89 273 , 292 124 85 105 253 150 183 92 310 , 326 コントロー丿レ コンノヾイ丿レ コンノヾイ丿レ言語 コンパクト HTML コンビニ決済 コンピュータウイルス コンピュータ 緊急対応センター コンピュータネットワーク 235 335 317 353 216 192 193 80 151 198 ストリーミング再生 スプリッタ スレッド 整形式文書 静的旧アドレス セキュリティホール セキュリティポリシー セグメント セッション管理 セレクタ 全文検索 INDEX 268 93 308 284 89 194 192 84 , 101 36 , 310 246 , 251 246 142 外部スタイルシート 課金 カスケーディング 仮想ドメイン 仮想メソッド カプセル化 可変アドレス クッキー 下り 共通鍵方式 基底クラス 疑似クラス カントリーコード 幹線 簡易データベ 空要素 クライアントサイドスクリプト 34 , 49 , 225 , 261 クラス クラス ( クラス A ~ E) クラスタリング グループウェア クレジット決済 クレデンシャル グローノヾルアドレス 継承 継承 (CSS) 携帯電話 携帯電話 ( 通信速度 ) ゲートウェイ ゲートウェイ (i モード ) コメントアウト コメント (HTML) コミット コネクション型 固定旧アドレス コー丿レノヾック 公式サイト (i モード ) 公開鍵方式 公開鍵 検索エンジン ゲーム コンポーネント コンポーネント指向 サブクラス サイズ指定 (CSS) サーブレット サーバ方式 サーノ D ・さ サーバサイドスクリプト スクリプト言語 スキーム名 スキーマ言語 スキーマ スーパークラス シングルタスク マルチュース シングルソース・ 自律分散 シリアルデータ シリアライズ 処理命令 常時接続 使用言語 車輪の再発明 実装 支線 システムカラー 色覚 シェルスクリプト シェ丿レ サブネットマスク 48 , 304 29 339 253 150 99 318 318 ・・ 254 255 85 154 156 297 91 295 275 275 278 177 150 276 280 109 317 専用線 属性 (HTML) 第三者中継 ダイナミックな Web ペー ダイヤルアップ旧接続 ダイヤルアップ接続 ダウンサイジング ダウンロード式 楕円曲線暗号 タグ 多重継承 タスク 多層システム 多態性 多段プロキシ 妥当な文書 チケット配布サーバ チャレンジ値 通信衛星 ( 通信速度 ) 使い捨てパスワード ツリー構造 ァータ層 丁ータウェアハウス 93 228 ン 220 90 90 176 29 183 226 150 177 170 151 68 284 188 186 92 186 227 141 169 213 150 99 171 24 , 173 215 188 100 150 251 344 92 102 349 269 142 183 183 352 189 89 96 126 241 241 227 160 232 226 スクリプトプログラム 317 スケーラビリティ スケーラブル スター型 スタイラスペン スタイルシート スタイルシート言語 スタブ スタンドアロン スタンドアロン宣 157 26 , 157 295 177 162 285 222 345 84 子要素 コ丿レ / ヾ コンテナ コンプ - ン・ ト ステータスコード (HTTP) ステートレス ストアドプロシージャ 65 67 127 ァータ・ハイティング技術 ァータベース ァータベース管理システム ァーブル (HTML) ァータリポジトリ ァータベース層 ァータベースサーバ 動的旧アドレス 動画 電子マネー 電子透かし 電子商取引 手続き指向 デジタル署名 デジタル 184 1 1 6 184 146 184 185 74 234 158 169 136 125 89 268 215
10.1 XML とスタイルシート XML (eXtensible Markup Language) XML によるデータをどのように表示するかを定めるのがスタイルシートです。ス タイルシートを定義するための言語をスタイルシート言語といい、 css や XSL など が使用されます。 表 10-4 ・ XML で使用される主なスタイルシート言語 DSSSL (Document style Semantics Specification Language) ・ SGML 文書のスタイル指定のためスキーマ言語 * を元に開発 ・ほとんど実装されていない (XSL は DSSSL* をベースに開発された ) CSS (Cascading style Sheets) ・ HTML でも使用可能 ・シンプ丿レ XSL (eXtensibIe Stylesheet Language) ・要素の追加や並び替えが可能 ・条件分岐や繰り返し処理などを使った複雑な指定が可能 ・ CSS (Cascading style Sheets) CSS (Cascading style Sheets) は、 HTML 用に開発されたスタイルシート言語 で、 XML にも使うことができます。要素ごとに表示方法を指定するのが基本で、元 の文書を装飾するという働き方をします。 第 9 章 HTML / DHTML とクライアントサイドスクリプト (css) : p. 246 図 10-11 ・ CSS の考え方 <h 1 > 見出しく / hl > く P> <St 「 ong> </st 「 ong> この場所は強調表示しましよう ここは強調しましよう ・ XSL (eXtensibIe Stylesheet Language) XSL (eXtensible Stylesheet Language) は、 XML 用に開発されたスタイルシー ト言語で、 XSL 自身も XML で定義されています。データの内容による条件分岐や、 繰り返し処理などの制御文が使用できるほか、要素の追加や削除、並び替えなどの操 作も可能です。 【スキーマ言語】リスト処理用のプログラム言語。 【 DSSSL 】旧 0 月 EC 10179 で標準化されています。
第 9 章 HTML/DHTML とクライアントサイドスクリプト CSS の概要 ・ CSS のバージョン 現在、 CSSI (Cascading style Sheets, level 1 ) および CSS2 が勧告され、 CSS3 の作業原案 (Working Draft) * が発表されています。 CSS2 は CSSI の上位互換とし て作成されているので、 CSSI の設定はすべて CSS2 でも使用できます。 lnternet Explorer では、 4.0 以降が CSSI に、 5.0 以降が CSS2 に対応しています。 Netscape Navigator は CSSI 、 CSS2 ともに 4.0 以降で一部対応していますが、本格的 な対応は Netscape6.0 以降 * と考えたほうがよいでしよう。 いすれの場合も、 css の仕様をすべて満たしているというわけではなく、主だった 機能から実装されているようです * 。 ・カスケーディング スタイルシートは、 HTML 作成者が用意する外部スタイルシートや埋め込みスタ イルシートのほかに、 Web プラウザ標準のスタイルシートや、 Web プラウザを使用 するユーザが標準として準備するスタイルシートも用意することができます。 css では、このように複数の場所で設定したスタイルを混合できます。衝突してい ない宣言はそのまま、衝突した宣言は「 web プラウザくューザ < HTML 」の優先順位 で採用されます。このようなしくみをカスケーディングといいます。 図 9-14 ・カスケーディングと優先順位 ① HTML 文書に指定されているスタイルシート 0 0 優先順位 同じ優先順位のもので複数の宣言がある場合は後に読み込んだものが優先される ②ユーサが標準とするスタイルシート ③ Web ブラウサ標準のスタイルシート 0 ユーサ st 「 ong はひと回り大きく p の行間は 140% 低 0 ブラウザ 背景はクリーム色、文字は黒 HTML hl は赤、 h2 は青、 p の行間は 120% 250 背景はクリーム色、文字は黒 hl は赤、 h2 は青 st 「 ong はひと回り大きく、 P の行間は 120 % 【 working Draft 】作業原案。 W3C における規格策定作業における第一段階 ( p. 283 ) 。 【 Netscape のバージョン】 5.0 はリリースされず、バージョン 4.7x の次は、新しいソースコードを元にした Netscape 6 がリリースされました。 【 CSS 対応】 W3C の CSS'X—ジ (http://www.w3.org/StYle/CSS/) に、ブラウザの対応状況などの情報がありま す。仕様についてもこのページから確認できます。
第 9 章 HTM L/DHTM L とクライアントサイドスクリプト =CSS— 9-3 CSS (Cascading style Sheets) は、スタイルシートを書くための言語の 1 つで、 HTML では最も一般的です * 。 HTML の各要素ごとに、表示方法を細かく指定する =(Cascading StYIeSheets)= ・ヘッダ部で定義する み合わせて使用できます。 CSS を使うには ことができます。 Web ページでスタイルシートを使うには、次の 3 つの方法があります。これらは組 ・スタイルの定義 ・任意の要素の属性としてスタイルを記述する ・別ファイルで定義し、それを読み込む せで行ないます。セレクタと宣言については P. 251 で、プロバティについては P. 256 と宣言 (declaration) といいます。宣言は、プロバティ (property) と値の組み合わ 適用される場所」と「スタイルの内容」を指定します。これを、セレクタ (selector) HTML のヘッダ部で定義する場合や、別ファイルで定義する場合は、「スタイルが で、あらためて取り上げます。 図 9-13 ・セレクタと宣 セレクタ ( スタイルが適用される場所 ) ( スタイルの内容 ) 1 つのセレクタに対し、複数のスタイルを 定義したい場合は。 のように セミコロン ( : ) で区切ります。 途中に改行を入れてもかまいません p { line-height: 140 宅 } / 夫行の高さを 140 % にする☆ / プロ / ヾティ 値 / ☆ ~ ☆ / に挟まれた部分はコメント p 要素の 1 行の高さ (line-height) を ] 40 % にする。 ここでの % " は、フォントに対する割合 ( P. 253 ) 。 デフォルトは 1 OO % なので、通常の表示よりも行間が空くことになる。 【スタイルシート】 C SS のほかに JSS や XSL があります ( P. 224 ) 。 246
第 1 3 章 i モード・モバイル端末 ・ノートパソコン 携帯電話・ PDA 登場以前のオーソドックスな、・モバイル " がノートパソコンです。 小型・省電力のサプノートから、 B5 ~ A4 サイズのものが普及しています。 能力そのものはデスクトップパソコンと遜色なく、制限は画面のサイズくらいでし よう。画面サイズも、昨今はデスクトップ型で使われるモニタとあまり変わらないも のが出ています。 モバイル端末として使用する場合、携帯電話または PHS を使ってインターネット にアクセスします。携帯電話では一般に 9.6Kbps 、 28.8Kbps 、 PHS では 32Kbps 、 64Kbps での接続となります ( P. 92 ) 。 flu m モバイル環境と XML PDA などに対応した Web コンテンツは、テスクトップ環境で見ると見栄えが悪く、 貧弱な印象となりがちです。また、 HTML ではない独自のマークアップが必要になる端 末もあります。 そこで、端末ことにコンテンツを用意するという方法をとることが考えられます。こ 図 13-2 ・ XML + XSLT によるシングルソース・マルチュース 現しやすくなります。 のとき、 XML 十 XSLT を使うことで「シングルソース・マルチュース」 ( P. 278 ) が実 i モードなら ゲートウェイ ( P. 349 ) を 使う方法もあるね パソコン用 の HTML 十 スタイルシート XML 小型画面用 の HTML i モード用 の HTM L ・スタイルシートでもある程度は対応できるけれど、 i モードまで視野に入れると XML のほうが便利 なお、モバイル端末用の HTML として、 XHTML Basic が W3C から勧告されていま す ( P. 299 ) 。今後は、モバイル端末のような処理能力に制限のある端末用の Web ペー ジ記述言語が、 XHTML Basic に統一されることが期待されます。 346