VistaでHTML＆CSSのフォントが綺麗に変わる？

メニュー

1.はじめに～メイリオフォントについて
2.CSSフォントの優先順位
3.XPでフォントをメイリオフォントにする方法
4.2000でフォントをメイリオフォントにする方法
5.Webデザイン上でのメイリオフォントの注意点
6.後書き-Webサイト管理者が使用するメイリオフォントについて

はじめに～メイリオフォントって？～

 

メイリオ（Meiryo）フォントとは和文ゴシック体フォントの1つであり、
Windows Vista以降のマイクロソフト製OSに標準で搭載されたフォントのことです。
Windows XP、Windows Server 2003までMicrosoft Windowsで利用されてきた
MS UI Gothicフォントに代わる新しいシステム用フォントとして提供されています。

デザインはゴシック体属していて、直線部分と曲線部分がはっきりしており、若干膨らんだ印象の字形で横組みでの可読性を重視して、和文の字面が縦横比95:100で、若干横長となっています。

ちなみに、メイリオという名前の語源は「明瞭（メイリョウ）」から来ています。
画面上で見ても印刷しても極めて明瞭で読みやすい所から、そう名付けられたようです。
メイリョウ（明瞭）でなくメイリオと名付けられた理由は、エキゾチックな響きであることと1文字少ないことが理由とされています。

※ちなみにXPや2000の方でもVista専用のメイリオフォントを使用することが可能です。
詳しくは以下で解説させていただきます。

こんなわけで、このメイリオフォントはWebページの回覧などにおいても、
既にWindows VistaとWindows XP以前のOSではフォントの表示がだいぶ異なっているのです。

以下を見ていただければ、その違いははっきりとわかると思います。

上へ戻る

従来のXP・2000での表示

現在のVista・Windows7以降の表示

※Windows7でメイリオフォントが搭載されるかどうかはまだ未定ですが、恐らくデフォルトのシステムフォントとしてVistaと同じように提供されると管理人は考えています。

・・・どうでしょうか？

XPの方は気づかなかったかもしれませんが、VistaではこのようにWebブラウザでも見やすい
メイリオフォントが
優先的に提供されるようになっています。

ちなみに、旧式のブラウザではWindows Vistaを使用していても
「メイリオフォント」で表示ではありません。旧式の場合は従来のXP 2000のフォントが
通常の優先順位で表示されます。

ここについての詳しい説明で、
よく、「OSによってWebブラウザのフォントが変わる」と勘違いしている人がいますが、
実際にはOSはあくまで各自アプリケーションを動かすときの基盤となる「基本ソフト」ですので、
フォントの指定などは「IE」や「Firefox」などの各アプリケーションソフト（Webブラウザ）の方で
決定するようになっています。

なので、「OSが変わったからWebブラウザのフォントが変わった」のではなく、
「アプリケーション（ソフト）が新しいフォントの優先順位（メイリオを優先orメイリオを検索）を決定した」ので、
FirefoxやIEなどのCSSのフォントの表示などではメイリオフォントが優先的に表示されている
ということを、どうかお間違えなく

要約すると主なフォント決定の手順は以下のような手順になっています。

font-familyの主な優先順位

font-familyで指定されているフォントを最初の方に指定されているフォントを優先的に
読み込んでいく
↓
font-familyで指定されているフォントがOS（システム）にない場合は次にfont-familyに記述されているフォントを表示する
↓
それでも無い場合はそれよりさらに記述されているfont-familyで表示されているフォントを選択する
↓
全てのfont-familyにてフォントが発見されなかった場合は各ブラウザのデフォルトフォントを使用する

※最初からfont-familyなどのフォントを指定していない場合は、
最初から各ブラウザのデフォルトのフォントが表示されるようになります。

例えば当サイトの例でしたら
font-family:"メイリオ",Meiryo,"Verdana","Osaka","ＭＳ Ｐゴシック",sans-serif;

などの場合は、優先順位は「メイリオ」→「Meiryo」→「Verdana」→「Osaka」→「ＭＳ Ｐゴシック"」→「sans-serif」の順に読み込んでいきます。空白を含む場合は「"」ダブルクォーテーションや「'」シングルクォーテーションなどでくくってやり、「,」などで一つずつ区切っていきます。

