Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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,490 views

Published on

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

Published in: Technology
  • Be the first to comment

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?

×