情報システム技術論’02 ＃ 3
久野靖∗

2002.6.13

はじめに1<style type="text/css">p { color: blue }</style>□ 前回の感想 (?)□ 方法 3:• これを機会に自分の Web ページを作ろうと思う• 他人がどんなサイトを見ているか/気に入っているか

link 要素を使って別ファイルに (今回使う)<link rel="stylesheet" href="st1.css"><link rel="alternate stylesheet" titie="X" href="..."><link rel="alternate stylesheet" titie="Y" href="...">が興味深い• 自分と他の人とでユーザビリティに対する見方が違っているのが興味深い• 入れる場所は<head>...</head>の内側• 代替スタイルシートはいくつでも指定してよい。ブ
ラウザのメニューで選択可能に (Mozilla)□ 今回の内容…

• CSS level 2 を一通り学ぶ• CSS を使うとここまでできる! という実例を見て

2.2

みる

CSS の処理モデル• (演習) サンプルページに自分で CSS 指定をつけて □ CSS 指定されたドキュメントは次のように処理される
みる• ドキュメント→木構造に変換• メディア種別 (画面、紙、プロジェクタ等) を決定

2

CSS level 2• 木構造の各要素のプロパティを計算• 整形出力される構造を生成→出力□ CSS == Cascading StyleSheet(直列スタイルシート)• HTML におけるスタイルシートの標準として W3C が取

2.3

りまとめ

□ CSS 記述→ルールセットの集まり□ 「直列」とは?

h1 { color: blue; margin-reft: 1cm }• Web のスタイル指定→ 1 つの要素に対して複数のスタイル指定が関与• 例:

CSS の構文• この「{ ...

全体指定、個別指定、作者指定、ユーザ指定、ブラウザ指定}」は「ブロック」と呼ばれる□ 「@ルール」→特別な指定であり、次の形のいずれか@名前 … ;@名前 … { ... }• これらを「順に並べて」優先度の高いものを適用→「直列」• 先頭部分にない (通常のルールセットが始まった後2.1にある)@ルール、ブロックの内側の@ルールは「無視CSS の指定方法□ 方法 1:される」

個別の HTML 要素の style 属性で指定□ ルールセットの冒頭→どの要素に対してルールセットを適用するかの指定→「セレクタ」と呼ばれる<p style="color: blue">...</p>□ 方法 2:セレクタ { 宣言 ; 宣言; … }style 要素でその場に指定 (前回やった)∗ 筑波大学大学院経営システム科学専攻1• 1 つのルールセットを同じセレクタを持つ複数のルー

2.5

ルセットに分けても意味は変わらない

疑似要素と疑似クラス□ 疑似クラス→ HTML にマークアップされていない「こう• 「宣言」は「プロパティ名:値」という形をしているいう要素」という指定• プロパティ名または値が正しくない宣言は「無視さ• 「DIV>P:first-child」→「並んでいるうちで最初の〜」

れる」□ CSS ではさまざまな種類の値を扱う→それぞれに記法が• 「A:link」「A:visited」→未訪問/訪問すみのリンク

決まっている• 「A:hover」「A:active」「A:focus」→上にカーソ
ルがある/上でマウスボタンが押された状態/フォー□ 数値→整数、実数 (少数点つきの数)□ 長さ→数値の後ろに単位をつける

カスされている• 絶対単位→ in(インチ)、cm(センチ)、mm(ミリ)、pt(ポイント)、pc(パイカ)• 相対単位→ em(フォントサイズ)、ex(文字 x の高さ)、px(ピクセル)• 「*:lang(ja)」→日本語である□ 記事クラスに類似しているが、HTML でマークアップされていない要素の一部分等• px が相対単位なのは面白い (45p)。「手を伸ばした長さで 0.28mm」• 「P:first-line」→最初の行• 「P:first-letter」→最初の 1 文字• 「X:before」「X:after」→要素 X の直前/直後□ 百分率→「数値%」□ URI(=URL+URN) →「url(指定)」□ 色→「#rrggbb」または「rgb(整数, 整数, 整数)」また

2.6

は「rgb(百分率, 百分率, 百分率)」

値の設定と継承□ 値の設定は次の順番による□ 角度→単位 deg(度)、grad(グラディエント)、rad(ラ• 直列順により決まった値がある→それを使うジアン) をつける
□ 時間→単位 ms(ミリ秒)、s(秒)• それ以外で、値が継承されてきている→それを使う□ 周波数→単位 Hz(ヘルツ)、kHz(キロヘルツ)• それ以外なら、初期値 (デフォルト値) を使う□ 文字列→「"..."」または「’...’」、内側に同じ文字が □ 継承→プロパティの指定値が「inherit」であると、外くるときはバックスラッシュでエスケープする側 (親) 要素の指定値を引き継いで来る

2.4• 継承のあるプロパティとないプロパティとがある

セレクタ• 色の場合は「透明」もある (下地が透けて見える)□ 「どの要素に対する指定か」を表す
H1, H2, H3 { ... }これは次のと同じ
H1 { ... }H2 { ... }H3 { ... }2.7

