CSS を使ったフルページ アニメーション

Internet Explorer 10 Developer Preview では、Internet Explorer 9 でサポートが導入された CSS 2D Transforms に加えて新たに CSS 3D Transforms (英語) と CSS Animations (英語) のサポートが追加されました。GPU の能力を活用して通常の JavaScript から非同期で実行される IE10 のこれらの機能は、スクリプトを使った従来の Web コンテンツ用アニメーションに対する、よりパフォーマンス効率に優れた、より柔軟な代替方法となります。 以前のブログ記事では CSS 3D Transforms、さらには CSS Animations および Transitions について紹介しました。今回の記事では、こうしたテクノロジの掟破りとも言える使用方法を紹介します。説明するのは “フルページ アニメーション” の概念で、これをナビゲーション プロセス中に使うことで、ブラウジングに滑らかさと連続性を加えることができます。今回の目標は、ユーザーが訪れたページの視界にコンテンツがスムーズに表示され、リンクのクリックや関連付けられた操作の実行に合わせてページが遷移しながら消えるのを、シームレスなブラウジング エクスペリエンスとして提供することです。 これらの効果は CSS Animations を使って HTML の <body> 要素を変形させることで実現されます。一方、このような使用方法には、レイアウトへの影響や <body> を変形させる際のサイズ、ページ ナビゲーションのタイミングを適切に設定してナビゲーションとアニメーションと意図通りに連携させる方法などいくつかの考慮事項があるため、これらについても説明します。 この記事のコード…

4

テストで Web を進化させよう

現在、各ブラウザーが搭載する HTML5 エンジンの質や正確性にはまだ大きなばらつきがあります。そうした中私たちは、Web プラットフォームの相互運用性とマークアップ共通化という目標に向け、W3C 主導によるテスト スイート開発への貢献を続けています。私たちがこれまでに提出したテストは合計 7573 件に達しており、これらは IE Testing Center でご覧いただけます。各ブラウザーにおけるマークアップ共通化のサポートが充実することは、HTML5 の目指す世界が実現されていくことを意味します。 今回のブログ記事のタイトルは、6 月 15 日と 16 日の週末に Adobe が同社サンフランシスコ オフィスで開催したイベント (英語) の名前 (“Test the Web Forward”) です。多数のボランティア参加者、W3C のエキスパート、そして Adobe、Google、Mozilla、Apple、HP、Microsoft の社員が集結した同イベントでは、Web 標準のテスト、CSS と SVG に関するテストの開発方法、役に立つバグの記録方法、テスト スイート管理に使えるツールなどについて有意義な議論を聞くことができました。 また、フリー フード、フリー ドリンクの ‘ハッカソン’ が全日イベントとして開催されました。ボランティア参加者からはこの土曜日 1 日だけで CSS OM (英語)、変換 (英語)、背景とボーダー (英語)、除外 (英語)、SVG (英語) その他のモジュール用のテスト ケースが提示され、優秀な参加者への各賞による表彰 (英語) も行われました。…

3

IE10 のプレフィックスのない CSS3 グラデーション

Windows 8 Release Preview の IE10 では、CSS グラデーションの W3C Candidate Recommendation (英語) がプレフィックスのない形式でサポートされます。また、IE10 では、2011 年 2 月 17 日の W3C 草案に基づく従来の CSS グラデーション構文 (英語) (ベンダー プレフィックス -ms- が前に付く) もサポートされます。今回の記事では、新旧の構文や動作の違いを紹介し、変更点について説明します。 主な変更 CSS を簡潔にするために、ベンダー プレフィックスの付いた CSS3 グラデーションからプレフィックスのない CSS3 に移行しようとすると、構文にいくつかの重要な変更が加えられていることに気が付くでしょう。多くのグラデーション ジェネレーターは、プレフィックスのないグラデーションのマークアップを含め、ブラウザーに依存しないマークアップを提供しています。多くの場合、プレフィックスのないマークアップは、グラデーションについて扱う CSS イメージの値の W3C Candidate Recommendation (英語) に基づき、無効となっています。ここでは、注意すべき変更点について説明します。 線形グラデーションと繰り返し線形グラデーション 草案 Candidate Recommendation 方向キーワード top、bottom、left、right キーワードが、開始点に基づいてグラデーション線の方向を示します。 top、bottom、left、right キーワードの前に “to”…

0

IE10 Release Preview で安定した Web を進化させる

Windows 8 Release Preview の計画の一部として、私たちは、IE10 によりサポートされるすべての W3C ドラフト標準を確認しました。特に、これらの仕様が次のとおりであることを期待していました。 安定している。つまり、最近加えられた追加点や変更点がなく、名前変更や大幅な変更がないと予想される。 IE10 以外の少なくとも 2 つのブラウザーによりサポートされる。 機能の主な使用事例において、それらのすべてのブラウザー間で相互運用可能である。 プレフィックスのない形式を含めて既に Web で使用されている。 Windows 8 Consumer Preview 以降 Candidate Recommendation になったか、2012 年中に Candidate Recommendations となる可能性が高い。 以下の W3C ドラフト標準機能は、これらの基準を満たしているため、IE10 ではプレフィックスのある形式のこれらの機能がサポートされます。 グラデーション (CSS イメージの値と置換コンテンツ (英語)) CSS アニメーション (英語) CSS 遷移 (英語) CSS 変換 (英語) font-feature-settings プロパティ (CSS フォント (英語)) Indexed Database API (英語)…

