Web Information System Design No.3 Web 文 書 にスタイルを 付 ける Tatsuya Hagino (hagino@sfc.keio.ac.jp) 1
Webページの 構 成 要 素 直 交 技 術 を 組 み 合 わせる 内 容 スタイル プログラミング スタイル プログラミング JavaScript CSS Webページ Web 文 書 HTML 内 容 2
内 容 と 表 示 内 容 情 報 データ Webページのもっとも 重 要 な 部 分 表 示 ( 表 現 ) スタイル 飾 り デザイン 内 容 をいかに 見 せるか 3
内 容 と 表 示 の 分 離 分 離 する 利 点 HTMLの 役 割 がはっきりする 内 容 を 変 えずにスタイルだけを 変 えることができる 複 数 の 文 書 で 同 じスタイルを 共 有 できる サイト 全 体 を 統 一 することができる ユーザがスタイルを 変 えることができる アクセシビリティの 向 上 CSS Zen Garden http://www.csszengarden.com/ stylesheet stylesheet share user choice HTML HTML HTML 4
CSSとは? 構 造 化 文 書 に 表 示 を 与 える HTML 文 書 に 主 に 用 いられるがXMLアプリケーション 一 般 に 使 うこ ともできる. 内 容 と 表 示 の 分 離 内 容 を 書 きやすい サイトの 管 理 が 容 易 になる アクセシビリティが 上 がる CSSの3つのレベル CSS1 (Cascading Style Sheets, level 1) http://www.w3.org/tr/rec- CSS1-961217.html CSS2 (Cascading Style Sheets, level 2) http://www.w3.org/tr/rec- CSS2 CSS3 (Cascading Style Sheets, level 3) 5
HTMLでCSSの 与 え 方 HTMLのheadに 記 述 する CSSファイルをリンクする <!DOCTYPE HTML> <html> <head> <title>bach's home page</title> <style type="text/css"> h1 { color: blue } </style> </head> <body> <h1>bach's home page</h1> <p>johann Sebastian Bach was a prolific composer.</p> </body> </html> style 属 性 を 用 いる <h1 style="color: blue">bach's home page</h1> <p>johann Sebastian Bach was a prolific composer.</p> <!DOCTYPE HTML> <html> <head> <title>bach's home page</title> <link rel="stylesheet" href="bach.css" type="text/css" /> </head> <body> <h1>bach's home page</h1> <p>johann Sebastian Bach was a prolific composer.</p> </body> </html> CSSファイル h1 { color: blue; text-align: center; } 6
CSSの 書 き 方 セレクタにより 適 応 箇 所 を 指 定 要 素 名, ID, パターン 属 性 と 値 を 並 べて 書 く 宣 言 的 宣 言 的 vs 手 続 き 的 body { font-family: "Gill Sans", sans-serif; font-size: 12pt; margin: 3em; } 継 承 とカスケード 子 要 素 は 親 要 素 の 属 性 を 継 承 する 複 数 のスタイルシートをカスケードする 7
宣 言 的 vs 手 続 き 的 宣 言 的 単 純 に 記 述 する 規 則 を 並 べる 編 集 が 可 能 細 かく 書 かないといけないので 面 倒 手 続 き 的 8 手 続 きを 書 く プログラム 編 集 が 難 しい プリミティブは 少 なくて 済 む プログラム 修 正 が 難 しい 出 力
セレクタ スタイルを 適 用 する 要 素 を 指 定 パターンマッチ Pattern Meaning * Matches any element. E E F Matches any E element (i.e., an element of type E). Matches any F element that is a descendant of an E element. E > F Matches any F element that is a child of an element E. E:first-child E:link E:visited E:active E:hover E:focus Matches element E when E is the first child of its parent. Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited). Matches E during certain user actions. 9
セレクタ( 続 き) E:lang(c) Pattern Meaning Matches element of type E if it is in (human) language c (the document language specifies how language is determined). E + F Matches any F element immediately preceded by an element E. E[foo] E[foo="warning"] E[foo~="warning"] E[lang ="en"] E.warning E#myid Matches any E element with the "foo" attribute set (whatever the value). Matches any E element whose "foo" attribute value is exactly equal to "warning". Matches any E element whose "foo" attribute value is a list of spaceseparated values, one of which is exactly equal to "warning". Matches any E element whose "lang" attribute has a hyphen-separated list of values beginning (from the left) with "en". HTML only. The same as E[class~="warning"]. Matches any E element ID equal to "myid". 10
セレクタの 例 グルーピング h1, h2, h3 { font-family: sansserif } 子 孫 h1 { color: red } em { color: red } h1 em { color: blue } 子 供 body > p { line-height: 1.3 } div ol > li p 属 性 h1[title] { color: blue; } span[class=example] { color: blue; } a[rel~="copyright"] *[lang ="en"] { color : red } class 属 性 *.pastoral { color: green }.pastoral { color: green } *[class~="pastoral"] { color: green } j1.pastoral { color: green } p.pastoral.marine { color: green } 隣 math + p { text-indent: 0 } h1 + h2 { margin-top: -5mm } ID h1#chapter1 { text-align: center } 11
疑 似 クラスと 疑 似 要 素 疑 似 クラス div > p:first-child { text-indent: 0 } a:link { color: red } /* unvisited links */ a:visited { color: blue } /* visited links */ a:hover { color: yellow } /* user hovers */ a:active { color: lime } /* active links */ :lang(fr) > q { quotes: '<<' '>>' } 疑 似 要 素 p:first-line { text-transform: uppercase } p:first-letter { font-size: 200%; font-style: italic; font-weight: bold; float: left } h1:before { content: counter(chapno, upper-roman) ". " } body:end { content: "The End" } 12
カスケード 13 複 数 のスタイルシート 著 者 のスタイルシート 利 用 者 のスタイルシート ブラウザ(ユーザエージェント)のスタイルシート 優 先 度 1. 利 用 者 が!important と 指 定 したもの 2. 著 者 が!important と 指 定 したもの 3. 著 者 の 指 定 4. 利 用 者 の 指 定 5. デフォールト セレクタの 順 1. IDによる 指 定 (インラインを 含 む) 2. 属 性 による 指 定 3. 要 素 による 指 定 同 順 の 場 合 より 限 定 されたものを 順 位 が 高 いと 考 える @import で 取 り 込 まれたものは 最 初 に 取 り 込 まれたと 考 え 優 先 度 は 低 い 著 者 スタイルシート CSS CSS CSS HTML 利 用 者 スタイルシート /* From the user's style sheet */ p { text-indent: 1em! important } p { font-style: italic! important } p { font-size: 18pt } ユーザエージェント スタイルシート /* From the author's style sheet */ p { text-indent: 1.5em!important } p { font: 12pt sans-serif!important } p { font-size: 24pt }
セレクタと 継 承 とカスケード 祖 先 親 継 承 カスケード ユーザエー ジェント スタイル シート #id セレクタ 継 承 より 限 定 カスケード 著 者 スタイル シート ユーザ スタイル シート.class 14
実 際 の 値 の 計 算 1. 指 定 された 値 カスケードの 値 を 用 いる 親 要 素 から 継 承 された 値 を 用 いる デフォールト 値 を 用 いる 2. 計 算 された 値 絶 対 的 な 値 (px, cmなど)はそのまま 相 対 的 な 値 (em, %など)は 絶 対 的 な 値 を 計 算 する 3. 実 際 の 値 可 能 な 値 にまるめる 15
ボックスモデル ブロックボックス 段 落 用 垂 直 につながる インラインボックス 段 落 内 の 文 書 要 素 用 横 につながる 親 のブロックボック スをはみ 出 すと 改 行 16
位 置 の 指 定 Containing block 子 要 素 を 描 画 する 箱 子 要 素 は 親 要 素 のcontaining block 内 におか れる はみ 出 しても 構 わない 初 期 containing block ルート 要 素 のcontaining block width とheight 属 性 で 大 きさを 指 定 widthがautoのときはviewportの 幅 を 使 う heightがautoの 場 合 は 自 動 的 に 伸 びる 位 置 の 指 定 position: static 通 常 の 配 置 position: relative 相 対 的 に 位 置 をずらす position: absolute containing boxにおける 位 置 を 指 定 position: fixed viewportにおける 位 置 を 指 定 Float box float:left と float:right でしたいされた 箱 を 左 あるいは 右 に 移 動 させる 移 動 後 にblock boxは 重 なりを 関 係 なく 配 置 inline boxはfloatと 重 ならないように 配 置 clear 属 性 でblock boxとfloatを 重 ならないよ うに 指 定 することも 可 能 17
レイアウト 例 Menu Main content <body> <section> Menu </section> <article> Main content </article> </body> section { float: left; width: 200px; } article { left-margin: 210px; } 18
音 声 スタイルシート volume speak pause-before, pause-after cue-before, cue-after play-during azimuth, elevation (3 dimensional sound) speech-rate, voice-family, pitch, pitch-range, stress, richness speak-punctuation, speak-numeral 19
まとめ 原 理 宣 言 的 vs 手 続 き 的 スタイルシート 内 容 と 表 示 の 分 離 CSS セレクタ カスケード 継 承 20