先日はまった事柄に端を発し、調査をしてようやく理由が分かった事柄をメモとして。
細かい経緯や周辺の事柄は最後に回しまして、色々調べて把握できた（と思われる）範囲の内容をご紹介。ご存知の方は読みとばしてくださいませ。
概要
今回の問題は、MS Pゴシックよりも文字幅が大きいと考えていたメイリオでレイアウトを調整した際に、レイアウト崩れが起ったこと。そして、しばらく原因が不明だったこと。
説明にために、メイリオやヒラギノを使う場合に使われる以下のようなfont-familyを設定します。前方から順に適用されますので、メイリオがない場合にWindowsで適用されるフォントはMS Pゴシックとなります。
.sample {font-family: メイリオ,Meiryo,”ヒラギノ角ゴ Pro W3″,”Hiragino Kaku Gothic Pro W3″,”ＭＳ Ｐゴシック”,sans-serif;}
なお、MacはFierfoxと使用し、Winは Internet Explorer 9を使用しています。
WindowsのメイリオとMS Pゴシックの違い
結論から言えば、WindowsのメイリオとMS Pゴシックはフォントの見ための大きさ以外に、
仮名か漢字か、太字にするかしないかで幅に違いが出ます。
具体的には、右の画像をご覧下さい。Windowsでの見え方のスクリーンショットです。なお、Windows7のIE9を使いました。
漢字のみの部分を見ると、normalでは漢字は同じ幅です。しかし、MS Pゴシックはboldにすると幅が広がります。
ひらがなのみやカタカナのみでは、基本的にMS Pゴシックの幅が短くなります。boldにすると漢字よりも大きな差がでます。
漢字仮名まじりとなると漢字や仮名の分量によって変化がありますので、組み合わせ方によっては同じ幅にできるかもしれません。
フォントの見え方としては比較的近いメイリオとMS Pゴシックですが、幅には大きな差がでます。
本文などは高さに制限がないため比較的柔にフォントの差異を吸収できますが、高さや幅などの最大値に制限ができやすいナビゲーションラベルでは、レイアウト崩れの原因となりかねません。
MS Pゴシックとメイリオの幅に対する先入観
MS Pゴシックがメイリオよりも常に幅が狭まるという先入観で組んだグローバルナビゲーションは、ある条件下でレイアウト崩れを起します。その条件とは以下の通り。
- 漢字が多い
- bold（太字）の使用
グローバルナビゲーションには装飾的な目的でboldにすることも多いかと思いますし、文字数削減のために漢字を使うことも多いでしょう。上記の条件があてはまりやすいと言えます。
また、幅が広がるだけではなく、狭まる度合いも問題です。前段の画像の漢字仮名まじりの部分がそうですが、normalの場合は3文字ほどの差が出ています。「少しの差」とはいい難いので、この辺りの感覚を改めた方がよいかもしれません。
幅の広いメイリオで合わせればMS Pゴシックでも安心した見え方になる、というのは先入観に過ぎません。
IEのバージョンで分岐はできない
この問題のややこしい所は、cssハックやhtmlのheaderに記載するIEバージョンによる分岐方法では対応ができない点です。
重要なのは、Windowsにメイリオが入っているかどうかですから。
例えば、メイリオとMS Pゴシックでpaddingを変えたい場合には頭を悩ませることになります。
OS分岐ではメイリオが入ったXPと入っていないXPを区別できませんし、XPにはIE8までインストールできますのでIEバージョンによる分岐もできません。
インストールされているフォントを取得して分岐という手が唯一かと思いますが、そこまでする必要があるのかどうか…。
ナビゲーションの構築方法
実はこの記事、あまり実用性がありません。なぜなら、これらの問題を最初から回避する方法があるからです。その方法とは以下の通り。
- ナビゲーションラベルの画像化
- センタリングせず、一方向に寄せて柔軟に構築
画像化は言わずもがなですね。デザイン性は損なわれませんし、テキストの見え方なんてまったく気にしなくともよいのですから。
一方向に寄せるというのは、例えばこのブログのグローバルナビのように右に余裕がある状態です。これだけ空間が空いていればどんなフォントでも安全です。ラベル数が多くなるとこの方法では厳しくなりますが、2段に分けても問題ないデザインと構造であれば対応は可能です。
テキストナビゲーションのメリット
「テキストがややこしいなら全部画像化してしまえ！」とならないのにはいろいろ理由があると思いますが、一番はメンテナンス性でしょうか。画像を作り直すよりテキストを書き換えた方が簡単ですから。
また、WordPressなどで動的にナビゲーションとして書き出す場合や、画面サイズの違うデバイスごとに柔軟なレイアウトでナビゲーションを表示させる際には、テキストの方が扱いやすい場合もあります。
形が崩れないのは大切なのですが、複数の視点から検討するべき事柄です。
結び
実際に起った事柄として、個数の多いナビゲーションをセンタリングさせ、メイリオの幅で調整した際にレイアウト崩れが起きました。原因を調べると、この記事であったような問題が原因だったという次第です。
一文字程度のズレだったのですが、念のためと空けておいた余裕でも対処しきれず。加えて、前段のメイリオとMS Pゴシックの先入観から、MS Pゴシックに切り替えずに確認してしまい原因は発見できず。一時はIEやWindowsOSのバージョンに問題があるのかと考えていました。
複数のPCとブラウザを行き来してようやく原因が見えましたが、こうしてまとめるまではいくつか勘違いをしていたり…。まとめて整理してみてようやく「何だこんな事か」という感覚になりました。
なお、今回の調査用にサンプルページを作りましたので、実際に差が見たい方はご覧くださいませ。
追記
MacとWinの明朝体フォントについても記事を書きましたので、合わせてどうぞ。
0人がこの記事を評価
役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。
連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。
