「教えて!goo」の表示がキタナイのはなぜ？

質問

添付図は、カテゴリ[MS Office]の「質問番号：6468268」を私のＩＥ８で表示させたものの一部ですが、左側の「OKWave」の場合はキチンとした表になっています。ところが右側の「教えて!goo」では表が凸凹(デコボコ)に表示されてキタナイですよね。（特に、上端の「↓↓↓↓」の数や「ID、クラス、科目、…」の項目行のズレに着目ください）
私の方では同じブラウザなのに、このような表示違いが出るのは「教えて!goo」側のシステム設定に問題があるのでしょうか？

ちなみにＩＥ８の[ツール]→[インターネットオプション]→[全般]→[フォント]では、[Webページフォント]も[テキスト形式フォント]も固定ピッチフォントの「HGゴシックE」に設定しています。ＯＳは Windows7 です。]

回答No.3

SortaNerd_ · ベストアンサー

> 教えて!goo」側のシステム設定に問題があるのでしょうか？
逆ですね。教えて!gooは文字スタイルを指定していません。ですからあなたの指定通りの(日本語は)HGゴシックEで表示されているわけです。
一方OKWaveはMSPゴシックなどが指定されています。
別にサイトのフォント指定やあなたのフォント指定に問題があるということではありません。フォントを変えれば縦位置はずれるものです。
あえてどちらかと言えば、Windows環境でのデフォルトでありかつOKWaveでは指定されているMSPゴシックに合わせて縦位置を合わせてあったのを、わざわざ別のフォントで見てずれを気にする方が間違っているでしょう。

お礼

》 OKWaveでは指定されているMSPゴシックに合わせて縦位置を合わせてあったのを、…

なるほど、[Webページフォント]、[テキスト形式フォント]をそれぞれ “MS Pゴシック”、“MSゴシック”にすれば、「教えて!goo」でも表としてはズレないことを確認しました。

ありがとうございました。

回答No.4

Katsu_Kaiz

前回はお世話になりました。さて、個人的に書体（フォント）の話は好きですが、ブラウザの話になると知識が曖昧に……。皆さんのおっしゃるように、サイト側の設定はもちろんのこと、ブラウザの種類や、果ては質問者さんの設定にも左右されるため、どうも自信を持って回答できません。

とはいえ好きな書体が決まっている場合、その書体を強制的に表示させることはできます。前回の参考 URL にも載せましたが、『メモ帳』で以下の文章を入力し、

* {
font-family: "指定するフォント名を正確に入力します" !important;
}

「適当なファイル名をつけてください.css」という名前で保存します。ついで IE の［ユーザー補助］→［自分のスタイルシートでドキュメントの書式を設定する］にチェック。［参照］ボタンで、先ほどの css ファイルを指定します。こうすれば、どんなページでも気に入った書体で表示できます。HG ゴシックで試してみたら、ズレませんでした。

なお、ウェイトに注目すると太い書体を探しやすくなります。W5 や W7 など数字の大きいものや、HG ゴシック E のように「Ｂ」や「Ｅ」のついたものは、ウェイトの太い書体です。また、メイリオは全角が固定ピッチで、半角がプロポーショナルだったと思います。一般的に、日本語は固定が、欧文はプロポーショナルが読みやすいといわれているため、こういう設計になったそうです。私も「べた組み」（固定ピッチ）が大好きなので、質問者さんの気持ちはわかります（笑）

参考URL：

http://www.morisawa.co.jp/font/about/knowledge/family.html

お礼

》 私も「べた組み」（固定ピッチ）が大好きなので、質問者さんの気持ちはわかります（笑）

私は“固定ピッチ”フォントが好きというわけではなく、「MSオフィス」や「Office系ソフト」中の表形式の表示が凸凹にならないようにしたいだけです。

何れにしても、有益な情報をありがとうございました。

回答No.2

noname#194317

> ということは、「教えて!goo」は「OKWave」とは異なる「文字スタイルを指定している」のですね？
> なぜなら、「ユーザー補助」を何も設定していない私のＩＥで当該２つのサイトが異なるスタイルで見えるわけですから。

そのとおりです。もしかすると、OKWave側は文字スタイルを全く指定していない可能性もあります。ただ繰り返しになりますけど、ブラウザが変わると見え方が変わるので、ブラウザによって解釈のされ方が異なるタグを使っているわけです。教えてgooの方では、半角英数はプロポーショナルフォント（多分Arial）ですよね。だから表示が揃いません。半角英数をArialと解釈することが正しいのか間違っているか、はたまたブラウザに任されているのかまでは、私には解りませんが。（でもIEの解釈が怪しそうな予感）

フォントが違うと言えば、質問を閲覧するページと回答するページでもフォントが違い、質問閲覧ページではブラウザのデフォルトフォントですが、回答ページで表示される質問内容は、私が指示した覚えのないMS Pゴシックが使われています。なので、同一サイト内であっても文字スタイルは統一されていません。もしかすると、別のパートナーサイトではまた違う見え方をする可能性すらあります。これを何とかしたければ、やっぱりブラウザ側でフォントの設定を固定するしかないでしょう。

お礼

》 フォントが違うと言えば、・・・同一サイト内であっても
》 文字スタイルは統一されていません

此れは私も気がついておりました。
「やっぱりブラウザ側でフォントの設定を固定するしかない」ことが理解できました。

此処の質問内容は「教えて!goo」へも案内しておきました。どういう回答が来るか楽しみではあります。

とても参考になるコメントをいただき、心より感謝しております。

ありがとうございました。

補足

参考までに「教えて!goo」からの回答は次のとおりでした。

>ご質問内にございました質問を様々な環境より確認させていただきましたが、表示のずれは確
>認できませんでした。
>お客様のインターネットブラウザの文字サイズ等を含めた設定に起因するものと存じますので、
>設定をご確認いただけますようお願いいたします。

回答No.1

noname#194317

教えてgooの設定に問題があると言うか、文字スタイルを指定しているためですね。つまりIEで「Web ページで指定されたフォント スタイルを使用しない」の設定にしていない限りはそうなっちゃいます。この設定は、インターネットオプションの「全般」の中、「ユーザー補助」ボタンを押すと出てきます。

そう設定した上で、フォント設定の言語で「ラテン語ベース」を選択し、そこも同じフォントに変えると、表示は崩れなくなります。

これはどちらかと言えば、個人的な問題でしょう。表示が揃うかどうかは個人個人のフォント設定に依存するわけですから。なので、質問者さんには揃って見えても、それが他の人のところで再現する保証はありませんし、ブラウザの種類によっても話は違ってきます（Chromeでは、教えてgooでもきれいに揃って見えます）。スペースで整形する方法ではどうしても、この問題からは逃れられないでしょう。HTMLタグを使って揃えるのが最も確実ですが、これもどこでも使えるわけではないですし、難しいですね。

補足

》 教えてgooの設定に問題があると言うか、文字スタイルを指定しているためですね。

ということは、「教えて!goo」は「OKWave」とは異なる「文字スタイルを指定している」のですね？なぜなら、「ユーザー補助」を何も設定していない私のＩＥで当該２つのサイトが異なるスタイルで見えるわけですから。