ちなみに、"メイリオ",Meiryo,"などと同じ意味のフォント値を二つ指定しておくのはenなどの他の言語コードのブラウザ回覧しても、読み込むことが出来るようにするためです。
フォント値の最後には総称ファミリ（以下5点）を指定しておくことが推奨されています。

serif
セリフを持つフォント。日本語では明朝体が該当します。

sans-serif
セリフを持たないフォント。ゴシック体などが該当します。

cursive
草書体(筆記体)フォントです。

fantasy
装飾文字のフォントです。

monospace
等幅フォントで、日本語では等幅ゴシック体とする事が多い



Mac版IE5.5などの場合はfont-familyで複数指定をしたとしても、一つしか読み込まないようです。

他にもWindows MeでのIEでは、sans-serif(ゴシック体)を指定すると文字化けする事がありますので、sans-serif(ゴシック体)を指定する場合は、その前に"ＭＳ Ｐゴシック"などのフォント名を指定しておく必要があります。

フォントに対する注意点は他にも色々ありますが、多いので割合とさせていただきます。

ちなみに、当サイトが配布している「テンプレート」にこのメイリオフォントを使用する場合は
CSSのbody{}のfont-familyの値の部分の最初に「"メイリオ",Meiryo,"」と追加してやれば、メイリオフォントを使用することが出来ます。


ちなみにプログラミング時では特にフォントの設定を指定していないと、
システムのデフォルトのフォントが表示されるようになっています。

ここはプログラム開発ソフトの「Microsoft Visual C++ 2008」などのWindows依存型の
統合開発環境を使用している人はもう知っていると思いますが、現行バージョンの
「Visual C++ 2008」などではVistaを使用して開発している人は
作成したアプリケーションのフォントでも「メイリオ」フォントが優先されているはずです。

逆に、XPや2003以前のOSで「Visual C++ 2008」を使用しても、
従来の「MS UI Gothicフォント」が表示されます。

・・・といいましても、「Microsoft Visual C++ 2008」のようなWindows環境依存のWindows環境でWindows用のプログラム作成を前提として作られていますので、フォントなどもシステムに依存となるは普通のことなんですけどね。

※XPや2000でのメイリオフォントの設定方法は下記に書かせていただきます。

 

上へ戻る

 

XPでフォントをメイリオフォントにする方法

・・・というわけで、
こんな感じで綺麗に表示され目にも優しいメイリオフォントをXPの方でも使ってみたくありませんか？
ここでは、XPでもメイリオフォントを使用できるようにする方法についての解説させていただきます。

Step1

XPでもメイリオフォントを指定できるようにするために、ClearTypeというソフトをダウンロードします。
以下のMicrosoftのページから「続行」を押してからダウンロードして下さい。
このとき「正規 Windows 確認コンポネートのインストール」のページに飛ばされたら正規のWindowsのライセンスを持っているかどうか？というマイクロソフトからの確認ですので、
「インストール」を押してライセンス確認後ダウンロードを行います。
ClearTypeのダウンロード

Step2

ダウンロードした「VistaFont_JPN.EXE」を実行して、指示に従ってインストールします。


※上記のような感じに


さて・・・これで各お使いのブラウザの方で既定フォントに「メイリオ」フォントを指定してやれば、
あの綺麗なメイリオフォントがブラウザでも使用することが出来ます・・・・

・・・と、言いたいところですが・・・

実はこの状態のメイリオフォントでは縁がかなり汚く、これなら従来のフォントの方が
遙かにマシという状態になります。

殆どの人はXPでここからの設定をしていないため、本来の綺麗なメイリオフォントではなく
縁の汚いメイリオフォントが表示されてしまい諦めてしまう人も多々いたと思います。
それでは、解決方法です。

 

 

XPのメイリオフォントの縁を綺麗に表示させる方法

さて、ここで前回インストールした「ClearType」の出番です。
このClearTypeはデフォルトでは使用できるようになっていないので、今回ClearTypeを有効にしていきます。

Step1

「スタート」→「コントロールパネル」→「画面のプロパティ」を開くか
「デスクトップにて右クリック」→「画面のプロパティ」を開きます。

Step2

画面のプロパティのタブである「デザイン」のタブをクリックし、その中にある「効果」をクリックします。

Step3