直列 (Cascading)□ スタイル指定の出どころ→ Athor(元ファイルの指定)、User(読み手の指定)、UA(ブラウザの指定)□ 「*」→すべての要素にマッチ• スタイル指定の後ろに「!important」と指定することで優先度を上げられる□ 「H1」など→その名前の要素を指定□ 「H1 EM」など→「〜の中の〜」□ これらのスタイル指定を次の順に並べる (直列順 ---□ 「OL>LI」など→「〜の直接の子供である〜」

Cascading Order)□ 「H1+H2」など→「〜の直後にある〜」• 各要素ごとにセレクタがマッチするすべての指定を□ 「[属性名]」、「[属性名=値]」→「その属性を持つ/そ集めるの属性の値が〜である」• 重み順に並べる。弱い方から UA → User → Author →□ 「X. クラス名」→「X[class="クラス名"]」と同じ

Author の!important → User の!important、の順
番□ 「X#名前」→「id 属性の値が指定した名前であるよう• 同じ順位の中では特定度の高いものを優先な要素」

2

• それでも同じ順位の中では後から指定されたものを整形モデル

2.10

優先

□ HTML の要素は「ブロックレベル」(行単位の箱) と「イ□ 特定度の計算→セレクタの書き方で分かる。まず ID のンラインレベル」(行の中に入る箱) に分かれる。

一致するもの→同じなら属性条件の数が多いもの→それ• <p>...</p>、<h1>...</h1>、<div>...</div>→ブも同じなら要素名の数が多いもの

ロック• <em>...</em>、<span>...</span>→インラインメディア種別

2.8□ 外側の「窓の箱」→箱の中に順次箱を入れて配置して□ 出力メディアに応じてスタイルを調整する機能は当然いく

必要□ ☆ display --- 各要素の整形種別を指定□ メディア種別→ p80 参照• 取 れ る 値 → none、block、inline、list-item、□ 特定種別用のスタイル指定→@import または@media でmarker、run-in、compact、その他 table 用@import url(print.css) print ;@media print {BODY { font-size: 10pt }}□ ☆ position --- 位置指定

• 取れる値→ static(通常)、relative(相対的にずらす)、absolute (絶対位置指定)、fixed(固定→窓の特定位置に固定など)

箱モデル

2.9

□ ☆ top、right、bottom、left --- 外側の箱からどれ□ そ れ ぞ れ の 要 素 は 内 側 か ら Content(内 容) →くらいアケルかPadding(詰 め も の) → Border(枠 な い し 縁) →□ 整形コンテキスト→ 2 つのモード
Margin(余白)、の順で並んでいる (p82)• ブロックコンテキスト→ブロックの箱を縦に積み重ねて行く□ 隣接する要素のマージンどうしは併合される (p84)• ただし float な要素や postion 指定つき要素の場合は併合しない□ ☆

• インラインコンテキスト→要素をつめて 1 行ずつ行の箱を作る

margin-top、margin-right、margin-bottom、margin-left□ フ ロ ー ト 指 定 の 箱 → 右 づ め/ 左 づ め に し て 流 し 込 み□ ☆ padding-top、padding-right、padding-bottom、

padding-left、padding
border-top-width、border-right-width、
border-bottom-width、border-left-width、• 取れる値→ left、right、none、inherit□ 任意の要素に「流し込みを終わらせる」機能を持たせら

border-widthborder-top-color、border-right-color、

border-bottom-color、border-left-color、
border-color

れる□ ☆ clear --- 流し込み終わり

border-top-style、border-right-style、• 取れる値→ left、right、both、none、inherit□ 絶対位置指定→任意の場所に箱を配置できる

border-bottom-style、border-left-style、
border-style• 取れる値→(p109-111)□ ☆ float --- フロート指定

□ ☆

□ ☆

relative の場合、「ずらす」ことができる□ ☆ margin --- 上の 4 つをまとめて指定□ ☆

□ 詰め込み終わった後で position:• さらに「top:none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset

auto」などを使って「本来の位置」にもできる□ ☆ z-index → 「重なり順」を制御する数値• ☆ border --- 「幅 スタイル 色」をまとめて指定□ ☆ width、min-width、max-width →幅を指定□ ☆ height、min-height、max-height →高さを指定

3□ ☆ line-height →行の高さ (行間隔) を指定□ ☆ list-style-position --- マーカの位置□ ☆ vertical-align →縦方向の位置• 取れる値→ inside、outside、inherit• 取 れ る 値 →baseline、sub、super、top、 □ ☆ list-style --- 上 3 つをまとめて指定
text-top、middle、bottom

2.13

視覚効果

2.11

ページメディア□ ページ単位で表示される媒体→ページの大きさ、ページ□ ☆ overflow → 箱からあふれた内容をどう表示するか替えなど (今回は使わないので省略)• 取 れ る 値 → visible、hidden、scroll、auto、
inherit

2.14□ ☆ clip → クリッピング領域を指定□ ☆ color、background-color --- 色、背景色• 取れる値→ rect(上 右 下 左)、auto、inherit□ ☆ background-image --- 背景画像の URI□ ☆

