Soumettre la recherche
Mettre en ligne
CSS3の最新事情
•
2 j'aime
•
1,438 vues
Makoto Kato
Suivre
This is a presentation of JAGAT event at 25th Match, 2010.
Lire moins
Lire la suite
Technologie
Signaler
Partager
Signaler
Partager
1 sur 40
Recommandé
WordPress Cloud Design Pattern
WordPress Cloud Design Pattern
Wataru OKAMOTO
File Server on Azure IaaS
File Server on Azure IaaS
junichi anno
WordPress アジュール部 ハンズオン
WordPress アジュール部 ハンズオン
Masaki Takeda
WordPressって何
WordPressって何
Kazue Igarashi
20130225 pronet study
20130225 pronet study
Six Apart
20120407 ASP.NET+C#で開発する大規模ソーシャルゲーム
20120407 ASP.NET+C#で開発する大規模ソーシャルゲーム
hideyuki ikeda
今日はMongoDBの話はしない
今日はMongoDBの話はしない
Akihiro Kuwano
WordPressベースの 月間1000万PVサイトのサーバー構成
WordPressベースの 月間1000万PVサイトのサーバー構成
株式会社雲屋ネットワーク
Recommandé
WordPress Cloud Design Pattern
WordPress Cloud Design Pattern
Wataru OKAMOTO
File Server on Azure IaaS
File Server on Azure IaaS
junichi anno
WordPress アジュール部 ハンズオン
WordPress アジュール部 ハンズオン
Masaki Takeda
WordPressって何
WordPressって何
Kazue Igarashi
20130225 pronet study
20130225 pronet study
Six Apart
20120407 ASP.NET+C#で開発する大規模ソーシャルゲーム
20120407 ASP.NET+C#で開発する大規模ソーシャルゲーム
hideyuki ikeda
今日はMongoDBの話はしない
今日はMongoDBの話はしない
Akihiro Kuwano
WordPressベースの 月間1000万PVサイトのサーバー構成
WordPressベースの 月間1000万PVサイトのサーバー構成
株式会社雲屋ネットワーク
LESSについて
LESSについて
okaSlide80
PHPで大規模ブラウザゲームを開発してわかったこと
PHPで大規模ブラウザゲームを開発してわかったこと
Kentaro Matsui
Windows azureを知ろう ロール&ストレージ編
Windows azureを知ろう ロール&ストレージ編
Chiho Otonashi
Lampで作るソーシャルアプリの負荷対策~アプリとインフラの調和のテクニック~
Lampで作るソーシャルアプリの負荷対策~アプリとインフラの調和のテクニック~
KLab株式会社
Heroku meetup#11(フル)
Heroku meetup#11(フル)
Hideki Ohkubo
20140924 mt cloud_handson_seminar
20140924 mt cloud_handson_seminar
Six Apart
カスタムフィールド 匠の流儀
カスタムフィールド 匠の流儀
loftwork
MT東京-09 Movable Type Meetup JSON
MT東京-09 Movable Type Meetup JSON
bitpart
Ajax非同期通信によるサーバー通信
Ajax非同期通信によるサーバー通信
Yossy Taka
7/7 WordBench kobe dreamweaver seminar
7/7 WordBench kobe dreamweaver seminar
Atushi Sugiyama
WordPress on Movable Type
WordPress on Movable Type
Hajime Fujimoto
HTML5 Local Storageを利用したメモ帳アプリ
HTML5 Local Storageを利用したメモ帳アプリ
Yossy Taka
RESTful #とは RailsスタイルからRESTを学ぼう
RESTful #とは RailsスタイルからRESTを学ぼう
Toru Kawamura
MediaWiki Tips for saveMLAK - wikibana
MediaWiki Tips for saveMLAK - wikibana
ninomy
ハンズのDynamoDBクラウドパターン
ハンズのDynamoDBクラウドパターン
Naoyuki Yamazaki
SEOにおいてのHTML/CSS/javaScript
SEOにおいてのHTML/CSS/javaScript
noda kana
Web Technology features with Firefox 3.6 / Gecko 1.9.2 and later
Web Technology features with Firefox 3.6 / Gecko 1.9.2 and later
Makoto Kato
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
Takeharu Igari
CSS Preprocessor Hands-on
CSS Preprocessor Hands-on
littlebustersreply
HTML5でスマートフォン開発の理想と現実
HTML5でスマートフォン開発の理想と現実
Takumi Ohashi
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
Naoki Matsuda
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5
Sho Ito
Contenu connexe
Tendances
LESSについて
LESSについて
okaSlide80
PHPで大規模ブラウザゲームを開発してわかったこと
PHPで大規模ブラウザゲームを開発してわかったこと
Kentaro Matsui
Windows azureを知ろう ロール&ストレージ編
Windows azureを知ろう ロール&ストレージ編
Chiho Otonashi
Lampで作るソーシャルアプリの負荷対策~アプリとインフラの調和のテクニック~
Lampで作るソーシャルアプリの負荷対策~アプリとインフラの調和のテクニック~
KLab株式会社
Heroku meetup#11(フル)
Heroku meetup#11(フル)
Hideki Ohkubo
20140924 mt cloud_handson_seminar
20140924 mt cloud_handson_seminar
Six Apart
カスタムフィールド 匠の流儀
カスタムフィールド 匠の流儀
loftwork
MT東京-09 Movable Type Meetup JSON
MT東京-09 Movable Type Meetup JSON
bitpart
Ajax非同期通信によるサーバー通信
Ajax非同期通信によるサーバー通信
Yossy Taka
7/7 WordBench kobe dreamweaver seminar
7/7 WordBench kobe dreamweaver seminar
Atushi Sugiyama
WordPress on Movable Type
WordPress on Movable Type
Hajime Fujimoto
HTML5 Local Storageを利用したメモ帳アプリ
HTML5 Local Storageを利用したメモ帳アプリ
Yossy Taka
RESTful #とは RailsスタイルからRESTを学ぼう
RESTful #とは RailsスタイルからRESTを学ぼう
Toru Kawamura
MediaWiki Tips for saveMLAK - wikibana
MediaWiki Tips for saveMLAK - wikibana
ninomy
ハンズのDynamoDBクラウドパターン
ハンズのDynamoDBクラウドパターン
Naoyuki Yamazaki
SEOにおいてのHTML/CSS/javaScript
SEOにおいてのHTML/CSS/javaScript
noda kana
Tendances
(16)
LESSについて
LESSについて
PHPで大規模ブラウザゲームを開発してわかったこと
PHPで大規模ブラウザゲームを開発してわかったこと
Windows azureを知ろう ロール&ストレージ編
Windows azureを知ろう ロール&ストレージ編
Lampで作るソーシャルアプリの負荷対策~アプリとインフラの調和のテクニック~
Lampで作るソーシャルアプリの負荷対策~アプリとインフラの調和のテクニック~
Heroku meetup#11(フル)
Heroku meetup#11(フル)
20140924 mt cloud_handson_seminar
20140924 mt cloud_handson_seminar
カスタムフィールド 匠の流儀
カスタムフィールド 匠の流儀
MT東京-09 Movable Type Meetup JSON
MT東京-09 Movable Type Meetup JSON
Ajax非同期通信によるサーバー通信
Ajax非同期通信によるサーバー通信
7/7 WordBench kobe dreamweaver seminar
7/7 WordBench kobe dreamweaver seminar
WordPress on Movable Type
WordPress on Movable Type
HTML5 Local Storageを利用したメモ帳アプリ
HTML5 Local Storageを利用したメモ帳アプリ
RESTful #とは RailsスタイルからRESTを学ぼう
RESTful #とは RailsスタイルからRESTを学ぼう
MediaWiki Tips for saveMLAK - wikibana
MediaWiki Tips for saveMLAK - wikibana
ハンズのDynamoDBクラウドパターン
ハンズのDynamoDBクラウドパターン
SEOにおいてのHTML/CSS/javaScript
SEOにおいてのHTML/CSS/javaScript
Similaire à CSS3の最新事情
Web Technology features with Firefox 3.6 / Gecko 1.9.2 and later
Web Technology features with Firefox 3.6 / Gecko 1.9.2 and later
Makoto Kato
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
Takeharu Igari
CSS Preprocessor Hands-on
CSS Preprocessor Hands-on
littlebustersreply
HTML5でスマートフォン開発の理想と現実
HTML5でスマートフォン開発の理想と現実
Takumi Ohashi
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
Naoki Matsuda
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5
Sho Ito
TeXの後継として、HTML5&CSS組版〜Vivliostyleプロジェクト
TeXの後継として、HTML5&CSS組版〜Vivliostyleプロジェクト
Shinyu Murakami
TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...
TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...
Akira Inoue
Htmlコーディングの効率化 後編
Htmlコーディングの効率化 後編
Yasuhito Yabe
次世代CSS組版〜Vivliostyle プロジェクト
次世代CSS組版〜Vivliostyle プロジェクト
Shinyu Murakami
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Yasuhito Yabe
マークアップ講座 02 CSS
マークアップ講座 02 CSS
eiji sekiya
⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1
Nishida Kansuke
Mvp road show_0830_rev1
Mvp road show_0830_rev1
Takano Masaru
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
Yasunobu Ikeda
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
Shumpei Shiraishi
Css3
Css3
Goro Ide
JavaScriptトレンド総括(2014)
JavaScriptトレンド総括(2014)
VOYAGE GROUP
現在のWebフロントエンドの現状と愚痴と、それに対するHaxeフロントエンドライブラリMageについて
現在のWebフロントエンドの現状と愚痴と、それに対するHaxeフロントエンドライブラリMageについて
Nobukazu Hanada
インタラクティブコンテンツにおけるHTML5とFlash
インタラクティブコンテンツにおけるHTML5とFlash
Yasunobu Ikeda
Similaire à CSS3の最新事情
(20)
Web Technology features with Firefox 3.6 / Gecko 1.9.2 and later
Web Technology features with Firefox 3.6 / Gecko 1.9.2 and later
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
CSS Preprocessor Hands-on
CSS Preprocessor Hands-on
HTML5でスマートフォン開発の理想と現実
HTML5でスマートフォン開発の理想と現実
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5
TeXの後継として、HTML5&CSS組版〜Vivliostyleプロジェクト
TeXの後継として、HTML5&CSS組版〜Vivliostyleプロジェクト
TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...
TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...
Htmlコーディングの効率化 後編
Htmlコーディングの効率化 後編
次世代CSS組版〜Vivliostyle プロジェクト
次世代CSS組版〜Vivliostyle プロジェクト
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
マークアップ講座 02 CSS
マークアップ講座 02 CSS
⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1
Mvp road show_0830_rev1
Mvp road show_0830_rev1
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
Css3
Css3
JavaScriptトレンド総括(2014)
JavaScriptトレンド総括(2014)
現在のWebフロントエンドの現状と愚痴と、それに対するHaxeフロントエンドライブラリMageについて
現在のWebフロントエンドの現状と愚痴と、それに対するHaxeフロントエンドライブラリMageについて
インタラクティブコンテンツにおけるHTML5とFlash
インタラクティブコンテンツにおけるHTML5とFlash
Plus de Makoto Kato
Active scripting
Active scripting
Makoto Kato
e10sとアプリ間通信
e10sとアプリ間通信
Makoto Kato
Emoji
Emoji
Makoto Kato
Moz2D
Moz2D
Makoto Kato
Firefox OSのアーキテクチャと構成技術
Firefox OSのアーキテクチャと構成技術
Makoto Kato
Mozillaのビルドインフラ
Mozillaのビルドインフラ
Makoto Kato
Openness, Innovation and Opptunity
Openness, Innovation and Opptunity
Makoto Kato
Mobile Web
Mobile Web
Makoto Kato
Firefox Mobile
Firefox Mobile
Makoto Kato
Firefox 4 and Mobile
Firefox 4 and Mobile
Makoto Kato
Mobile addon
Mobile addon
Makoto Kato
keep it real
keep it real
Makoto Kato
Firefox mobile for android internals
Firefox mobile for android internals
Makoto Kato
Think.next
Think.next
Makoto Kato
Firefox 4 with SVG
Firefox 4 with SVG
Makoto Kato
Firefox for mobile
Firefox for mobile
Makoto Kato
Firefoxの開発プロセス
Firefoxの開発プロセス
Makoto Kato
"Open"
"Open"
Makoto Kato
ブラウザの歴史
ブラウザの歴史
Makoto Kato
Raindrop
Raindrop
Makoto Kato
Plus de Makoto Kato
(20)
Active scripting
Active scripting
e10sとアプリ間通信
e10sとアプリ間通信
Emoji
Emoji
Moz2D
Moz2D
Firefox OSのアーキテクチャと構成技術
Firefox OSのアーキテクチャと構成技術
Mozillaのビルドインフラ
Mozillaのビルドインフラ
Openness, Innovation and Opptunity
Openness, Innovation and Opptunity
Mobile Web
Mobile Web
Firefox Mobile
Firefox Mobile
Firefox 4 and Mobile
Firefox 4 and Mobile
Mobile addon
Mobile addon
keep it real
keep it real
Firefox mobile for android internals
Firefox mobile for android internals
Think.next
Think.next
Firefox 4 with SVG
Firefox 4 with SVG
Firefox for mobile
Firefox for mobile
Firefoxの開発プロセス
Firefoxの開発プロセス
"Open"
"Open"
ブラウザの歴史
ブラウザの歴史
Raindrop
Raindrop
Dernier
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Hiroshi Tomioka
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
Dernier
(11)
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
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?