View
1
Download
0
Category
Preview:
Citation preview
Web Information System Design
No.3 Web文書にスタイルを付ける
Tatsuya Hagino (hagino@sfc.keio.ac.jp)
1
Webページの構成要素
2
直交技術を組み合わせる 内容
スタイル
プログラミング
Webページ Web文書
HTML 内容
スタイル
CSS
JavaScript
プログラミング
内容と表示
3
内容
情報
データ
Webページのもっとも重要な部分
表示（表現）
スタイル
飾り
デザイン
内容をいかに見せるか
内容と表示の分離
分離する利点
HTMLの役割がはっきりする
内容を変えずにスタイルだけを変えることができる
複数の文書で同じスタイルを共有できる
サイト全体を統一することができる
ユーザがスタイルを変えることができる
アクセシビリティの向上
4 HTML
stylesheet
HTML HTML
stylesheet
user choice share
http://www.csszengarden.com/
CSS Zen Garden
CSSとは？
5
構造化文書に表示を与える
HTML文書に主に用いられるがXMLアプリケーション一般に使うこともできる．
内容と表示の分離 内容を書きやすい サイトの管理が容易になる アクセシビリティが上がる
CSSの３つのレベル 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)
HTMLでCSSの与え方
6
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>
<!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>
h1 {
color: blue;
text-align: center;
}
CSSファイル
<h1 style="color: blue">Bach's
home page</h1>
<p>Johann Sebastian Bach
was a prolific composer.</p>
style属性を用いる
CSSの書き方
7
セレクタにより適応箇所を指定 要素名, ID, パターン
属性と値を並べて書く 宣言的
継承とカスケード 子要素は親要素の属性を継承する
複数のスタイルシートをカスケードする
宣言的 vs 手続き的
body { font-family: "Gill Sans", sans-serif; font-size: 12pt; margin: 3em; }
宣言的 vs 手続き的
8
宣言的
単純に記述する
規則を並べる
編集が可能
細かく書かないといけないので面倒
手続き的
手続きを書く
プログラム
編集が難しい
プリミティブは少なくて済む
プログラム 出力
修正が難しい
セレクタ
9
スタイルを適用する要素を指定
パターンマッチ
Pattern Meaning
* Matches any element.
E Matches any E element (i.e., an element of type E).
E F 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 Matches element E when E is the first child of its parent.
E:link E:visited
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).
E:active E:hover E:focus
Matches E during certain user actions.
セレクタ（続き）
10
Pattern Meaning
E:lang(c) 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] Matches any E element with the "foo" attribute set (whatever the value).
E[foo="warning"] Matches any E element whose "foo" attribute value is exactly equal to "warning".
E[foo~="warning"] Matches any E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "warning".
E[lang|="en"] Matches any E element whose "lang" attribute has a hyphen-separated list of values beginning (from the left) with "en".
E.warning HTML only. The same as E[class~="warning"].
E#myid Matches any E element ID equal to "myid".
セレクタの例
11
グルーピング h1, h2, h3 { font-family: sans-
serif }
子孫 h1 { color: red } em { color: red } h1 em { color: blue }
子供 body > p { line-height: 1.3 } div ol > li p
隣 math + p { text-indent: 0 } h1 + h2 { margin-top: -5mm }
属性 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 }
ID h1#chapter1 { text-align: center }
疑似クラスと疑似要素
疑似クラス 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 で取り込まれたものは最初に取り込まれたと考え優先度は低い
/* 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 }
HTML
CSS CSS CSS
著者 スタイルシート
利用者 スタイルシート
ユーザエージェント スタイルシート
セレクタと継承とカスケード
14
カスケード
より限定 #id
.class
親
継承
祖先
継承
著者 スタイルシート
ユーザ スタイルシート
ユーザエージェント スタイルシート
セレクタ
カスケード
実際の値の計算
1. 指定された値
カスケードの値を用いる
親要素から継承された値を用いる
デフォールト値を用いる
2. 計算された値
絶対的な値(px, cmなど)はそのまま
相対的な値（em, %など）は絶対的な値を計算する
3. 実際の値
可能な値にまるめる 15
ボックスモデル
16
ブロックボックス 段落用 垂直につながる
インラインボックス 段落内の文書要素用
横につながる 親のブロックボックスをはみ出すと改行
位置の指定
17
Containing block 子要素を描画する箱
子要素は親要素のcontaining block内におかれる
はみ出しても構わない
初期containing block ルート要素のcontaining block
width とheight属性で大きさを指定
widthがautoのときはviewportの幅を使う
heightがautoの場合は自動的に伸びる
Float box float:left と float:right でしたいされた箱を左
あるいは右に移動させる
移動後にblock boxは重なりを関係なく配置
inline boxはfloatと重ならないように配置
clear 属性でblock boxとfloatを重ならないように指定することも可能
位置の指定 position: static
通常の配置
position: relative
相対的に位置をずらす
position: absolute
containing boxにおける位置を指定
position: fixed
viewportにおける位置を指定
レイアウト例
18
Menu Main content
<body> <section> Menu </section> <article> Main content </article> </body>
section { float: left; width: 200px; } article { left-margin: 210px; }
音声スタイルシート
19
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
まとめ
20
原理
宣言的 vs 手続き的
スタイルシート
内容と表示の分離
CSS
セレクタ
カスケード
継承
Recommended