This is a presentation of JAGAT event at 25th Match, 2010.

1. CSS3の最新事情
加藤誠
テクニカル・ゕドバ゗ザ
Mozilla Japan

2. Agenda
• いくつかのCSS3の機能について説明します
• Media Query
• CSS Backgrounds & Borders
• CSS Gradient
• CSS Transitions
• CSS Fonts

3. MEDIA QUERY

4. Webを表示するデバ゗ス
• Webを表示するデバ゗スはさまざま
• デゖスプレ゗
• プリンタ
• etc
• 各々のデバ゗スの表示解像度は同じではない
• 各デバ゗スごとのWebページを作成しているの
が現状
• PC用サ゗ト
• iPhone用サ゗ト
• ケータ゗用サ゗ト

5. 各デバ゗スへの対応するには
• ゕクセスするデバ゗スを検出して表示す
るHTMLを切り替える
• IPゕドレス (i-mode網のゕドレスは決まっている)
• User-Agent
• JavaScript
• etc
• デバ゗スによってCSSを切り替える
• Media Queryを利用する

6. Media Query
• PC向けであれば、Internet Explorer以外はほ
ぼ対応
• iPhoneもWii (Opera)も対応
• 表示するデバ゗スによって切り替える
• ブラウザによってscreen以外は非対応
• 画面解像度、色解像度で切り替え
• ほぼどのブラウザも対応

7. 使用例1
• スクリーンまたは印刷デバ゗スに対してのみ外
部スタ゗ルシートを適用する
<link rel=“stylesheet” type=“text/css”
media=“screen” href=“sans-serif.css”>
<link rel=“stylesheet” type=“text/css”
media=“print” href=“serif.css“>
• スタ゗ルシート内で指定
@media screen {
* { font-family: sans-serif; }
}

8. 使用例2
• スクリーンのサ゗ズが最小800px
@media screen and (min-width: 800px)
{…}
• 複数の条件を指定
@media screen and (min-width: 400px) and
(max-width: 700px) {…}
• デバ゗スの縦が600px
@media screen and (device-height:
600px) {…}

9. 使用例3
• デバ゗スの向き
@media all and (orientation: portrait)
{…}
• 画面の比率
@media screen and (device-aspect-ratio:
16/9) { … }
• カラーを持つ画面
@media screen and (color) { … }

10. CSS BACKGROUNDS & BORDERS

11. 今までのCSSでの背景の指定
• 背景画像や色は一つ
• 複数の画像を全体の背景に割り当てるためには、
ハックが必要
• 各HTML要素に各々背景を割り当てる
• レ゗ゕウトが崩れれば、思い通りの背景にならな
くなる

12. CSS Background
• 背景に複数の画像を割り当てることが可能
• 各々の背景の位置や繰り返しなどを指定可能
• 比較的新しい規格のため、Firefox 3.6で先行
に実装

13. 使用例
• 複数の画像を割り当てる
background: url(firefox-48.png),
url(flowers.jpg);
• 各背景には位置や繰り返しも指定可能
background-repeat: no-repeat, repeat;
background-position: bottom right,
right;

14. CSS Borders
• 今までは色、太さ、スタ゗ル(ドットなど)が変
更可能だったが、コーナーを丸くする方法が追
加された
• ボーダーのすべてのコーナーを丸くする
• border-radius: 4em;
• 各コーナーに対しても個別に変更可能
• border-radius: 2em 1em 4em 3em;
• これも現状では、”-moz-” prefixが必要

15. 使用例1
background: lightgray;
color: white;
-moz-border-radius: 25px 0px 25px
0px;
padding: 0.25em;
font-size: 50px;

16. 使用例2
• コーナーを楕円にすることも可能です
background: lightgray;
color: white;
-moz-border-radius: 25px / 50px 0px
25px 0px;
padding: 0.25em;
font-size: 50px;

17. CSS GRADIENT

18. CSS Gradient
• 現時点で定義されている形は2つ
• Linear
• Radial
• 繰り返しの形式(repeating)もサポート
• 先に実装されたWebKitでは構文が異なる
• WebKitでの先に行われた実装 (例: linear)
• background: -webkit-gradient(linear, left top, left bottom,
from(white), to(gray));
• 現在のドラフト (例: linear)
• background: linear-gradient(top, white, gray);

19. CSS Gradient
• Firefox 3.6 / Gecko 1.9.2では、”-moz-
”prefixを使う必要あり (-moz-linear-gradient)
• 画像を受け入れることができるCSSプロパテゖす
べてで利用可能
• Firefox 3.6ではbackgroundくらいにしか動作しません

20. Linear Gradients
• linear-gradient( [<point> || <angle>,]?
<stop>, <stop> [, <stop>]* )
linear-gradient(
top,
blue,
white);
linear-gradient(
45deg,
blue,
white);

21. Radial Gradients
• radial-gradient( [<position> || <angle>,]?
[<shape> || <size>,]? <stop>, <stop>[,
<stop>]* )
-moz-radial-
gradient(
red,
yellow,
green
);

