9.3 CSS (Cascading StyIe Sheets) ・プロバティ ( 4 ) : 背景 "background" で、背景の色や画像を指定します。どのセレクタにも設定できるた め、文書全体 (body 要素 ) だけではなく、プロック単位・文字単位でも背景をつける ことができます。 ・背景の設定例 b0dy { background- C010r : SiIver ー ←背景色 background- url( . . /image/wall . gif) : ←背景画像 lmage : background-repeat : ←縦方向だけ繰り返して表示 repeat—y; なお、 background-image プロバティは継承されません。デフォルト値 ( 既定値 ) である transparent ( 透明 ) で、親要素の背景がそのまま表示されます。 図 9-17 ・「透明」の効果 ・同じ画像を指定した場合 ・ transparent を指定した場合 だから backg 「 ound-image は継承されないんだね 背景に画像を指定した場合は、画像がなくても文章が読めるように、画像と同じよ うな色を背景色に指定しておくのを忘れないようにしましよう。 表 9-19 ・背景の設定 背景色 しない background-color 背景画像 しない background-image url ( ) ,none 背景画像の並び しない background-repeat repeat : repeat-x : repeat-y ー no-repeat 背景画像の固定 しない background-attachment sc 「 0 旧 fixed 背景画像の位置 自分自身のサイズ しない backg 「 ound-position 背景をまとめて設定 background しない ※プロバテイや属性によっては、プラウザによりサポートされていないものもあります。 プロバティ名 意味 ( 下段 : 指定内容 ) 継承 % のターゲット 259

CSS (Cascading Style Sheets) ul および 01 要素で、リスト項目の先頭につけるマークを指定します。 list-style- ・プロバティ ( 2 ) : リスト 9.3 ul { list—style-image: url ( . ・ /images/dot . gif) } 01 { list-style-type: lower-alpha } ・ / 要素の定義例 ありかを http://からの絶対パスまたはスタイルシートからの相対パスで指定します。 image では、 url で画像ファイルを指定することも可能です。 url では画像ファイルの 表 9-17 ・リストの設定 list-style-type プロバティ名 list-style-position list-style-image list-style 意味 ( 下段 : 指定内容 ) リストのマークの種類 継承 する % 指定時のターゲット disc,circle,square,decimal,decimal-leading-zero,lower-roman,upper- roman,lower-greek,lower-alpha,lower-latin,upper-alpha,upper- latin,hebrew,armenian,georgian,cjk-ideographic,hiragana,katakana, hiragana-iroha,katakana-iroha,none リストのマークの表示位置 inside,outside リストのマーク画像 uri ( ) ,none リストをまとめて設定 する する する (list-st le-t e list-st 厄 - osition list-st le-ima e の順で指定 ) 図 9-16 ・枠線と余白の指定 p 要素や blockquote 、 div などの、プロック系要素 ( P. 23D で使用します。 "margin" と "padding" で余白を、 "border" で境界線のスタイルを設定します。 ・プロバティ ( 3 ) : 枠線と余白 ※プロバテイや属性によっては、プラウザによりサポートされていないものもあります。 257 "-bottom" 、 "-left" をつけて個々に指定することも可能です。 それぞれ、 " 上、右、下、左 " の順で値を指定できるほか、 "margin-top" のように 親要素自要素のエリア ーー ! あいうえお・ マージンバディング -right" -top

第 9 章 HTM し DHTML とクライアントサイドスクリプト ・色の指定 文字や背景などの色は、色の名前を使った指定と、 RGB の混合比を使った指定およ windowtext } システムカラーによる指定 black } 色名による指定 # 3 3 6 6CC } RGB 混合比による指定 びシステムカラーを使った指定が可能です。 ・ RGB 混合比 h3 { C010 て : h2 { C010r : hl { C010r : ・色指定の例 す。 16 進数、 10 進数、パーセントの 3 通りが使用できます。 光の 3 原色である R (red) ・ G (green) ・ B (blue) の 3 つの混合比で表す方法で 表 9-13 ・ RGB 混合比 16 進数 1 0 進数 パーセント #RRGGBB #RGB rgb (R,G, B) RR 、 GG 、 BB それぞれを、 00 ~ FF の 16 進数で表記 簡略表記。 # 36C ならば # 3366CC として扱われる R 、 G 、 B を 0 ~ 255 の 10 進法で表記 R 、 G 、 B を 0 % ~ 100 % で表記 色の選択とアクセシビリティ Web のアクセシビリティ (accessibility : 利用しやすさ ) は、色だけで決まるわけで はありません。しかし、色も重要なファクターの 1 つです。色の見え方は、使用するソフ トウェアやハードウェア、部屋の照明、読み手側の視力などの影響を受けやすく、こく わすかな配色の違いで読みやすくなったり、逆にまったく読めなくなることもあります。 インターネットにはさまざまな人が参加しています。ちょっとした工夫で、アクセシ ビリティを向上させることができます。 資料 ころ Web ( アクセシビリティの指針なと ) : http://www.kokoroweb.0「g/ バリアフリーの扉 : http://www.ibm.com/jp/accessibility/ 色覚に障害を持っていたとしたら、あなたのサイトは見えるでしようか ? : http://www.microsoft.com/japan/developer/workshop/design/color/ hessl 0092000. asp 254

