Network Computing の基礎

(1)

担当：松下光範

(2)

CSS とは

ž

Cascading Style Sheets の略

—

Cascading =「段階的に行う」

—

Style Sheets =「見栄えを決めるシート」

ž

CSSにはWEBページの見栄えを決めるための

ルールが記述される

—

HTML には「文書の論理構造」を記述する

—

CSSには「文書の視覚情報」を記述する

2

(3)

3

論理構造に視覚表現を付与

論理構造（HTML）

視覚表現（CSS）

<h1>文書の論理構造</h1> <p>マークアップの基本は文書の論理構造にある</p>

h1

→ 文字を青色にする

p

→ 文字をイタリック体にする

<h1>文書の論理構造</h1> <p>マークアップの基本は文書の論理構造にある</p>

(4)

なぜ

CSS？

ž

柔軟性

—

ちょっと章題を大きくしたい

—

図を左側にしたい

ž

効率性

—

同じことを何回も定義しなくていい

—

レンダリングが速くなる

ž

アクセシビリティの向上

—

視覚障がい者にも利用しやすいページが作成し

やすくなる

—

情報の「流れ」が追いやすくなる

(5)

(6)

CSS 以前（HTML）

<html> <head> <title>サンプルHTML</title> </head> <body bgcolor="lightgreen">

<h3><font size=6 color="white">サンプルHTML</font></h3> <p><font size=4 color="red">これはテストです。</font></p> <h4><font size=4 color="black">見出し１</font></h4>

</html>

(7)

CSS 以後（HTML）

<title>サンプルHTML</title>

</head> <body> <h3>サンプルHTML</h3> <p>これはテストです。</p> <h4>見出し１</h4> <div>見出し１の内容</div> <h4>見出し２</h4> <div>見出し２の内容</div> </body> </html>

sample2.html

(8)

CSS 以後（CSS）

body{

background-color: lightgreen; }

h3{

color: white; font-size: 24pt; }

h4{

color: black; font-size: 14pt; }

p{

color: red; font-size: 14pt; }

div{

color: blue; font-size: 10pt; }

(9)

CSS の効果

ž

文書の構成がシンプルになってわかりやす

くなった

—

エラーが見つけやすくなる

—

改訂が容易になる

sample3.html

(10)

CSS の歴史

ž

1996年12月にCSS level1 がW3C勧告

—

HTML 3.2のときに基本的な要素が提案された

ž

1998年5月にCSS level2 がW3C勧告

—

CSS level1 の上位互換（要素の追加・改訂）

—

現在は

CSS level2.1が実質的な基本仕様

—

全ての

UA（ブラウザ）が100%満たしてるわけでは

ない

ž

現在、

CSS level3 が検討中

—

要素のモジュール化、

HTML以外へも対応

(11)

h1 { color : blue ; }

11

CSSによるスタイルの指定

ž

スタイルを指定する対象を選択し，それに対するス

タイルの性質（プロパティ名とその値）を宣言する

プロパティ名

プロパティ名とプロ

パティ値はコロン

「

:」で区切る

どの対象について

（セレクタ）

何を

（プロパティ名）

どうする

（プロパティ値）

「見出し要素（

h1）について文字の色を青にする」

プロパティ値

プロパティ値の

最後にセミコロン

「

;」を付ける

宣言

宣言は中括弧

{ } に入れる

セレクタ

スタイルの

設定対象

(12)

12

複数の宣言を１つにまとめる

p

{ font-size: 14pt; }

p

{ font-style: italic; }

p

{ text-decoration: underline; }

p

{

font-size: 14pt ;

font-style: italic;

text-decoration: underline;

}

セレクタ

{

プロパティ名

: プロパティ値 ;

プロパティ名

: プロパティ値 ;

プロパティ名

: プロパティ値 ;

・・・

}

セレクタが共通の場合

パラグラフ要素について

文字サイズ

: 14ポイント

文字のスタイル

: イタリック体

テキストの装飾

: 下線

(13)

13

複数のセレクタを１つにまとめる

h1

{ font-style: italic; }

p

{ font-style: italic; }

h1, p

{

font-style: italic;

}

全ての宣言が共通の場合

セレクタ，セレクタ，･･･

{

プロパティ名

: プロパティ値 ;

}

見出し要素とパラグラフ要素

について，文字のスタイルを

イタリック体にする

(14)

14

スタイルが定義できる場所

(1) 外部スタイルファイル（CSSファイル）

—

異なるページ間で共有（再利用）可能

(2) head要素内のstyle要素