1

IE10 の CSS3 3D Transforms

CSS3 の機能は、よりリッチで没入的な Web エクスペリエンスの構築に役立ちます。最近の記事では、CSS3 の Transitions と Animations を使ってより個性的なサイトを実現する方法についてご紹介しました。CSS3 3D Transforms (英語) は、文字どおり、サイト開発に新たな次元を加えるものです。たとえば、Metro スタイルを採用している Windows 8 [スタート] 画面では、3D Transforms の微妙な効果を使って、タイルを押し込んだ際の視覚的な変化を実現しています。 Internet Explorer 10 タイルが押し込まれる前の状態 (左) と押し込んだ状態 (右) CSS Transforms に第 3 の次元を加える CSS3 2D Transforms と同様に、3D Transforms は、HTML 要素に幾何学的な変形処理を適用する CSS のプロパティである transform と transform-origin 向けに関数と値を提供します。CSS3 3D Transforms では、変形関数を拡張して、3 次元的な変形を可能にします。たとえば rotate()、 scale()、translate()、skew()、matrix() の各関数は、3 次元空間に対応するため Z 座標を表すパラメーター…

0

CSS user-select を使用して選択を制御する

IE10 Platform Preview 4 リリースには、新しい CSS プロパティである -ms-user-select (英語) のサポートが組み込まれています。Web 開発者は、このプロパティを使うと、比較的簡単に Web サイトで選択できるテキストを正確に制御できます。私には、コンピューターで文章を読むときに、テキストを選択する癖があります。このような読み方をするのは、私だけ (英語) ではありません (英語)。インターネット上のテキストを選択することが重要な場面は、他にも多くあります。 例として、典型的なニュース Web サイトを考えてみましょう。ほとんどのページにはニュースの記事が含まれています。ユーザーがテキストを選択しながら読む場合や、内容を共有したいと思う場合があるので、記事の内容は選択できる必要があります。また、ニュース Web ページには、メニューやサイトの他の部分へのリンクもあります。このような項目をユーザーが選択しなければならないケースは、あまりないでしょう。そこで -ms-user-select を使用すると、ニュース記事ではテキストを選択できようにして、メニューではテキストを選択できないようにすることができます。 IE Test Drive サイト (英語) に、このような指定を行うサンプルがあります。 ページ全体に -ms-user-select:none を設定してから、ブログ記事を含む要素に -ms-user-select:element を設定することで、ブログ記事の内容のみを選択できるようにしています。-ms-user-select:element は、IE によって初めて導入された新しいプロパティで、多くの場面で役立つのではないかと思います。要素に -ms-user-select:element を設定すると、その要素のテキストをユーザーは選択できますが、選択できるのは、この要素の範囲内に制限されます。ユーザーがニュース記事のコンテンツを選択する場合に、記事のすぐ下にあるフッター要素まで選択したいと思うことはないでしょう。要素に -ms-user-select:element を設定すると、マウスで選択範囲を正確に指定できているかどうかを気にせずに、記事の内容だけを簡単に選択できるようになります。 -ms-user-select に設定できる値は、次の 4 つです。 text – テキストを選択できます。 element – テキストは選択できますが、指定した要素の範囲内に制限されます。 none – テキストを選択できません。 auto –…

0

CSS コーナー: フォントの全要素を使用する

CSS3 @font-face ルール (英語) と WOFF フォント パッケージ形式 (英語) のクロス ブラウザー サポートが提供されるようになり、最近の Web 文字体裁は、”Web セーフ フォント” (英語) の領域をはるかに超えて拡張されてきています。New Yorker (英語) などの有名な雑誌では、記事の見出しに使った文字体裁の特徴が失われないように Web フォントを使用していますし、オバマ米大統領の再選キャンペーンでは、個性的なフォントを提供する Web フォントサービスの Typekit (英語) を利用しています。 まだ解決されていない制限があり、それが Web デザインでフォントの全要素を使用できない要因になっています。この制限というのは、多くのフォントに組み込まれている、OpenType® のさまざまなオプション機能を利用できないことです。これらの機能は、カーニング、上付き文字や下付き文字、合字などのコンテキスト字形、数字、代わりの東アジア グリフの利用、装飾的なスワッシュ字形など、基本的な文字体裁機能をサポートするグリフの置換や配置のオプションを定義しています。 例として、Gabriola に組み込まれている OpenType の “スタイル セット” (英語) を適用した場合に、どのようにテキストが表示されるかを見てみましょう。まず、従来の表示のテキストを示します。 これが、スタイル セットを適用すると、次のように表示されます。 CSS3 フォント モジュールの最近の更新では、CSS 内でこのような OpenType 機能を公開する新しいプロパティ セット (英語) が追加されています。このプロパティは、次の 2 種類に大別できます。 共通の…

0