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

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


Let It Snow… もっと速く!

本記事は、マイクロソフト本社の IE チームのブログ から記事を抜粋し、翻訳したものです。  【元記事】Let It Snow… Faster!2011/12/21 7:34 PM PC のハードウェア性能と Windows 8 の新しいタッチ操作機能を活用できる、この季節にぴったりな HTML5 エクスペリエンスをご用意しました。 Let It Snow (英語) では、GPU の力で雪が降りしきる、冬の景色をご覧いただけます。ハードウェア アクセラレーションを使った HTML5 Canvas、SVG、CSS などを活用したエクスペリエンスとなっています。IE10 でのマルチタッチに対応する Windows Developer Preview (英語) では、実際に手を伸ばして立て札の雪を払い、ホリデー メッセージをご覧いただけます (もちろんマウスでも操作可能です)。ご使用のブラウザーの能力が十分と思われる場合は、[Snowflakes] (雪の粒の数) を 1,000 まで上げてみてください。この設定で、ブリザードというよりは雪がちらついている状態になってしまう場合は、IE9 (または IE10) で、組み込みのハードウェア アクセラレーションを有効にしてお試しください。 画像をクリックすると Let It Snow デモが表示されます 昨年最初のプレビュー (英語) が披露された IE10 では、開発者からの要望が多いサイトで使用可能な HTML5 の提供を推進しており、美しくインタラクティブな…


標準ベースの Web グラフィックに移行する IE10