第 9 章 HTM し DHTML とクライアントサイドスクリプト ・ボディ部の要素 ( 5 ) : インライン系要素 インライン系の要素は、プロックの中にリンク (a) や画像 (img) を埋め込んだり、 表 9-9 ・インライン系要素のタグ 文章の一部に意味づけを加える (strong など ) ものがあります。 論理的な 意味付け を加える 表示状態 を指定す る lmg Object script bdo map area span リンク。リンク先をく ah 「 ef = " u 日 " > で指定できるほか、く aname = アンカー名を定義することができる 埋め込み画像 埋め込みオブジェクト スクリプト ( P. 261 ) 強制改行 けや装飾を行なうコンテナ * として使用する うときに使用する。 span 自身には意味はなく、属性やスタイルシートで意味づ グループ化。ある範囲を区切りたいが、ほかのインライン要素では表せないとい 工リア。クライアントサイドイメージマップ中の領域とリンクを指定する クライアントサイドイメージマップ ビア語など右から表記する文を埋め込むようなとき使用する 表記の方向。日本語や英語のような左から表記する文の中に、ヘブライ語やアラ St 「 ong COde samp kbd var dfn abbr acronym Cite big sup 強調 ( 斜体字で表示されることが多い ) 強調 ()m より強い。太字で表示されることが多い ) 短い引用 プログラムコード ( 等幅で表示されることが多い ) 出力サンプル 入力サンプル 変数。状況によって値が変化する部分 定義用語 略語 頭字語 出典 太字 大きい字 等幅 上付文字 small sub 斜体字 ( イタリック ) 小さい字 下付文字 ・ TransitionaI DTD (Loose DTD) 追加分 basefont べースフォント。全体で使用するフォントの種類やサイズ、色を指定 font フォントの種類やサイズ、色を指定 if 「 ame 行内フレーム ( p. 241 ) applet アプレット (object 要素による指定が推奨 ) strike 表示状態を 指定する 打ち消し線 打ち消し線 下線 【コンテナ (container) 】 P. 232 脚注。 238

第 9 章 HTM 凵 DHTML とクライアントサイドスクリプト CoIumn CSS の文法チェッカ CSS も、 HTML 同様、文法チェッカがあります ( P. 239 コラム ) 。スタイルシートを いくら指定しても反映されないという場合、 Web プラウサが対応していないケースもあ りますが、指定内容がまちがっている可能性もあります。また、自分の環境ではなんと なく表示できてはいるものの、指定方法が正しくなかったりすることもあるでしよう。 この場合、他の環境ではどう表示されるかわかりません。 文法チェッカを使うことで、少なくとも文法的にまちがっていないかどうかを確認で きます。このほか、推奨される指定方法なども知ることができます。 なお、スタイルシートを外したときの表示内容も必す確認しましよう。無味乾燥な表 示になるかもしれませんが、たとえスタイルシートがなくとも、きちんと意味が通るデ ータとなっていることが大切です。 資料 W3C CSS 検証サービス (CSS) : http://jigsaw.w3.org/css-validator/ WDG CSSCheck (CSS) : http://www.htmlhelp.com/tools/csscheck/ 260

