Windows Update でIEの日本語の縦書き機能を強化

先日リリースされた Windows Update でIEの日本語の縦書き機能が強化されました。意外と思われる方もいるかもしれませんが、実はIEでも縦書きをサポートしています。 横書きと縦書きが混在するレイアウトを使用するというのは、日本語のほかには数言語しかない、世界でもとてもユニークなフォーマットです。中国語も今は横書きが主流で、特にデジタルの世界ではほとんど縦書きは使われていないそうです。日本でも縦書きは使われなくなってきているイメージがあるかもしれませんが、新聞、書籍、漫画や国語の教科書ではまだまだ現役です。近年はデジタル書籍が普及し、画面上で縦書きを見る機会が増えていますし、日本政府の政策もあり、今後ますます書籍や教科書の電子化が進んでいくことが予想されます。日本の開発チームでは、日本人が紙の媒体で「あたりまえ」と思っているテキストフォーマットをデジタルで再現できるように開発を進めています。 Windows タブレットで子供たちが勉強するという日もそう遠くないかもしれません。


Internet Explorer MVP による IE Test Drive 技術解説 : SVGとCSSの表現

Internet ExplorerのMVPによる Internet Explorer 10 Test Driveの技術解説記事の第6回目は、Interactive Film いつも可愛い – キリンジの制作に携わったピクセルグリッドの小山田さんによる「SVGとCSSの表現」の解説です。 Internet Explorer 9 以降、たくさんの HTML5 に関する新しい技術がサポートされています。これらの新しい技術には、表現に関する技術も多く含まれており、Internet Explorer 10 Test Drive に公開されているデモ、BetaFishIE にも新しい表現技術が使われています。 BetaFishIE このデモの主役である金魚は HTML、SVG、CSS3 2D transforms、CSS3 Animation などで表現されています。また、画面下部のスターテス表示には HTML5 の canvas が利用されています。 従来では、このようなダイナミックなアニメーションはプラグインに頼ることがほとんどでした。しかし、標準技術の進化とそれをサポートしたブラウザーが組み合わせることにより、最近ではプラグインに頼る必要なくダイナミックなインタラクションを実現できるようになりました。 Internet Explorer 10 では次の技術をサポートしており、これらは開発におけるインタラクション付与へと応用できるでしょう。 Internet Explorer 9 から追加された主な新技術 HTML5 video と audio 要素 HTML5 canvas SVG1.1 (一部除く) CSS3 Backgrounds & Borders…


「HTML5+IE9 Web Camp 2 with html5j.org」セミナーを開催

今週の金曜日、東京/品川において、HTML5のコミュニティとして活動されているhtml5j.orgさんとの共催で「HTML5+IE9 Web Camp 2 with html5j.org」を開催します。 W3C/Keioの深見さんによる「HTML5 登場の意義と Web 標準とのつきあいかた」に始まり、日本マイクロソフトからIE10でのHTML5実装、html5j.orgからはWebSockets、F12 開発者ツール、SVGをテーマに開発者向けの濃い話、そして、先日、当ブログでもご紹介した「FINAL FANTASY XIII-2」のプロモサイト「モーグリの TWEET キャッチ」を制作いただいたクレアテックさんによるHTML5やCSS3の使い処解説と盛りだくさんな内容になっています。 この機会にぜひお越しください。


IE 9 標準モードでは text/css のみがスタイルシートとして有効

本記事は、マイクロソフト本社の IE チームのブログ から記事を抜粋し、翻訳したものです。  【元記事】IE9 Standards Mode Accepts only textcss for stylesheets (2011/3/28 1:39 AM)   先日、以下のように IE 9 では適切に表示されないブログを目にしました。 このブログ サイトは、他のブラウザーを使ったり、アドレス バーのアイコンをクリックして互換表示にした場合には、以下のように適切に表示されます。 IE 9 では何が起きているのでしょうか。明らかにスタイルシートが適用されていませんが、なぜでしょうか。 F12 キーで起動される、IE 9 開発者ツールの [コンソール] タブには、サーバーがスタイルシート応答として適切でない MIME タイプを指定している場合に通知が記録されます。ただし、スタイルシートのダウンロードが失敗した場合、[コンソール] には明示的な通知は記録されません。ダウンロードの失敗の原因を究明するには、開発者ツールの [ネットワーク] タブ、または Fiddler を使用する必要があります。 このサイトの問題の根本は、Fiddler を使ってトラフィックを確認すればすぐに明らかになります。IE 9 が標準モードで実行されていると、このサイトは、重要なスタイルシートに対して HTTP/406 のエラーを返します。 スタイルシートのダウンロードが失敗すると (上の図の赤字エントリを参照)、IE が適用できるスタイルがなくなり、スタイル設定なしの HTML が表示されます。 IE 9 の標準モードでは何が異なるのでしょうか。 旧バージョンの IE…


IE10 Platform Preview 1 における CSS3 グラデーション

