この講座で学ぶこと 3の概要現時点で大体使える機能 2

(1)

スマトフォンサイト制作基礎

11 CSS3概要

スマートフォンサイト制作基礎

(2)

この講座で学ぶこと



CSS3の概要



現時点で大体使える機能

(3)

CSS3について



CSS3は、CSS2.1をベースに様々な機能

を追加・改訂するモジュールの集まり

追加改訂る

集り

CSS

Color

Query

Media

CSS

Values and

i

CSS

Transforms

Color

Query

CSS

Namespace

CSS

Backgrounds

Units

CSS

Flexible Box

_Transitions

CSS

Transforms

Namespace

Selectors

g

and Borders

CSS

Multi-column

Layout

CSS

Transitions

Selectors

_Marquee

Multi-column

Layout

Animations

(4)

CSS3について



モジュールによって策定の進捗が異なる



http://www.w3.org/Style/CSS/current-work

p //

g/ y /

/



まだCRに到達していないものが多い

CSS

Color

Query

Media

CSS

Values and

Units

CSS

Transforms

CSS

Namespace

CSS

Backgrounds

and Borders

CSS

Flexible Box

Layout

CSS

Transitions

Selectors

_Marquee

CSS

Multi-column

_Animations

CSS

(5)

HTML5/CSS3との付き合い方

ブ



仕様策定の進み具合とブラウザでの実装

の進み具合に注意しながら使っていく

進み具合

意な

使

く

ブラウザでの

安心して

使える

仕様策定の

_{ブラウザでの}

実装を待つ

注意しながら

使う

仕様策定の

進み具合

使う

ブ

ザ実

進

ブラウザ実装の進み具合

(6)

現時点で大体使える機能



透過処理



グラデーション



グラデション



角丸の指定



ボックスシャドウ



テキストシャドウ



テキストシャドウ



新しいセレクタ



Webフォント

(7)

ベンダ・プレフィクス

ベンダー・プレフィクス

ブ



ブラウザで独自に実装している機能を

利⽤する場合には、ベンダーごとに決

利⽤る場合

、

ダ

決

められたプレフィクス（接頭辞）を付

けることになっている



例

background:

‐webkit‐

