CSS3の最新事情

     加藤誠
テクニカル・ゕドバ゗ザ
  Mozilla Japan
Agenda

• いくつかのCSS3の機能について説明します
 • Media Query
 • CSS Backgrounds & Borders
 • CSS Gradient
 • CSS Transitions
 • CSS Fonts
MEDIA QUERY
Webを表示するデバ゗ス

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

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

• PC向けであれば、Internet Explorer以外はほ
  ぼ対応
 • iPhoneもWii (Opera)も対応
• 表示するデバ゗スによって切り替える
 • ブラウザによってscreen以外は非対応
•...
使用例1

• スクリーンまたは印刷デバ゗スに対してのみ外
  部スタ゗ルシートを適用する
 <link rel=“stylesheet” type=“text/css”
 media=“screen” href=“sans-serif.css...
使用例2

• スクリーンのサ゗ズが最小800px
 @media screen and (min-width: 800px)
 {…}
• 複数の条件を指定
  @media screen and (min-width: 400px) and...
使用例3

• デバ゗スの向き
 @media all and (orientation: portrait)
 {…}

• 画面の比率
 @media screen and (device-aspect-ratio:
 16/9) { … ...
CSS BACKGROUNDS & BORDERS
今までのCSSでの背景の指定

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

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

• 複数の画像を割り当てる
 background: url(firefox-48.png),
 url(flowers.jpg);

• 各背景には位置や繰り返しも指定可能
 background-repeat: no-repeat...
CSS Borders

• 今までは色、太さ、スタ゗ル(ドットなど)が変
  更可能だったが、コーナーを丸くする方法が追
  加された
• ボーダーのすべてのコーナーを丸くする
 • border-radius: 4em;
• 各コーナーに対...
使用例1




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

• コーナーを楕円にすることも可能です




  background: lightgray;
  color: white;
  -moz-border-radius: 25px / 50px 0px
  25px 0px;
 ...
CSS GRADIENT
CSS Gradient

• 現時点で定義されている形は2つ
 •   Linear
 •   Radial
• 繰り返しの形式(repeating)もサポート
• 先に実装されたWebKitでは構文が異なる
 •   WebKitでの先に行...
CSS Gradient

• Firefox 3.6 / Gecko 1.9.2では、”-moz-
  ”prefixを使う必要あり (-moz-linear-gradient)
• 画像を受け入れることができるCSSプロパテゖす
  べてで...
Linear Gradients

• linear-gradient( [<point> || <angle>,]?
  <stop>, <stop> [, <stop>]* )
     linear-gradient(
       to...
Radial Gradients

• radial-gradient( [<position> || <angle>,]?
  [<shape> || <size>,]? <stop>, <stop>[,
  <stop>]* )


  -...
Repeating Gradient

• Linerやradialの記述へ”repeating-”のprefix
  を追加
  repeating-linear-gradient(
   top,
   blue 5px,
   white...
混合した使用例

• CSS backgroundとCSS Gradientを同時に指
  定する




 background: url(demo/firefox.png), -moz-linear-
 gradient(left, rgb...
CSS TRANSITIONS
CSSで動的なコンテンツの作成

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

• 時間経過で指定したCSSプロパテゖを変化させ
  る
 • すべてに対応している訳ではなく、変更できる
   CSSプロパテゖは決まっている
   •   http://www.w3.org/TR/css3...
使用例

• 変更するCSSプロパテゖを指定
 • transition-property: background-color;
• 変更間隔
 • transition-duration: 1s;
• タ゗ミング変更
 • transitio...
使用例2

• 各ブラウザ上で動作させるには、すべての記述
  を書く(Prefixが必要なため)

 DIV {
   -moz-transition: background-color 1s
 linear;
   -webkit-tran...
CSS FONTS
CSS Font

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

• WOFF = Web Open Font Format
• Firefox 3.6では新しいWebフォント形式
  (WOFF) をサポート
 • フォントベンダと共同で作成した新しいフォント
   形式
 • OpenType...
使用例1

• GentiumTestというフォントを定義する
 @font-face {
   font-family: GentiumTest; src:
 url(fonts/Gentium.woff) format(“woff”);
 ...
使用例2

• 複数のプラットフォームのフォントをサポート
  する
 @font-face {
   font-family: Japanese;
   src: local(HiraKakuPro-W3), local(Meiryo);
 }
今後の検討部分

• ダウンロードフォントについては初期実装が行
  われた
• 現状のCSSでは、フォントに対しては、サ゗ズ
  指定、ボールド、゗タリックくらいしかサポー
  トしていない
• OpenTypeフォントにはいろいろな業界から...
フォントの問題として

• JIS X 0213:2004の変更
 • “葛飾区”とか“祇園”
• Windows VistaでシステムフォントがJIS
  2004対応フォントに
 • Windows VistaではOpenTypeの機能を利...
OpenType featureの使用

• CSSでフォントのどの字形を使うかを選択
 • font-variant-east-asian: jis78




 • font-variant-east-asian: traditional
...
その他 (一例)

• font-variant-ligatures: common-ligatures



• font-variant-alternates: contextual



• font-variant-numeric: d...
リフゔレンス

• CSS Backgrounds & Borders Module
 •   http://www.w3.org/TR/css3-background/
 •   http://dev.w3.org/csswg/css3-ba...
リフゔレンス

• CSS Transitions Module
 •   http://www.w3.org/TR/css3-transitions/
 •   http://dev.w3.org/csswg/css3-transitions...
Any Question?
Upcoming SlideShare
Loading in …5
×

CSS3の最新事情

3,403 views

Published on

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

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,403
On SlideShare
0
From Embeds
0
Number of Embeds
169
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

CSS3の最新事情

  1. 1. CSS3の最新事情 加藤誠 テクニカル・ゕドバ゗ザ Mozilla Japan
  2. 2. Agenda • いくつかのCSS3の機能について説明します • Media Query • CSS Backgrounds & Borders • CSS Gradient • CSS Transitions • CSS Fonts
  3. 3. MEDIA QUERY
  4. 4. Webを表示するデバ゗ス • Webを表示するデバ゗スはさまざま • デゖスプレ゗ • プリンタ • etc • 各々のデバ゗スの表示解像度は同じではない • 各デバ゗スごとのWebページを作成しているの が現状 • PC用サ゗ト • iPhone用サ゗ト • ケータ゗用サ゗ト
  5. 5. 各デバ゗スへの対応するには • ゕクセスするデバ゗スを検出して表示す るHTMLを切り替える • IPゕドレス (i-mode網のゕドレスは決まっている) • User-Agent • JavaScript • etc • デバ゗スによってCSSを切り替える • Media Queryを利用する
  6. 6. Media Query • PC向けであれば、Internet Explorer以外はほ ぼ対応 • iPhoneもWii (Opera)も対応 • 表示するデバ゗スによって切り替える • ブラウザによってscreen以外は非対応 • 画面解像度、色解像度で切り替え • ほぼどのブラウザも対応
  7. 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. 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. 9. 使用例3 • デバ゗スの向き @media all and (orientation: portrait) {…} • 画面の比率 @media screen and (device-aspect-ratio: 16/9) { … } • カラーを持つ画面 @media screen and (color) { … }
  10. 10. CSS BACKGROUNDS & BORDERS
  11. 11. 今までのCSSでの背景の指定 • 背景画像や色は一つ • 複数の画像を全体の背景に割り当てるためには、 ハックが必要 • 各HTML要素に各々背景を割り当てる • レ゗ゕウトが崩れれば、思い通りの背景にならな くなる
  12. 12. CSS Background • 背景に複数の画像を割り当てることが可能 • 各々の背景の位置や繰り返しなどを指定可能 • 比較的新しい規格のため、Firefox 3.6で先行 に実装
  13. 13. 使用例 • 複数の画像を割り当てる background: url(firefox-48.png), url(flowers.jpg); • 各背景には位置や繰り返しも指定可能 background-repeat: no-repeat, repeat; background-position: bottom right, right;
  14. 14. CSS Borders • 今までは色、太さ、スタ゗ル(ドットなど)が変 更可能だったが、コーナーを丸くする方法が追 加された • ボーダーのすべてのコーナーを丸くする • border-radius: 4em; • 各コーナーに対しても個別に変更可能 • border-radius: 2em 1em 4em 3em; • これも現状では、”-moz-” prefixが必要
  15. 15. 使用例1 background: lightgray; color: white; -moz-border-radius: 25px 0px 25px 0px; padding: 0.25em; font-size: 50px;
  16. 16. 使用例2 • コーナーを楕円にすることも可能です background: lightgray; color: white; -moz-border-radius: 25px / 50px 0px 25px 0px; padding: 0.25em; font-size: 50px;
  17. 17. CSS GRADIENT
  18. 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. 19. CSS Gradient • Firefox 3.6 / Gecko 1.9.2では、”-moz- ”prefixを使う必要あり (-moz-linear-gradient) • 画像を受け入れることができるCSSプロパテゖす べてで利用可能 • Firefox 3.6ではbackgroundくらいにしか動作しません
  20. 20. Linear Gradients • linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* ) linear-gradient( top, blue, white); linear-gradient( 45deg, blue, white);
  21. 21. Radial Gradients • radial-gradient( [<position> || <angle>,]? [<shape> || <size>,]? <stop>, <stop>[, <stop>]* ) -moz-radial- gradient( red, yellow, green );
  22. 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. 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. 24. CSS TRANSITIONS
  25. 25. CSSで動的なコンテンツの作成 • 今までの動的なコンテンツを作成する方法 • Flash • JavaScript • 今後簡単なものであれば、以下のものが使用可 能に • CSS Transitions • CSS Animations
  26. 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. 27. 使用例 • 変更するCSSプロパテゖを指定 • transition-property: background-color; • 変更間隔 • transition-duration: 1s; • タ゗ミング変更 • transition-timing-function: linear; • まとめて記述することも可能 • transition: background-color 1s linear;
  28. 28. 使用例2 • 各ブラウザ上で動作させるには、すべての記述 を書く(Prefixが必要なため) DIV { -moz-transition: background-color 1s linear; -webkit-transition: background-color 1s linear; -o-transition: background-color 1s linear; }
  29. 29. CSS FONTS
  30. 30. CSS Font • 過去にはInternet Explorerのみで使えるEOT フォントと形式が存在 • W3Cに提案されたが採用に至らず • Firefox 3.5 / Chrome • ダウンロードフォントをサポート (TrueTypeフォ ント / OpenType フォント) • Firefox 3.6 • ダウンロードフォントとして、新たにWOFFフォ ントをサポート
  31. 31. WOFF • WOFF = Web Open Font Format • Firefox 3.6では新しいWebフォント形式 (WOFF) をサポート • フォントベンダと共同で作成した新しいフォント 形式 • OpenTypeなどよりもサ゗ズは小さい(グリフデー タを圧縮) • 現状では差分ダウンロードには対応していない • MIMEタ゗プは決まってない 3
  32. 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. 33. 使用例2 • 複数のプラットフォームのフォントをサポート する @font-face { font-family: Japanese; src: local(HiraKakuPro-W3), local(Meiryo); }
  34. 34. 今後の検討部分 • ダウンロードフォントについては初期実装が行 われた • 現状のCSSでは、フォントに対しては、サ゗ズ 指定、ボールド、゗タリックくらいしかサポー トしていない • OpenTypeフォントにはいろいろな業界から フゖードバックを受けたさまざまな機能が存在 • それをWeb(HTML/CSS)に持ってこれないか?
  35. 35. フォントの問題として • JIS X 0213:2004の変更 • “葛飾区”とか“祇園” • Windows VistaでシステムフォントがJIS 2004対応フォントに • Windows VistaではOpenTypeの機能を利用 して、フォントに複数の字形を割り当てるこ とでゕプリケーション側で対応可能
  36. 36. OpenType featureの使用 • CSSでフォントのどの字形を使うかを選択 • font-variant-east-asian: jis78 • font-variant-east-asian: traditional • これらはOpenType feature Tagの機能を利用
  37. 37. その他 (一例) • font-variant-ligatures: common-ligatures • font-variant-alternates: contextual • font-variant-numeric: diagonal-fractions
  38. 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. 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. 40. Any Question?

×