効果のプロパティの「次の方法で　スクリーンフォントを滑らかにする」のチェックボックスを入れ、
「ClearType」を選択して「OK」を押します。

さて、これで各ブラウザでもメイリオフォントが綺麗に表示されるはずです。

次に、XPのシステムのフォントをメイリオフォントに変更する方法についてです。

XPのシステムフォントをメイリオにするについて(PCに詳しい人向け)

Windowsにてシステムのデフォルトフォントを変えるのには当然レジストリエディタを使用してレジストリを改変しなければいけないのですが・・・

レジストリエディタの起動方法
スタートのファイル名を指定して実行にて「regedit.exe」と入力してEnterを押せば起動できます。

その方法は少し初心者向けではないため、出来るだけ安全策＆わかりやすい方法をとって
システムフォントを変更させていただきましょう。

XPのシステムフォントの変更には「いじくるつくーる」というツールを使って
変更するのがオススメです。

こちらも同じくレジストリを改変するツールなのですが、左のカテゴリから改変したい部分が選べるため、レジストリエディタにて直接レジストリを編集するよりは、随分と楽になると思います。

もし、レジストリエディタを使用して直接システムフォントを変えたいという人は
oui_monsieurさんのブログオープンメモ帳の「Windows XPでメイリオを使う」のエントリーにて
詳しくレジストリエディタを使用したシステムフォント変更方法が記入されていますのでオススメです。

 

上へ戻る

 

Windows2000でメイリオフォントを使用する方法

続いてWindows 2000でもメイリオフォントを使用する方法です。
知っての通りWindows 2000では上記のClearTypeを使用することは出来ません。
それでは、どうすればよいのでしょうか？以下、gdi++を使った方法を記述します。

※この方法は当サイトと相互リンクでした「Undulation PC.」の
AMA@さんの記事を参考に書かせていただきました。
http://pc-pc.seesaa.net/article/114180427.html(現在完全閉鎖)

情報をいただけたAMA@さんありがとうございました。

実は「gdi++」というソフトはこのファイルのみだと、gdi++ファイルにドラッグした実行ファイル等しかフォントが改善されないのが欠点です。なので、このソフトを利用するのは非常に面倒でした。しかし、今回紹介する方法で、画面上のフォント全てを綺麗に出来ます。

Step1-必要なものを準備する

フォントを綺麗にするためには、準備するものがあります。「gdi++.dll(FreeType)」と「freetype.dll」が必要です。それぞれのファイルは、下記のWikiよりダウンロード可能です。

gdi++.dll(FreeType):gdi0787
freetype.dll:GDI++専用

gdi++.dll(FreeType)は、上記URLの「最新安定版」から。freetype.dllは上記URLの「GDI++専用 Uploader の freetype.dll を使う場合」からダウンロードしてください。

freetype.dllについては、「GnuWin32 の freetype.dll を使う場合」のURLからも入手可能みたいですが、ダウンロードが非常にややこしい上に、解凍後のどこに入っているのか確認不可だったため、今回はパスさせていただきます。

Step2-gdi++とgditrayの準備

上記の「freetype.dll」ファイルを解凍して出てきた「freetype.dll」を「gdi++.dll(FreeType)」を解凍したフォルダ内に移動します。

このWikiは今後更新されることがないそうなので、ずばり申し上げますと「gdi0869のfreetype.dll」を「gdi0787フォルダ」に入れるということです。

「freetype.dll」をgdi0787フォルダに入れたら、gdi0869ファイルは削除してしまってかまいません。要約すると必要なのはfreetype.dllだけだったということです。

あとは、gdi0787フォルダ内の「gditray.exe」を実行するだけです。実行すると、タスクトレイに「G」と書かれたアイコンが表示されるはずです。これを「右クリック⇒有効にする」とすると、gdi++がgditrayによって常駐して、常に画面上のフォントを綺麗にすることが可能になります。

Step3-gdi++の設定

ただ適用しただけでも充分効果はりますが、gdi++は自分の好みに合わせた設定が可能なのです。設定項目の例としては「太さ」「影」「アンチエイリアス」などが挙げられます。

下記のURLに設定項目について非常に詳しく書かれてあります。お好みの設定を発見するためには「とにかく色々試す」のがコツです。色々試して、色々なパターンを見ることがよりよい設定を作る手助けとなります。
http://www18.atwiki.jp/gdiplus2/pages/17.html