22. Repeating Gradient
• Linerやradialの記述へ”repeating-”のprefix
を追加
repeating-linear-gradient(
top,
blue 5px,
white 20px);
repeating-linear-gradient(
top left -45deg,
red,
red 5px,
white 5px,
white 10px);

23. 混合した使用例
• CSS backgroundとCSS Gradientを同時に指
定する
background: url(demo/firefox.png), -moz-linear-
gradient(left, rgba(255,255,255,0),
rgba(255,255,255,1)), url(demo/flowers.jpg);
background-repeat: no-repeat, no-repeat, repeat;
background-position: bottom right, left, right;

24. CSS TRANSITIONS

25. CSSで動的なコンテンツの作成
• 今までの動的なコンテンツを作成する方法
• Flash
• JavaScript
• 今後簡単なものであれば、以下のものが使用可
能に
• CSS Transitions
• CSS Animations

26. CSS Transitions
• 時間経過で指定したCSSプロパテゖを変化させ
る
• すべてに対応している訳ではなく、変更できる
CSSプロパテゖは決まっている
• http://www.w3.org/TR/css3-transitions/
• 現状では、prefixを使用する必要がある
• -moz- (Firefox 3.7以降)
• -webkit- (Safari / Chrome)
• -o- (Opera 10.50以降)

27. 使用例
• 変更するCSSプロパテゖを指定
• transition-property: background-color;
• 変更間隔
• transition-duration: 1s;
• タ゗ミング変更
• transition-timing-function: linear;
• まとめて記述することも可能
• transition: background-color 1s linear;

28. 使用例2
• 各ブラウザ上で動作させるには、すべての記述
を書く(Prefixが必要なため)
DIV {
-moz-transition: background-color 1s
linear;
-webkit-transition: background-color
1s linear;
-o-transition: background-color
1s linear;
}

29. CSS FONTS

30. CSS Font
• 過去にはInternet Explorerのみで使えるEOT
フォントと形式が存在
• W3Cに提案されたが採用に至らず
• Firefox 3.5 / Chrome
• ダウンロードフォントをサポート (TrueTypeフォ
ント / OpenType フォント)
• Firefox 3.6
• ダウンロードフォントとして、新たにWOFFフォ
ントをサポート

31. WOFF
• WOFF = Web Open Font Format
• Firefox 3.6では新しいWebフォント形式
(WOFF) をサポート
• フォントベンダと共同で作成した新しいフォント
形式
• OpenTypeなどよりもサ゗ズは小さい(グリフデー
タを圧縮)
• 現状では差分ダウンロードには対応していない
• MIMEタ゗プは決まってない
3

32. 使用例1
• GentiumTestというフォントを定義する
@font-face {
font-family: GentiumTest; src:
url(fonts/Gentium.woff) format(“woff”);
}
• ダウンロードに失敗した場合にはローカ
ルのフォントを指定する場合
@font-face {
font-family: GentiumTest; src:
local(Gentium), url(fonts/Gentium.ttf);
}

33. 使用例2
• 複数のプラットフォームのフォントをサポート
する
@font-face {
font-family: Japanese;
src: local(HiraKakuPro-W3), local(Meiryo);
}

34. 今後の検討部分
• ダウンロードフォントについては初期実装が行
われた
• 現状のCSSでは、フォントに対しては、サ゗ズ
指定、ボールド、゗タリックくらいしかサポー
トしていない
• OpenTypeフォントにはいろいろな業界から
フゖードバックを受けたさまざまな機能が存在
• それをWeb(HTML/CSS)に持ってこれないか?

35. フォントの問題として
• JIS X 0213:2004の変更
• “葛飾区”とか“祇園”
• Windows VistaでシステムフォントがJIS
2004対応フォントに
• Windows VistaではOpenTypeの機能を利用
して、フォントに複数の字形を割り当てるこ
とでゕプリケーション側で対応可能

36. OpenType featureの使用
• CSSでフォントのどの字形を使うかを選択
• font-variant-east-asian: jis78
• font-variant-east-asian: traditional
• これらはOpenType feature Tagの機能を利用

37. その他 (一例)
• font-variant-ligatures: common-ligatures
• font-variant-alternates: contextual
• font-variant-numeric: diagonal-fractions

38. リフゔレンス
• CSS Backgrounds & Borders Module
• http://www.w3.org/TR/css3-background/
• http://dev.w3.org/csswg/css3-background/
(Editors Draft)
• CSS Fonts Module
• http://www.w3.org/TR/css3-fonts/
• http://dev.w3.org/csswg/css3-fonts/ (Editors
Draft)
• CSS Image Value Module Level 3 (CSS
Gradient)
• http://dev.w3.org/csswg/css3-images/ (Editors
Draft)

39. リフゔレンス
• CSS Transitions Module
• http://www.w3.org/TR/css3-transitions/
• http://dev.w3.org/csswg/css3-transitions/ (Editors
Draft)
• Media Queries
• http://www.w3.org/TR/css3-mediaqueries/
• http://dev.w3.org/csswg/css3-mediaqueries/
(Editors Draft)
• hacks.mozilla.org - Demo
• http://hacks.mozilla.org/category/css/

40. Any Question?