第 9 章 HTML/DHTML とクライアントサイドスクリプト ・セレクタをまとめて定義する h3 ′ h4 ′ h5 ′ h6 { height 100%; underline; text—decoration line— hl ′ h2 ′ ← hl ~ h6 をまとめて定義 ←下線付きで表示 「引用中の強調部分は赤字で表示する」のように、特定要素の子要素であるときだけ スタイルを指定したい場合は、セレクタをスペースで区切って、 " 親要素子要素 " の ように指定します。 ・特定要素の子要素だけ定義する 親要素 子要素 ↓ blockquote em { C010r : red } <blockquote>'V く /blockquote> 中の em 要素は赤い文字で表示される ・セレクタ ( 2 ) : 属性による限定 セレクタを「要素名 # ID 」または「要素名 . クラス名」と定義すると、要素すべてで はなく、 id や class 属性を特定した指定が可能となります。 id は要素に固有の ID をつけるための属性で、 1 つの文書内で同じ名前をつけること はできません。 class は要素にクラス名をつけるもので、 ID と違い同じ名前を何度も 使うことができます。 ・ id 属性を使用する場合 strong#warnig { C010r : red } <strong id="warning">&</strong> と指定された箇所だけ赤 (color:red) で表示される ・ class 属性を使用する場合 strong . warnxng { C010r red } <Strong class="warning">&</strong> と指定された箇所だけ赤 ( co 「 : 「 ed ) で表示される 252

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 なお、各値に対応

10.2 XHTML (eXtensible HyperText Markup Language) ・名前空間 ( ネームスペース ) の指定 XML 文書で使用する名前空間 ( P. 276 ) は "xmlns=" で示します。 p. 294 のサンプ ルでは、 <html> タグの中で・・ xmlns= " http://www.w3.org/1999/xhtm1 " " を指 定しているので、 html 要素内におけるデフォルトの名前空間は、 "http:// www.w3.org/1999/xhtml" で定義されたものとなります。 また、名前空間の省略名を定義することもできます。以下は、標準の名前空間の他 に、書籍情報を定義するため名前空間 "bk" という名前で使うためのサンプルです。 ・ネームスペースの指定の例 <html xmlns="http: / / . w3 . org/ 1999 / xh し ml " xmlns=bk: "http: //member. nifty. ne . jp/village/book"> く P>XML と XHTML については、く bk : auther> 西村めぐみく / bk : auther> による く bk : し土し le > 「図解でわかる web アプリケーションのすべて」く / bk : し itle > という 本の中でも紹介されています。せひ参照してください。 く /P> く / h にⅢ 1 > ・使用言語 XML 文書が何語で書かれているかは "xml:lang= 語名 " " で示します。 xml:lang 属性は、 HTML での lang 属性と同じ役割で、 XHTMLI. 0 では互換性のため く h し ml ilns = " h しし p : / / . w3.org/1999/xh しⅢ 1 。 11 : lang = 勹 a " ・使用言語を日本語に指定する例 日本語による文書の場合は、次のように指定します。 に両方定義できるようになっています * (lang 属性】 XHTMLI. 1 では ng 属性が廃止され、 x 」 ang 属性のみの指定となります。 297

9.3 CSS (Cascading StyIe Sheets) 要素名を指定せす匚クラス名」のように、クラス名または ID 名だけで宣言するこ とも可能です。 ・クラス名 / 名だけでの宣 . memo { C010r : green } #first { C010r : blue } 要素を問わず、 class="memo" とした部分は緑色で 表示される 要素を問わず、 id="first" とした部分は青で表示される このほか、リンクしている部分については、「表示したことがある / ない」などの状 態ごとにスタイルを設定できます。これを疑似クラスといいます。 ・疑似クラスの例 a:link { C010r : blue } a:visited { C010r : purple } 通常の状態 ( リンク先を表示したことがない ) リンク先を表示したことがある a:active { C010r : red; background: silver } 現在選択中 a:hover { background: teal } マウスが上に来ている状態 a:focus { background: maroon } キーポードなどでフォーカスが与えられた 状態 * ・サイズの指定 フォントやマージンなどのサイズを指定するときには、さまざまな単位が使用でき ます。しかし、 mm ( ミリメートル ) や pt ( ポイント ) などを使った絶対値でスタイル シートを指定すると、ユーザ側でサイズが調整できなくなることがあります。使用す るディスプレイやユーザの視力によって、読みやすいサイズが異なります。調整の余 地を残すために、なるべく em や % などの相対値を使いましよう。 表 9-12 ・サイズ指定の単位 ・絶対的な大きさを表す単位 cm in pt C センチメートル ミリメートル インチ ( 1 インチ = 2.54cm ) ポイント ( 72 ポイント = 1 インチ ) パイカ ( 1 パイカ = 1 2 ポイント ) ・相対的な大きさを表す単位 em ex px 【 hover す。 使用されているフォントの幅 ( lem = 1 文字分のように捉えればよい ) 文字“ x ”の高さ ピクセル パーセント ( なにに対する割合かはプロバティによって異なる ) 、 focus 】 CSS2 で追加された疑似クラス ( ダイナミック疑似クラス ) で、一部未対応のブラウザがありま 253

3.1 World Wide Web とは データが表示されるまで それでは、 Web プラウザに画面を表示するまでの流れを見てみることにしましょ う。たとえば、画像が表示される web ページは、次の手順で表示されています。 図 3-6 ・データが表示されるまでの流れ 0 Web ブラウサ アドレス (URL) を解析して Web サーバにリクエスト リクエストされたデータ ( ここでは HTML ファイルの内容 ) を返す 受け取った HTML データを 解析して表示 WELCOME ようこそ〇〇のページへ ←〇 0 WELCOM E HTML データ中に指定されている 画像ファイルをリクエスト リクエストされたデータ ( ここでは 画像ファイルの内容 ) を返す 0 画像を表示 0 〇 0 を必要な分だけ繰り返す Web ブラウザが HTML を解析して 要求しているんだね 0 へ ジ よ ←〇 0 Web プラウザは、指定された URL に従って、 Web サーバにデータをリクエストし ます。 Web サーバは、リクエストされたデータをリクエスト元に返します。 こまで がワンセット ( セッション ) です。 Web サーバは、 HTML ファイルが要求されたら、 HTML ファイルだけを返しま す。 HTML ファイルの中で、画像を表示するように指定されている場合、 web プラ ウザはあらためて必要なファイルを要求します。