Network Computing の基礎

29 

Loading....

Loading....

Loading....

Loading....

Loading....

全文

(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">見出し1</font></h4>

<div><font size=2 color="blue">見出し1の内容</font></div> <h4><font size=4 color="black">見出し2</font></h4>

<div><font size=2 color="blue">見出し2の内容</font></div> </body>

</html>

(7)

CSS 以後(HTML)

<html> <head>

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

<link rel="stylesheet" href="sample2.css" type="text/css">

</head> <body> <h3>サンプルHTML</h3> <p>これはテストです。</p> <h4>見出し1</h4> <div>見出し1の内容</div> <h4>見出し2</h4> <div>見出し2の内容</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

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

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

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

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>1つめの段落</p> <p>2つめの段落</p> <p>3つめの段落</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属性の値は1

つの要素にしか使えない

<body>

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

<p class=“note”>説明文</p> <ul>

<li class=“note”>項目1</li> <li>普通2</li> </ul>

異なる要素に同じ

スタイルが指定できる

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

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

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>

+

枠線を付与する範囲全体を

div

要素で囲んでスタイルを設定

CSS HTML

(28)

CSSで更に何ができる?

ž

表示

/非表示の切り替え

ž

カーソルの形

ž

文字や図形の位置

ž

フォント

etc…

[CSS 一覧] で検索すると分かるよ

(29)

おわりに

ž

WEBの世界(2)

CSSとは

CSS の記法

タイプセレクタ、クラスセレクタ、一意セレクタ

ž

次週は コンピュータリテラシ をやります

Updating...

参照

Updating...

関連した話題 :