IE10 でテキスト中心のリッチなページを作成する
本記事は、マイクロソフト本社の IE チームのブログ から記事を抜粋し、翻訳したものです。
【元記事】Building Rich Text-Centric Pages in IE10 2011/10/11 7:38 AM
Windows Developer Preview に搭載された Internet Explorer 10 では、テキスト中心のリッチな Web ページやアプリの作成を容易にするための新しい CSS 機能が 2 つ追加されています。1 つは CSS3 Regions です。これは、複数の非連続領域間をまたいでコンテンツを流し込むための、軽量な機能を提供します。もう 1 つは CSS3 Hyphenation です。IE10 でこれがサポートされたことにより、開発者は、さまざまな言語でのテキストのハイフネーションを簡単な方法で行えるようになりました。
この 2 つの新しい機能は、こちらの記事やこちらの記事で紹介してきた他のすばらしい CSS 機能 (CSS3 Grid Layout、CSS3 Flexible Box Layout、CSS3 Multi-column Layout、Positioned Floats など) を補完するものです。こうした標準ベースの機能を組み合わせることで、開発者は、さまざまな画面解像度やフォーム ファクターに応じて拡大/縮小する高品質な Web アプリや Web サイトを設計するための新しい強力なツールを手に入れることができます。
CSS3 Regions
CSS3 Regions は、コンテンツのオーバーフローを管理する新しいメカニズムです。スクロールバーを追加する、コンテンツをクリッピングする、コンテンツを枠外にはみ出させる、などの従来の方法に加えて、ある要素からのオーバーフローを別の要素に流し込むことができるようになります。これには 2 つの新しい CSS プロパティを使用します。
CSS3 Regions の使用法の例を下に示します。
<!DOCTYPE HTML>
<html>
<head>
<style>
iframe {
-ms-flow-into: contentIdentifier; /* causes the iframe to hide */
}
#div1, #div2 {
-ms-flow-from: contentIdentifier; /* causes these elements' content to come from the iframe with "-ms-flow-into: contentIdentifier" */
width: 120px;
height: 300px;
float: left;
border: solid 2px lightblue;
margin-right: 8px;
}
</style>
</head>
<body>
<iframe src="content.html"></iframe>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
CSS は従来、スクロールを前提とした縦に長い Web ページにコンテンツを配置するために最適化されたスタイル言語でした。
開発者がコンテンツを配置する際に使用できるさまざまなプロパティが定義されており、その中には、"オーバーフロー" (領域内に収まらないコンテンツ) を処理するための機能もいくつか含まれています。
Web ページでオーバーフローを処理する方法として最も一般的なのは、スクロール バーを追加することです。この手の分野のエキスパートが読み取りスピードと理解度に対するスクロールの影響について考察している、こちらのブログ記事もぜひご参照ください。
従来、Web 上で、新聞や雑誌のように複雑で見た目の良いテキスト中心のデザインを作成することは非常に困難であり、スクロール バーに全面的に頼るほかありませんでした。数ヶ月前、W3C において、Adobe が CSS3 Regions のワーキング ドラフトを提案しました (Internet Explorer チームの Alex Mogilevsky が共同編集者として参加しています)。
CSS3 Regions は、開発者に新しいアプローチを提供し、Web プラットフォームを大幅に強化します。Windows Developer Preview の Internet Explorer 10 では、CSS3 Regions をベンダー プレフィックス (-ms-) 付きで提供開始しています。
高度なシナリオを可能にするため、CSS3 Regions 仕様では、イベント、プロパティ、およびメソッドも定義されており、それらを組み合わせることで、JavaScript を使用して動的に領域を作成、管理できます。IE10 では、こうした機能の初期バージョンが使用可能です。詳細は、W3C CSS3 Regions 仕様の現行ドラフトに記述されています。
IE10 のテスト ドライブ サイト ietestdrive.com の Hands On: CSS3 Regions デモには、CSS3 Regions の動作を確認できる対話型のサンプルがあります (Windows Developer Preview の Internet Explorer 10 が必要)。
HTML5 Web アプリケーションの進歩とともに、CSS3 Regions を使用して、さまざまな画面解像度とフォーム ファクターに柔軟に対応する複雑なテキスト レイアウトを利用したいと考える開発者が増えてくることでしょう。
CSS3 Hyphenation
Windows Developer Preview で公開されたもう 1 つの新機能が CSS3 Hyphenation です。CSS3 Hyphenation がネイティブでサポートされることにより、開発者はブラウザー組み込みの高性能でプロ品質のハイフネーション機能を利用できるようになります。
ここ数年間で、ユーザーの傾向は変化し、それに合わせて Web プラットフォームも進化を遂げています。ユーザーは幅広い種類のデバイスで Web コンテンツを利用するようになっています。その代表的な例が携帯電話、タブレット、ネットブックなどですが、これらのデバイスでは、画面内に収まるテキストの量が少ないため、文字列の体裁の問題 (たとえば、"白い川" のように空白が繋がって見える状態など) が発生しやすくなります。
それと同時期に、CSS3 Multi-Column、CSS3 Regions、Positioned Floats などを含む Web プラットフォームの新機能が登場しました。それらの機能により、より複雑なテキスト中心のレイアウトを作成できるようになりましたが、このようなレイアウトでは、通常、行の幅が狭くなり、文字列の体裁に関するいくつかの問題が多発するようにもなりました。
Positioned Float 要素を回り込む狭いテキスト列 (CSS3 Hyphenation を使用しない場合)
CSS3 の新しい機能を使用した見栄えの良いサイトやアプリを作成し、それがさまざまなデバイスで同様に見栄え良く表示されるようにするには、Web プラットフォームに強力なハイフネーションのサポートを組み込むことが重要です。
Microsoft Office での長年のテキスト ハイフネーション処理の経験を基に、Internet Explorer 10 では、世界の主要 18 言語でのハイフネーションをサポートしています。サポート言語は、カタルニア語、チェコ語、デンマーク語、オランダ語、英語、フランス語、ドイツ語、イタリア語、ノルウェー語 (ブークモールおよびニーノシュク)、ポーランド語、ポルトガル語、ポルトガル語 (ブラジル)、ロシア語、スペイン語、スウェーデン語、トルコ語です。また、これらの言語の多くについて、主要な方言 (イギリス英語とアメリカ英語など) がサポートされています。
Positioned Float 要素を回り込む狭いテキスト列 (CSS3 Hyphenation を使用した場合)
ietestdrive.com の Hands On: Multi-column Layout デモで、CSS3 Hyphenation の機能を実際に確かめてみてください (Windows Developer Preview の Internet Explorer 10 が必要)。
あなたなら何を作りますか
私たちは、IE10 で Web プラットフォームに導入された CSS3 Regions、CSS3 Hyphenation、その他の新機能を使って、皆さんがどのようなサイトやアプリを作るかに注目しています。これらの機能を使用した際は、ぜひ皆さんのフィードバックをこちらの Internet Explorer ブログ、または http://connect.microsoft.com/ie/ にお寄せください。
—Christian Stockwell、Internet Explorer プログラム マネージャー