CSS3の最新事情
2 likes1,438 views
This is a presentation of JAGAT event at 25th Match, 2010.
![Linear Gradients
• linear-gradient( [<point> || <angle>,]?
<stop>, <stop> [, <stop>]* )
linear-gradient(
top,
blue,
white);
linear-gradient(
45deg,
blue,
white);](https://image.slidesharecdn.com/css3-100328010343-phpapp01/85/CSS3-20-320.jpg)
![Radial Gradients
• radial-gradient( [<position> || <angle>,]?
[<shape> || <size>,]? <stop>, <stop>[,
<stop>]* )
-moz-radial-
gradient(
red,
yellow,
green
);](https://image.slidesharecdn.com/css3-100328010343-phpapp01/85/CSS3-21-320.jpg)
CSS3の最新事情
- 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?