linear‐gradient(top, #900, #600);

background:

‐moz‐

linear‐gradient(top, #900, #600);

background

o

linear gradient(top #900 #600)

background:

‐o‐

linear‐gradient(top, #900, #600);

background:

‐ms‐

linear‐gradient(top, #900, #600);

(8)

透過処理



色の指定ではrgba(R値, G値, B値, アル

ファ値) の表記が使える

ァ値) 表記使る

不透明度



IE8以前では独自のfilt 機能を使う必要あり

background‐color:

rgba(255, 0, 0, 0.5)

;

不透明度



IE8以前では独自のfilter機能を使う必要あり



不透明度(opacity)の指定

( p

y)

opacity: 0.8;

(9)

グラデション

グラデーション

書式



書式

linear‐gradient(

方向, 開始色, 終了色);



古いバージョンのブラウザに対応する際にはベン

ダープレフィックスが必要



IE9以前は独自のfilter機能を使う



例

.box {

background:

‐webkit‐

linear‐gradient(top, #f00, #300);

background

moz

linear gradient(top #f00 #300)

background:

‐moz‐

linear‐gradient(top, #f00, #300);

background:

‐o‐

linear‐gradient(top, #f00, #300);

background:

‐ms‐

linear‐gradient(top, #f00, #300);

}

(10)

グラデション

グラデーション



IE6〜9対応



IEの拡張機能の１つである filter を利⽤で



IEの拡張機能の１つである filter を利⽤で

きる

fil

id DXI

T

f

Mi

f

di

(

filter: progid:DXImageTransform.Microsoft.gradient(

startColorstr='#f00',

endColorstr='#300'

endColorstr= #300 ,

GradientType=0

);

(11)

グラデション

グラデーション



旧webkit対応



iOS4やAndroid2.x系など



iOS4やAndroid2.x系など

.box {

background: webkit gradient(linear left top left bottom

background: -webkit-gradient(linear, left top, left bottom,

from(#f00), to(#300));

(12)

角丸



書式

border‐radius:

半径;



例

;

.box {

border‐radius: 10px;

}}

(13)

ボックスシャドウ



書式

box‐shadow: x

方向距離 y方向距離ぼかし距離影の色;



例

.box {

box‐shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);

}}

(14)

テキストシャドウ



書式

text‐shadow: x

方向距離 y方向距離ぼかし距離影の色;



例

.text {

text‐shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);

}}

(15)

CSS3プロパティのIE対応



CSS3 PIE



IE6〜IE9でCSS3のいくつかのプロパティ



IE6 IE9でCSS3のいくつかのプロパティ

に対応するためのJavaScript

• http://css3pie com/

• http://css3pie.com/



対応プロパティ

• http://css3pie com/documentation/suppor

• http://css3pie.com/documentation/suppor

ted-css3-features/

(16)

練習１

(17)

新しいセレクタ

表記法

説明

E[foo^="bar"]

属性fooがbarで始まる属性値を持つ要素E

E[foo$="bar"]

属性fooがbarで終わる属性値を持つ要素E

E[foo$= bar ]

属性fooがbarで終わる属性値を持つ要素E

E[foo*="bar"]

属性fooがbarを含む属性値を持つ要素E

E:root

ドキュメント内のルート要素である要素E

E:nth-child(n)

子要素としてn番目の要素E

E:nth-last-child(n)

子要素として最後からn番目の要素E

E:nth-of-type(n)

子要素であるE要素としてn番目のもの

E:nth-of-last-type(n)

子要素であるE要素として最後からn番目のもの

E:last child

子要素として最後のE要素

E:last-child

子要素として最後のE要素

E:first-of-type

子要素であるE要素として先頭のもの

E:only-child

y

子要素が１つだけの場合のE要素

(18)

新しいセレクタ

表記法

説明

E:empty

内容が空であるE要素

E:target

アンカーリンクで移動した先となってるE要素

E:target

アンカーリンクで移動した先となってるE要素

E:enabled

ユーザ⼊⼒が有効になっているE要素

E:disabled

ユーザ⼊⼒が無効になっているE要素

E:checked

チェックが⼊っているE要素

E:not(s)

セレクタsに該当しないE要素

E ~ F

E要素と同階層にありEよりも後に登場するF要素

(19)

CSS3セレクタのIE対応



IE9からCSS3セレクタに対応している



IE6〜8でCSS3セレクタに対応する場合、



IE6 8でCSS3セレクタに対応する場合、

以下のモジュールを組み合わせて使う

方法がある



Selectivizr

• http://selectivizr.com/

• 注意：外部CSSファイルに記述しないとうま

く動かない

(20)

練習2

(21)

Webフォント

デ



フォントデータを必要に応じてクライ

アント側にダウンロードさせ自由な

アト側ダウ

ド

自由な

フォントでページを表現する技術



Webフォントの使⽤例



Webフォントの使⽤例



このような表現はWebフォント以前では

像

画像を使うしか方法は無かった

(22)

Webフォント



アルファベットのWebフォントは無料

のものが大量に利⽤可能

大

利⽤可能



http://www.google.com/webfonts



それに対して日本語のWebフォント



それに対して、日本語のWebフォント

は無料のものは現状ほとんど無い

(23)

練習3

(24)

メディアクエリ



ウィンドウの幅やスクリーンの解像度などの

条件で適⽤するCSSを切り替えられる技術



これを使ってレスポンシブWebデザインを実

現する

(25)

メディアクエリのIE対応



Respond.js



IE6〜IE8でメディアクエリに対応するた



IE6 IE8でメディアクエリに対応するた

めのJavaScript

• https://github com/scottjehl/Respond

• https://github.com/scottjehl/Respond

この 講 座 で 学 ぶこと 3の 概 要 現 時 点 で 大 体 使 える 機 能 2

スマ トフォンサイト制作基礎

11 CSS3概要

スマートフォンサイト制作基礎

この講座で学ぶこと

この講座で学ぶこと



CSS3の概要



現時点で大体使える機能

CSS3について

CSS3について



CSS3は、CSS2.1をベースに様々な機能

を追加・改訂するモジュールの集まり

追加 改訂 る

集 り

CSS

Color

Query

Media

CSS

Values and

i

CSS

Transforms

Color

Query

CSS

Namespace

CSS

Backgrounds

Units

CSS

Flexible Box

Transitions

CSS

Transforms

Namespace

Selectors

g

and Borders

CSS

CSS

Multi-column

Layout

CSS

Transitions

Selectors

Marquee

Multi-column

Layout

Animations

CSS3について

CSS3について



モジュールによって策定の進捗が異なる



http://www.w3.org/Style/CSS/current-work

p //

g/ y /

/



まだCRに到達していないものが多い

CSS

CSS

Color

Query

Media

CSS

Values and

Units

CSS

Transforms

CSS

Namespace

CSS

Backgrounds

and Borders

CSS

この講座で学ぶこと 3の概要現時点で大体使える機能 2

スマトフォンサイト制作基礎

追加改訂る

集り

_Transitions

_Marquee

_Marquee

_Animations

意な

_{ブラウザでの}

グラデション

ベンダ・プレフィクス

利⽤る場合