—

特定のページ内でのみ有効

(3) インライン style属性

—

特定の要素に対してのみ有効

(15)

ž

外部スタイルファイル（CSSファイル）を用いる

—

head要素内のlink要素によってCSSファイルを参照

—

CSSファイルの拡張子は「.css」とする

15

<html>

<head>

<title> ・・・ </title>

<link href=“style.css” rel=“stylesheet” type=“text/css” />

</head>

<body>

<h1> ・・・ </h1>

<p> ・・・ </p>

</body>

</html>

(1) 外部ファイルによる設定

外部ファイル（

style.css）

h1 { font-style: italic; }

p { text-decoration: underline; }

CSS HTML

このスタイル設定は，

他のページからも利

用できる

(16)

16

(2) style要素による設定

ž

head要素内で style要素を用いる

—

スタイルはページ内でのみ有効

<html>

<head>

<title> ・・・ </title>

<style type=“text/css”>

h1 { font-style: italic; }

p { text-decoration: underline; }

</style>

</head>

<body>

<h1> ・・・ </h1>

<p> ・・・ </p>

</body>

</html>

スタイルの設定

はこのページ内

でのみ有効

HTML

(17)

17

(3) style属性による設定

ž

個々の要素の開始タグに

style属性を追加

ž

その要素にのみ有効な固有のスタイルを設定する

—

同じページ内の他の要素に影響は及ぼさない

—

他のページの要素にも影響は及ばない

<html>

<head>

<title> ・・・ </title>

</head>

<body>

<h1

style=“font-style: italic;”

> ・・・ </h1>

<p

style=“text-decoration: underline;”

> ・・・ </p>

</body>

</html>

スタイルの設定

はそれぞれの

要素にのみ有効

(18)

18

様々なセレクタ

ž

セレクタは，文書中のどの要素にスタイル

を適用するかを指定する

ž

本講義で扱うセレクタ

—

(1) タイプ・セレクタ

—

(2) クラス・セレクタ

—

(3) 一意セレクタ

上記以外にも，子孫セレクタ，子供セレクタ，全称

セレクタ，隣接兄弟セレクタ，属性セレクタなどが

ある（ただし，ブラウザ対応していないものも多い）

(19)

19

(1) タイプ・セレクタ

ž

指定された要素名を持つ全ての要素にスタイルを適用

ž

例

—

全ての

h1 要素の文字色を赤にする

—

全ての

p（パラグラフ）要素に含まれる文字をイタリック体にする

<head> <style type="text/css"> h1 { color: red; } p { font-style: italic; } </style> </head> <body> <h1>タイプセレクタの例</h1> <p>１つめの段落</p> <p>２つめの段落</p> <p>３つめの段落</p> </body>

赤字

になる

斜体

になる

(20)

20

タイプセレクタでできること

ž

要素の種類（

h1 や p）ごとにスタイルを指定する

ž

タイプセレクタには（簡単に）できないこと

—

同じ種類の要素のうち，特定の場所にある要素だけス

タイルを変える

—

スタイルを設定したい要素だけを含んで，それ以外の

要素を含まないようにする

ž

スタイル設定の対象となる要素をきめ細かく限定

する方法

—

「クラスセレクタ」，「一意セレクタ」

(21)

21

(2) クラスセレクタ

ž

全ての要素は

class属性を持つことができる

—

属性値はページ内で重複してもよい（一意でなくてもよい）

ž

特定のクラス属性値を持つ要素にスタイルを適用

—

セレクタ「要素名

.属性値」

—

要素名を省略して，「

.属性値」とすることもできる

<p

class=“note”

>この内容は重要</p>

p.note

{ font-style: italic; }

.note

{ font-style: italic; }

CSS HTML CSS

段落

(p)要素のうち，クラス

属性の値が “

note” である

ものにだけスタイルを適用

クラス属性の値が

“

note”である全ての

要素にスタイルを適用

(22)

ž

クラス属性の値には，「分類」や「意味」が連想できる

名前をつけるようにする（視覚表現を連想させる名前

は避ける）

22

クラス属性の値

: 名前の付け方

<p

class=“red”

>色付きの文字</p>

p.red { color: red; }

+

p.red { color: blue; }

文書の論理構造と

独立に視覚表現を

変更（

CSSの利点）

クラス属性の値

に視覚表現の

意図が混在

<font

color=“red”

>色付きの文字</font>

font

要素によるスタイル表現と本質的に同じ

<p

class=“remark”

>色付きの文字</p>