本記事は、マイクロソフト本社の IE チームのブログから記事を抜粋し、翻訳したものです。  【元記事】CSS3 Gradients in IE10 Platform Preview 1 (2011/5/5 1:56 AM) Internet Explorer 10 Platform Preview 1 において CSS グラデーションのベンダー プレフィックスがサポートされるようになりました。CSS3 グラデーションは CSS3 Image Values and Replaced Content 仕様 (作業草稿段階) のサブセクションで定義されています。CSS マークアップを使用すると、ブラウザーによってグラデーション画像が生成され、CSS 画像が使用可能な場所に描画されます。Platform Preview 1 では、CSS3 グラデーションは背景画像として使用することができます。 CSS グラデーションを使用する理由 グラデーションは、サイトを視覚的に美しくする方法として Web 開発者がよく使用します。深さを表す効果や色の飛沫を表現するために使われたり、テキストとメニューの背景として微かなグラデーションが使用されます。 サイトおよびメニューの背景に使用されている微かなグラデーションの一例 グラデーション効果を作成する最も一般的な方法は、グラデーションが必要な場所にラスター画像を使用することですが、CSS グラデーションを使用すれば、Web コンテンツ作成者はグラデーション用に別の画像を作成する必要はありません。 CSS グラデーションなら CSS マークアップによって色が滑らかに変化するグラデーションを生成することができます。単色の背景と同様に、グラデーションを使用した背景は CSS で指定できます。また生成されたグラデーション画像は、適用されるコンテナーのサイズに依存します。 たとえば、サイズが変化する…


Windows Summit 2010のIE9ビデオに日本語字幕を追加

Windows Summit 2010 は、Windows 7 や Internet Explorer 上でハードウェアやソフトウェアを構築、もしくは、これから構築したいとお考えになっている 開発者、設計者、エンジニア、テスター向けのオンライン イベントです。 http://msdn.microsoft.com/ja-jp/windows/hardware/gg462959 ここの「Internet Explorer 9」カテゴリー(ダブの一番右側です)から、IE9の概要と新機能について説明しているビデオに日本語字幕をつけましたので、ぜひご覧ください。ざっくりでいいから、IE9は何が変わったのか?を知りたいという方にぴったりの内容になっています。また、すべてのスライドは日本語化されていますので、あわせてご利用ください。 http://windowssummit.tri-digital.com/language-resources/ja.aspx


IE9、不透明度、アルファ

本記事は、マイクロソフト本社の IE チームのブログから記事を抜粋し、翻訳したものです。 なお、本記事中の Internet Explorer 9 は、元記事執筆当時の ( 正式リリース以前の) ものについて記載しておりますのでご了承ください。 【元記事】 IE9, Opacity, and Alpha (2010/8/17 6:15PM) IE9 では、CSS3 カラー モジュール (英語) と、よく使われるその不透明度プロパティがサポートされるようになりました。他の標準ベースの機能と同様に、不透明度が実装されることで、他のブラウザーで使用されているマークアップが IE9 標準モードでもそのまま動作します。 IE8 以前のバージョンでは、IE 固有のフィルター プロパティのアルファ フィルターを使用して不透明度を適用する代替メカニズムが実装されていました。IE9 標準モードでは不透明度だけがサポートされ、アルファ フィルターはサポートされないため、互換性の問題が生じます。(IE9 の Quirks モード (互換モード)、IE7、および IE8 では、アルファ フィルターはサポートされますが、不透明度は実装されていません。) ベスト プラクティスである機能検出を使用するサイトでは、これは問題になりません。それらのサイトは、IE9 が不透明度をサポートしていることを検出して、フィルターの代わりに不透明度を使用します。問題は、ブラウザー検出を使用するサイトです。このようなサイトは、IE が常に不透明度の代わりにアルファ フィルターを使用するものと誤って判断し、スクリプトでフィルター プロパティだけを変更します。そのような Web ページの不透明度エフェクトは、IE9 既定の IE9 ドキュメント モードで実行されると、正しく表示されません。修正方法としては、以前の記事 (英語) で説明したように、最初に標準ベースの不透明度機能を検出し、次にブラウザー固有のフィルター機能を検出します。 CSS…


CSS コーナー: 良質なデザインは良質な Web タイポグラフィから

本記事は、マイクロソフト本社の IE チームのブログから記事を抜粋し、翻訳したものです。 なお、本記事中の Internet Explorer 9 は、元記事執筆当時の ( 正式リリース以前の) ものについて記載しておりますのでご了承ください。 【元記事】The CSS Corner: Better Web Typography For Better Design (2010/7/15) Web ページのデザインから抜け落ちるもの 「Web デザインの 95% はタイポグラフィ」。Web コンテンツの大半がテキストで構成されているにもかかわらず、これまでデザイナーとユーザーは、クライアント オペレーティング システム間で互換性のある、いくつかの決まったフォントしか使用できませんでした。この不自由なタイポグラフィ環境を改善するため、各種ブラウザーに対応できる CSS による手法、グラフィック ベースの解決策 (英語)、プラグイン (英語) など、あらゆる手段が講じられてきましたが、そのどれもが追加の記憶域や帯域幅が必要になったり、アクセシビリティが低下したりといったマイナス面を伴うものでした。 こうしたことから、Photoshop で作成したデザインのモックアップから Web ページを作成する段階で、決まって書体が犠牲になるというのが当たり前の状況でした。 相互運用性に欠ける CSS この課題を解決するために必要とされたのは、フォント リソースを記述するための相互運用性のある CSS 構文でした。IE では、1997 年から CSS2 の @font-face 規則がサポートされていましたが、この最も初期の実装と CSS3 フォント (英語)…