• 検索結果がありません。

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

N/A
N/A
Protected

Academic year: 2021

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

Copied!
25
0
0

読み込み中.... (全文を見る)

全文

(1)

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

11 CSS3概要

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

(2)

この講座で学ぶこと

この講座で学ぶこと

CSS3の概要

現時点で大体使える機能

(3)

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

(4)

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

Flexible Box

Layout

CSS

Transitions

Selectors

Marquee

CSS

CSS

Multi-column

Animations

CSS

(5)

HTML5/CSS3との付き合い方

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の拡張機能の1つである filter を利⽤で

IEの拡張機能の1つである 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プロパティの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)

練習1

練習1

(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

子要素が1つだけの場合の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対応

CSS3セレクタのIE対応

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

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

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

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

方法がある

方法がある

Selectivizr

• http://selectivizr.com/

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

く動かない

(20)

練習2

練習2

(21)

Webフォント

Webフォント

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

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

ア ト側 ダウ

自由な

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

Webフォントの使⽤例

Webフォントの使⽤例

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

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

(22)

Webフォント

Webフォント

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

のものが大量に利⽤可能

利⽤可能

http://www.google.com/webfonts

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

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

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

(23)

練習3

練習3

(24)

メディアクエリ

メディアクエリ

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

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

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

現する

(25)

メディアクエリのIE対応

メディアクエリのIE対応

Respond.js

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

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

めのJavaScript

• https://github com/scottjehl/Respond

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

参照

関連したドキュメント