自分で設定を1から作るのは不安だという場合は「gdi++の設定を晒すスレ」等から設定をもらうのもよいかと思います。最終的に、ディスプレイ等の環境の違いがありますので、自分で設定するしかないのですが。

Step4

さて、ここまできたら、この時点でも十分フォントが滑らかで綺麗だとは思いますが、
肝心のメイリオフォントの方を適応させてみましょう。

上記にてClearTypeは2000では使用できないと説明しましたが、ファイル形式を調べてみたところ、
このClear TypeのEXEファイルは「CAB（キャブ）」という主にMicrosoft Windowsで用いられるデータ圧縮のファイルフォーマットの一つで、普通の「Win RAR」などの解凍ソフトでも中身を解凍することが出来るのです！

要約するとメイリオフォントファイルの「meiryo.ttf」や「meiryob.ttf」を取り出すことが出来るというわけですね。
ClearTypeのダウンロード
※XP用と書かれていますが、2000でも動作確認済みです。

Step5

上記のファイルをWin RARなどの解凍ソフトなどで解凍し、
「meiryo.ttf」と「meiryob.ttf」（メイリオフォントファイル）を入手します。

Step6

後はお使いのgdi++にて、上記に説明した方法で設定すれば、見事！
Windows2000でも綺麗なメイリオフォントを使用することが出来ます。

 

 

上へ戻る

Webデザイン上でのメイリオフォントの注意点

メイリオフォントでのデザイン上の注意点ですが、このメイリオフォントで気を付けるべき
部分に見事に管理人ははまっていました＾＾；

コレに関しては今までの自分の記事の書き方である
http://annkokunokizinn.blog116.fc2.com/blog-entry-247.html

などを参照していただければわかると思いますが、メイリオフォントでは従来の
Windowsの環境依存文字である「●」や「【】」（Windowsでしか見えず、Macなどでは見れない）」文字で微妙に大括弧などで右にずれてしまっていたり、小さくなってしまったりしています。

・・・しかし、もう100エントリー以上この書き方をしてしまったので、
今更直すと莫大な時間がかかるのでそのままといった状態です(T_T)

そして、新しく当サイトで導入したのが、記事ごとの【Step1】などに変わる記述が
h3やh6を使ったCSSの見出し付けです。

しかし、この見出し付けにもCSSにて(-オプション）を指定すると例のブラウザ（IE6やIE5.5)などではまともに表示されず、記事のブロック全体が左に寄ってしまうという状態でした。

現在では改善済みですが、その方法についてはこの記事に書いてしまうと、
とんでもなく長くなってしまうので、それはまた別の機会に記事にさせていただきたいと思います。

皆さんも、管理人のようにOS依存文字を使って記事を書いていた人は気を付けて下さいね。

上へ戻る

後書き-Webサイト管理者が使用するメイリオフォントについて

このメイリオフォントについては「メイリオフォントは使用しない方が良い」や「逆に使用した方が良い」といった色々と考察されているようですが、自分の考えではWebサイトの管理人として・・・
同時に共有テンプレートの制作者としては
「メイリオフォントは指定したおいた方が良い」という考えです。

※当然、そのサイトのデザインにもよりますけどね。

確かにデザインなどの問題や各ブラウザやOSの対応状況によっては
棋歴に表示されないこともあると思いますが、それは対応していな基本ソフトにフォントを誤って
設定してしまった「ごく一部の少数」側の意見となります。

Webサイト管理者としては「ごく一部の少数」の表示と「大多数」の綺麗なメイリオフォントを比べるとコチラの方が訪問者にとって有益になるという考えです。

もちろん、「少数」側の対応状況に合わせるのは管理者としては重要なことですが、
そもそもその設定自体ユーザー側のミスには残念ながら管理者としては
対応することは出来ません。

そして、これからの次期OSであるWindows7でもこのメイリオフォントはきっとデフォルトで
搭載されることでしょう。

それでしたら、このような綺麗で見やすいフォントを使用しないなんて
ちょっと損をした気分になりませんか？

それでは、この辺で「VistaでHTML＆CSSのフォントが綺麗に変わる？」の
エントリーを終わらせていただき他と思います。

長々と読んでいただきありがとうございました。

 

上へ戻る