このパラグラフを強調して目立たせたい

その要素が担う

役割（意味）を

考える

CSS HTML

(23)

23

class属性と id属性

ž

class属性

—

複数の要素を同じ種類

（カテゴリー）に類別する

—

同じclass属性の値はペー

ジ内で複数利用できる

ž

id属性

—

ある要素に一意の識別子を持

たせる

—

ページ内で同じid属性の値は１

つの要素にしか使えない

<body>

<div id=“header”>ヘッダー </div> <div id=“content”>ページ内容</div> <div id=“footer”>フッター</div> </body>

異なる要素に同じ

スタイルが指定できる

ヘッダーやフッター領域は

ページ内に１つずつしかない

note, header 等の属性値は自由に決めることができるが，

大文字/小文字は区別される（ “Note” と “note” は値として異なる）

(24)

24

(3) 一意セレクタ

ž

全ての要素は

id属性を持つことができる

—

id属性の属性値はページ内で一意でなくてはならない

ž

特定の

id属性値を持つ要素にのみスタイルを適用

—

セレクタ「要素名

#属性値」または「#属性値」

<h1

id=“basic-HTML”

>HTMLの基礎</h1>

h1#basic-HTML

{ color: navy; }

#basic-HTML

{ color: navy; }

見出し

(h1)要素でid

属性の値が “

basic-HTML”であるものに

スタイルを適用

【注意】

id属性の値はページ内で一意なので，

要素名を省略しても同一要素が対象となる

CSS HTML

(25)

25

さらに高度なスタイル範囲の

指定

ž

要素としてマーク付けされていない箇所にスタ

イルを設定するには？

—

span要素を用いる

○ テキストノード（要素内容）の一部にスタイルを設定する

ž

ページ内のある範囲に新たな役割を与えるに

は？

—

div要素を用いる

○ いくつかの要素をグループ化してスタイルを設定する

(26)

26

span要素による部分的な範囲指定

<p>Webの原型は<span>1989年</span>に考案さ

れた</p>

span要素自身はブラウザ

上の表示に影響を与えない

span要素にclass属性

を付与すれば任意のス

タイルが指定できる

HTML span.year { font-style: italic; text-decoration: underline; } <p>Webの原型は

<span class=“year”>1989年</span>に考案さ

れた</p>

+

CSS HTML

(27)

27

div要素によるグループ化

<h1>Webの誕生</h1> <p>Webの原型は1989年に考案された</p> <p>W3Cは1994年に設立された</p>

見出し（

h1要素）とそれに続く段落

（

p要素）全体を枠線で囲むには？

HTML

div.section { border : dashed 2pt blue; }

<div class=“section”> <h1>Webの誕生</h1> <p>Webの原型は1989年に考案された</p> <p>W3Cは1994年に設立された</p> </div>

Network Computing の基礎

全文

担当：松下光範

CSS とは

ž

Cascading Style Sheets の略

—

Cascading =「段階的に行う」

—

Style Sheets =「見栄えを決めるシート」

ž

CSSにはWEBページの見栄えを決めるための

ルールが記述される

—

HTML には「文書の論理構造」を記述する

—

CSSには「文書の視覚情報」を記述する

論理構造に視覚表現を付与

論理構造（HTML）

視覚表現（CSS）

h1

→ 文字を青色にする

p

→ 文字をイタリック体にする

なぜ

CSS？

ž

柔軟性

—

ちょっと章題を大きくしたい

—

図を左側にしたい

ž

効率性

—

同じことを何回も定義しなくていい

—

レンダリングが速くなる

ž

アクセシビリティの向上

—

視覚障がい者にも利用しやすいページが作成し

やすくなる

—

情報の「流れ」が追いやすくなる

CSS 以前（HTML）

CSS 以後（HTML）

sample2.html

CSS 以後（CSS）

CSS の効果

ž

文書の構成がシンプルになってわかりやす

くなった

—

エラーが見つけやすくなる

—

改訂が容易になる

sample3.html

CSS の歴史

ž

1996年12月にCSS level1 がW3C勧告

—

HTML 3.2のときに基本的な要素が提案された

ž

1998年5月にCSS level2 がW3C勧告

—

CSS level1 の上位互換（要素の追加・改訂）

—

現在は

CSS level2.1が実質的な基本仕様

—

全ての

UA（ブラウザ）が100%満たしてるわけでは

ない

ž

現在、

CSS level3 が検討中

—

要素のモジュール化、

HTML以外へも対応

:」で区切る

h1）について文字の色を青にする」

;」を付ける