こんにちは。羽山 祥樹（ @storywriter ）です。
このブログでは、ユーザーエクスペリエンス（UX）／ 情報アーキテクチャ（IA）／ アクセシビリティのウェブ制作の話題をお届けしています。
今回の記事は、『ie7の「ページの拡大」によるレイアウト崩れは「letter-spacing」で回避できる？』というタイトルで、2008年に掲載したものに、大きく加筆・修正したものです。
Internet Explorer 7 向けの、いわゆるCSSハックの記事なのですが、ながらく非公開ステータスになっていました。当時、加筆のため、いったん非公開にして、そのまま忘れていたような気がします。（苦笑）
この実装テクニックは、他で見かけない情報だったので、このたび加筆のうえ、再掲します。
そもそもの課題は、ie向けのハックで有名な「zoom: 1;」の代替方法を探していました。「zoom: 1;」は、CSSの文法として誤っているので、できれば使いたくないためです。
今となっては懐かしい話ですが、Internet Explorer 7 から「ページの拡大」という機能が追加されました。
ブラウザの右下にあるボタンで、ページ全体を拡大できるという機能です。
Internet Explorer 6 までは文字しか拡大されませんでしたので、アクセシビリティの点からも、ページ全体が拡大されるのは好ましいはずでした。
しかし、Internet Explorer 7 の「ページの拡大」機能は、残念ながら問題がありました。100%では正しく表示されるページも、「ページの拡大」するとレイアウトが崩れてしまう、という現象がよく起こっていたのです。
この対策として、CSSの「letter-spacing」プロパティで「ページの拡大」時のレイアウト崩れを回避することができます。
この実装テクニックは、あまり知られていません。もともとは富士通のウェブサイトで、アクセシビリティ対応のために、ひっそりと使われていたものです。
Internet Explorer 7 の「ページの拡大」のトラブルは、ちょっと独特なもので、たとえば、普通にテキストと画像を並べただけでも、Internet Explorer 7 の「ページの拡大」機能を使うと、文字が重なってしまいます。
対策は、崩れる箇所に対して、親になる要素（タグ）に「letter-spacing」の値を設定します。すると、Internet Explorer 7 の「ページの拡大」機能でも崩れなくなります。「letter-spacing」は、文字間を設定するためのスタイルシートです。
以下は実装例です。サンプルコードは2008年当時に書いたのでXHTMLです。
1.普通のコーディングで、テキストと画像を並べたばあい。
Internet Explorer 7 の「ページの拡大」機能で、拡大すると文字と画像が重なってしまいます。
●サンプルソース
<p>あいうえお<img src="square.gif" />かきくけこ<img src="square.gif" />さしすせそ</p>
●100%で表示
●125%で表示
以下の画像は125%拡大時のようすです。画像と文字が重なっています。
2.親になる要素（タグ）のスタイルシートで「letter-spacing」の値を設定したばあい。
Internet Explorer 7 の「ページの拡大」機能でもレイアウトが崩れません。
●サンプルソース
<p style="letter-spacing: 0;">あいうえお<img src="square.gif" />かきくけこ<img src="square.gif" />さしすせそ</p>
●125%で表示
他のいくつかのパターンでも検証しても、一律これで回避できました。
「letter-spacing」で解消される理由はいまいちよくわかりません。「letter-spacing」が hasLayout をオンにするのかとも思いましたが、調べてみると、hasLayout がオンになっているわけでもないようです。
さて、この「letter-spacing」テクニックは、もう少し踏み込む必要があります。というのは、「letter-spacing」は、そもそもはInternet Explorer 6や7で、動作にバグがあり、敬遠されているスタイルシートだからです。
具体的に見てみましょう。
たとえば、br要素を3つ並んだHTMLがあったとします。ふつうに表示すると、空行が3行入るはずです。
1.何も設定していない普通のテキストのばあい。
空行が3行入る。
●サンプルソース
<p>あいうえお<br /><br /><br /><br />かきくけこ<br /><br /><br /><br />さしすせそ</p>
●表示
2.このHTMLに、「letter-spacing」の値に「0.1em」を設定したばあい。
br要素が正しく動作しなくなります。空行が1行しか入りません。
●サンプルソース
<p style="letter-spacing: 0.1em;">あいうえお<br /><br /><br /><br />かきくけこ<br /><br /><br /><br />さしすせそ</p>
●表示
幸いにも、この問題には解決法が確立されています「letter-spacing」の値を「0」したときのみ、br要素は正しく認識されるようになります。
3.「letter-spacing」の値が「0」のばあい。
br要素が正しく動作し、空行が3行入る。
●サンプルソース
<p style="letter-spacing: 0;">あいうえお<br /><br /><br /><br />かきくけこ<br /><br /><br /><br />さしすせそ</p>
●表示
ここまでをまとめると、Internet Explorer 7 の「ページの拡大」機能でレイアウト崩れを回避するためには、以下のスタイルシートを、親となるタグに設定すればよいことになります。
●サンプルソース
letter-spacing: 0;
極端には、以下の一行をスタイルシートに追加することで、Internet Explorer 7 の「ページの拡大」機能でレイアウト崩れを回避することができます。
●サンプルソース
body { letter-spacing: 0; }
一律で0を指定したくない場合は、bodyや必要箇所では値を設定し、brタグにletter-spacing: 0;を設定することで、Internet Explorer 7 の「ページの拡大」でも崩れず、また文字間も調整することができます。
●サンプルソース
body { letter-spacing: (任意の文字間を指定); }
br { letter-spacing: 0; }
なお、今回の内容について、実際にコーディングしたサンプルを作成して、以下に置きました。ご参考ください。
ie7の「ページの拡大」によるレイアウト崩れは「letter-spacing」で回避できる？ - サンプル
なお、この記事への、当時のはてなブックマークコメントは以下です。
http://b.hatena.ne.jp/entry.touch/japan.cnet.com/blog/webclip/today/2008/01/09/entry_25003869/
* * *
羽山 祥樹のtwitterアカウントは @storywriter です。ぜひフォローお願いします。