本記事は、マイクロソフト本社の IE チームのブログ から記事を抜粋し、翻訳したものです。  【元記事】Moving to Standards-based Web Graphics in IE102011/12/09 1:05 PM ユーザーは、どのブラウザーでインターネットのどのサイトを見ても、似たような品質のエクスペリエンスを得られることを期待するものです。ブラウザーを問わず "同じマークアップで同じ結果" を実現する (Same Markup) という目標に対する Internet Explorer での取り組みについて、このブログで初めて話題にしたのは、IE9 Platform Preview 1 のリリースを発表した、2010 年 3 月の記事でのことでした。IE9 によって私たちはこの目標に向けてに大きく前進しましたが、IE10 の HTML5 に基づく標準モードと互換モードは、この取り組みをほぼ完成させるものです。「IE10 の HTML5 解析」では、IE10 の HTML5 ベースの標準モードおよび互換モードで廃止された従来の機能をいくつかご紹介しました。 この記事では、これに加えて 2 つの機能が廃止されたことについてお話しします。Vector Markup Language (VML) と DirectX ベースのフィルターおよびトランジションです。どちらの機能も IE9 以降は MSDN のドキュメンテーションでは非推奨扱いとなっており (たとえば「フィルターおよびトランジション」(英語) の 1…


アプリケーションのための HTML5: IE10 Platform Preview 4

本記事は、マイクロソフト本社の IE チームのブログ から記事を抜粋し、翻訳したものです。  【元記事】HTML5 for Applications: The Fourth IE10 Platform Preview 2011/11/30 9:23 PM Windows Developer Preview (英語) で利用できる IE10 Platform Preview の更新がダウンロード (英語) 可能になりました。このプレビュー版では、HTML5 テクノロジのサポートがさらに充実しており、よりリッチな Web アプリケーションを、大幅に改良されたパフォーマンスで利用することができます。IE10 では、CSS3 によるトランスフォームやアニメーション、SVG などのテクノロジに対してハードウェア アクセラレーションを行うことで、他のブラウザーよりも高速なレンダリングを実現しています。次の短いビデオではそのようすを紹介しています。 IE10 に追加された HTML5 対応やパフォーマンス改良点の紹介 今回リリースされた Platform Preview 4 では、開発者がサイトですぐに活用できる HTML5 テクノロジが追加されています。完全なリストは IE10 の開発者向けガイド (英語) でご確認いただけますが、ここでは一部を紹介します。 Cross-Origin Resource Sharing (CORS) により、ドメインを横断した XMLHttpRequest を安全に使用…


よくある IE 対応での問題を解決する

本記事は、Rey Bango 氏のブログ から記事を抜粋し、翻訳したものです。  【元記事】Update your Docmode for Web Standards 2012/01/09 Internet Explorerには、過去のIEを対象に作成されたWebページとの互換性とWeb標準に準拠したWebページの互換性を実現するために、「ブラウザーモード」と「ドキュメントモード」という互換性確保のための機能を備えています。 ブラウザーモード:WebページをどのバージョンのIEでブラウズするのかを切り替えられる。このモードはUser Agent文字列で指定することができます。ブラウザーの種類やバージョンの判定に使用されます。 ドキュメントモード:どのバージョンのIEのレンダリングエンジンでHTMLをレンダリングするのかを切り替えられる。このモードの指定はMETAタグへのX-UA-Compatibleタグの記述、HTTP レスポンスヘッダー、DOC TYPE宣言という優先順位になっています。 制作したWebページがブラウザーでどのようにレンダリングされるかは、そのWebページの互換性をどのように定義しているかに左右されます。より正確に、より厳密に定義することで、Web制作者の期待通りにWeb ページが表示、動作します。HTML5で記述している場合には、HTML5のDOCTYPE宣言をするところから始めましょう。IEのドキュメント互換モードの詳細についてはこちら(英語)をご覧ください。 <!DOCTYPE html> Internet Explorer 9(以下 IE9)および Internet Explorer 10(以下 IE10)では、HTML5による記述が標準となっているので、このDOCTYPE宣言によって、標準モード(英語)としてレンダリングされます。また、この宣言によって Chrome や Firefox といった他のブラウザーでも、HTML5に準拠してレンダリングされます。 なお、IE10 と IE9 では同じように動作いたしますので、ここでは IE10 の対応を中心にご説明し、IE9については都度、補足します。 ステップ1: ドキュメントモードがIE10もしくはIE9の「標準」モードになっているかどうかを確認する まずは、Webサイトが標準モードで動作しているかどうか、その設定が既定になっているかを確認します。 1. Web サイトをIE10 Platform Preview で開く 補足:このステップは IE9 でも同じようにご利用いただけます。IE10 でご利用いただく場合は、最新の IE10 Platform…

0

ピン留めウィザード – もっとインタラクティブな Web サイトを、5 分間で作成

本記事は、マイクロソフト本社の Windows チームのブログ から記事を抜粋し、翻訳したものです。  【元記事】Introducing the pinning wizard – a more interactive website in 5 minutes2011/11/07 今回は、BuildMyPinnedSite.com にて、”ピン留め” で簡単にサイトを改善する方法を紹介します。 ピン留めサイトは、Web サイトをよりインタラクティブにしてくれる、Internet Explorer 9 の機能です。通知機能により、ブラウザーの外からユーザーの注意を引きつけ、アプリケーションのように、クリック 1 回で Web サイトを起動させることができます。 これで、最新の魅力的なコンテンツが、常にユーザーの目に留まります。その結果、ピン留めを利用したサイトでは、ユーザーのエンゲージメントが 50% 以上アップ。トップランクの 40,000 サイトが、既にこれを実践しています。 日々の仕事に追われる開発者やデザイナー、ブロガーの皆さんもご心配なく。ピン留めウィザードはおよそ 5 分で完了します。 ロゴやサイト リンクを追加し、ピン留めウィザードによって生成された 1 行のコードを HTML にコピー アンド ペーストするだけで、すぐにユーザー向けに提供できます。 具体的な手順をご紹介します。 BuildMyPinnedSite.com にアクセスして以下のアイコンをクリックし、ピン留めウィザードを開始します。 まずはサイト名と URL を設定しましょう。サイトのファビコンが必要な場合は、xiconeditor.com で簡単にロゴをファビコンに変換できます。 ユーザーにアクセスしてほしい、主要な場所へのリンクを追加します。これらはジャンプ リストのトピックとして表示されます。 RSS フィードを配信している場合は、RSS…


IE10 で正確かつスピーディに入力する

本記事は、マイクロソフト本社の IE チームのブログ から記事を抜粋し、翻訳したものです。  【元記事】Typing with Speed and Accuracy in IE102011/11/9 2:00 AM 正確かつスピーディな入力は、あらゆるソフトウェアで重視されるユーザー エクスペリエンスの一つです。物理キーボードのないデバイスについては、使いやすいテキスト入力機能を提供することが、いっそう重要になります。 Windows 8 は、あらゆるデバイスでスムーズにテキストを入力するための機能がいくつか用意されています。その 1 つがスペル チェック機能です。 Windows 8 のスペル チェック機能は、ユーザーがテキストを入力するのと同時にスペルの間違っている単語を特定します。一般的に間違いやすい単語は自動的に修正され、それ以外の単語については必要に応じて修正を適用できます。 Windows 8 では、スペル チェック機能をオペレーティング システム全体のあらゆるアプリケーションでサポートしており、IE10 もその 1 つです。もちろん、IE10 のブラウザー機能としてのスペル チェックも、これをサポートするすべてのバージョンの Windows (Windows 7 を含む) で提供されます。 自動修正 IE10 では、ブラウザーベースの自動修正が初めて実装されています。 よくあるスペルの間違いは、後から確認して修正するよりもその場で自動的に修正してもらう方が便利な場合があります。まれに自動修正によって余計な修正が適用されてしまうことがありますが、この場合も CTRL キーを押しながら Z キーを押す (“元に戻す”) か、マウスで自動修正のコンテキスト メニューを表示して、修正を取り消すことができます。 自動修正メニューは、マウスだけでなくキーボードからも表示することが可能です。修正したい単語内に挿入ポイントを移動して SHIFT キーを押しながら F10…


CSS3 の Transitions と Animations を使用して、Web サイトをもっと個性的に

本記事は、マイクロソフト本社の IE チームのブログ から記事を抜粋し、翻訳したものです。  【元記事】Adding Personality with CSS3 Transitions and Animations2011/11/22 7:33 AM Internet Explorer 9 および 10 では、高パフォーマンスのコンパイル済み JavaScript やハードウェア アクセラレーションによる HTML5 および CSS 3 のレンダリングといった最新機能によって、Web 開発者が格段にリッチなユーザー エクスペリエンスを実現できるようになりました。 互いに関連する 2 つの機能 CSS3 Transitions と CSS3 Animations を使用することで、Web 開発者は宣言的なアプローチで、簡単に Web ページに個性を加えることができます。 この記事では、Windows Developer Preview の IE10 に実装されたこれら 2 つの機能と、Windows 8 の HTML で記述された Metro スタイル…