background-repeat → repeat、repeat-x、repeat-y、no-repeat、inherit□ ☆ visibility → 見え方の指定• 取れる値→ visible、hidden、collapse、inherit□ ☆

background-attachment → scroll、fixed、
inherit

生成コンテンツ

2.12

色と背景

□ ☆ background-position → 百 分 率 x2、長 さ x2、top/center/bottom、left/center/right□ 一般に「HTML 上には書かれてないものを挿入」□ :before、:after と content プロパティを併用→前/後 □ ☆ background --- 上記をまとめて指定に文字列を挿入可□ ☆ content →生成するコンテンツ

2.15

フォント

• 取 れ る 値 → 文 字 列 、url(...)、attr(属 性 名)、 □ ☆ font-family → ファミリ名の並び
open-quote、close-quote、no-open-quote、• ファミリ名と実際のフォントの対応は@font-face でno-close-quote、カウンタ指定可能□ ☆ quotes →引用符として使う文字列を指定• 汎用ファミリ名→どこでも使える (はず)。serif、
sans-serif、cursive、fantasy、monospace の 5□ ☆ counter-reset、counter-increment →カウンタ機つがある

能 ( 略)□ 箇条書きのマーカ→一種の生成コンテンツだが特別な□ ☆

位置

font-style → normal、italic、oblique、inherit□ ☆ marker-offset --- マーカをどれだけとび出させる □ ☆ font-variant → normal、small-caps、inheritか指定□ ☆ font-weight → normal、bold、bolder、lighter、□ ☆ list-style-type --- マーカのスタイルを指定
100〜900 の数値□ 取 れ る 値 →none, inherit, disc、circle、 □ ☆ font-stretch → normal、wider、narrower、…
square、decimal、decimal-leading-zero、□ ☆ font-size --- 大きさ指定
lower-roman、upper-roman、lower-greek、• 絶対指定→ xx-small、x-small、small、medium、upper-greek、lower-alpha、upper-alpha、large、x-large、xx-large
lower-latain、upper-latain、hebrew、armenian、
georgian、cjk-ideographic、hiragana、katakana、
hiragana-iroha、katakana-iroha□ ☆ list-style-image --- マーカに使う画像の URL を• 相対指定→ larger、smaller• そのほか、長さ指定 (「10pt」)、百分率指定もあり□ @font-face 以下→非常に細かく指定可能だが略指定

4

2.16

テキスト

□ ☆ text-indent → 長さ、百分率、inherit□ ☆ text-align → left、right、center、justify、文字列、inherit□ ☆

3

各自のサイトプランを発表

4

スタイルシートでどこまでできるか?

□ 2 ちゃんねる「いけてるスタイルを作れスレ」他

text-decoration → none、underline、• → http://www32.tok2.com/home/css/clip/joyful.cgi

overline、line-through、blink、inherit• → http://members.tripod.co.jp/monar01/ (リンク集)□ ☆ text-shadow → 色、長さ x2(または 3)□ ☆

letter-spacing、word-spacing → normal、長さ、inherit□ ☆

text-transform → capitalize、uppercase、

5

既存の HTML にスタイルシートをつけてみる

lowercase、none、inherit□ まず次のページを開いてみてください□ ☆ wihte-space → normal、pre、nowrap、inherit

http://smm/~kuno/ist02/sample31.html

2.17

テーブル (表)□ 各 自 の ディレ ク ト リ WWW の 下 に「sample1.css」「sample2.css」を作ってください。

□ 内容が多いので略□ 「chmod a+r sample1.css」等で誰にでも読めるように• もともと表の整形は複雑 (セルに入れて、セルを並□ とりあえず簡単なテストとして次のようなものを入れて確認べる)• 縦方向でスタイルを揃える面と横方向で揃える面とあるので面倒

body { background-color: 好きな色 }□ OK だったら自分が使いたいと思うようなスタイルを入

2.18

れて試す

ユーザインタフェース• Mozilla で「View」→「Use Style」でスタイル指定を選ぶ□ 表示とはちょっと違う「対話的」な部分□ ☆ cursor --- ある領域の上だけカーソルを別のもの• CSS ファイルを変更したら再読み込みしてから再度にできる選ぶ• 指 定 で き る 値 → URI、auto、crosshair、default、pointer、move、...

□ 色づかいを「#rrggbb」で指定したければ次のページを参考に□ ☆ outline-width → border-width と同様の指定

http://smm/~kuno/ist02/colors.html□ ☆ outline-style → border-style と同様の指定□ ☆ outline-color → 色、invert、inherit

2.19

6

次回までの課題□ 「簡単なサイト」の製作を開始してください。これまで

口述スタイルシートにやった内容は「ページデザイン」「コンテンツデザイン」「スタイルシート」なのでそれらに配慮しながらお□ 「読み上げ」→目の悪い人に対する重要な手段願いします。

• 読み上げ時のスタイルを指定→分かりやすさを大き□ 次回時点では完成していなくてもよいですが、どれか 1く改善できるつ以上のページのスタイルについて「こういうところを• 声の調子、早さ、ポーズ、キュー、スペルアウト、左右位置、音、…

工夫した」という形で発表してもらい、議論しようと思います。

5