WordPressテンプレート制作、ウェブデザイン技能検定に挑戦中

前の記事:title要素、h1要素の適切な設定
HOME
次の記事:アドビ製品Photoshopの無償体験版をダウンロード

自分のサイトのフォント設定&他のサイトのフォント設定を調べる方法

Web知識

 

他のサイトのフォント設定を調べる方法

 

要素の検証を行えるブラウザを使っていれば、基本的には次の方法でどんなサイトのフォント設定でも簡単に調べられます。

 

要素の検証1

Google Chromeで調べたい文字をドラッグし、右クリックでメニュー展開から検証を選択します。

 

要素の検証2

対象文字のフォント設定が表示されました。フォント設定は左側に書かれたフォントが優先され、閲覧者の環境で表示出来ないフォントに関しては打ち消し線が付くので、今回の検証ではメイリオがフォントとして使われている事が分かります。

これでも事足りると思うのですが、Google Chromeのプラグインでさらに手早くフォント設定の検証を行えるものがありました。

 

 

要素の検証3

WhatFontTool

カーソルが乗っている範囲に設定されたフォントをリアルタイムで表示し、クリックするとフォントの詳細情報を展開してピン留めします。余計な機能がない分かなり使い勝手がいいです。

あまり必要になる事はないと思いますが、導入も手放すのも簡単に出来るので、どのサイトで何処にどんなフォントが使われているか一度ガッツリ調べてみたいと考えている人におすすめです。

ちなみに上の画像で検証しているのは、Twitterのメイン画面のフォント設定です。

ピン留めした内容をコピーしようとドラッグしても、マウスから指を離すと選択が解除されてしまうのが難点ですが、ドラッグし終わった所でマウスから指を離さず、「Ctrl」+「C」を押す事でコピーが出来ます。

 

 

自分のサイトのフォント設定

 

font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, メイリオ, Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;

現在Twitterで用いられているフォント設定から先頭のArialを抜いたものを、このブログのメインフォントに設定しました(body要素に設定します)。というのも、色々なフォントを適用してこのブログを眺めた結果、「これだ!」と思うフォントがメイリオだったからです。

メイリオフォントを表示させたいのに、なぜ一番左側にそれを配置しないのかという理由ですが・・・

 

要素の検証4

ヒラギノやOsakaはMac OS用のフォントです。私はそれらのフォントがインストールされていないWindows OSを使っているので、検証してみるとヒラギノとOsakaフォントが無効になってメイリオが適用されているのが分かります。

説明の為、Mac OS用フォントの後ろにメイリオを回しましたが、メイリオを先頭に持っていっても問題ありません。そのように設定を変更したとして、Mac OSからこのブログを見た時、メイリオフォントがインストールされていればメイリオを、されていなければヒラギノもしくはOsakaフォントが表示されます。

“ヒラギノ角ゴ Pro W3”, “Hiragino Kaku Gothic Pro”のように、日本語と英語のフォント名を並べて記載するのは、ブラウザによって日本語のフォント名が認識出来なかったり、英語のフォント名が認識出来なかったりする為です(最近のブラウザで英語表記が認識出来ないという事はまずありません)。また、フォント名に空白を含む場合は、日本語英語いずれにせよ(ダブルかシングル)クォーテーションでフォント名を括ります。

MS PGothicはwindows OS用のゴシック体フォントです。メイリオがインストールされていないWindows OSを想定しての設定となります。後述するsans-serifの設定があるので、この指定は無くても問題はないかと思います。

sans-serifは総称ファミリの指定となります。フォント設定では最後に総称ファミリを記述します。総称ファミリの設定があると、指定したフォント全てが閲覧者のOSにインストールされていなくても、総称ファミリに基づいたフォントを、OSに標準搭載されたものから表示します。つまり総称ファミリの指定から表示されるフォントは、ユーザーの閲覧している環境次第で表示されるフォントが異なる可能性があります。

以下に総称ファミリで指定出来るものをまとめてあります。

 

 

総称ファミリ

 

font-family: sans-serif;

サンプル文字: 123 abc ABC あいう アイウ 壱弐参

sans-serifを指定するとゴシック体フォントになります。

font-family: serif;

サンプル文字: 123 abc ABC あいう アイウ 壱弐参

serifを指定すると明朝体フォントになります。

font-family: cursive;

サンプル文字: 123 abc ABC あいう アイウ 壱弐参

cursiveを指定すると筆記体フォントになります。

font-family: fantasy;

サンプル文字: 123 abc ABC あいう アイウ 壱弐参

fantasyを指定すると装飾体フォントになります。

font-family: monospace;

サンプル文字: 123 abc ABC あいう アイウ 壱弐参

monospaceを指定すると等幅フォントになります。

 

どんな文字でも同じ幅で表示する等幅フォントに対し、文字毎に表示幅が異なるフォントをプロポーショナルフォントと言います(“MS Pゴシック”のPはプロポーショナルフォントのPです)。日本語の場合、人間の視覚的にはプロポーショナルフォントの方が読み易いようです。

しかし、ソースコードを表示する場合などは等幅フォントの方が整った表示となり見易くなるので、ケースバイケースで使い分けます。コードをマークアップするcode要素がありますが、こちらで囲った内容はフォントをmonospaceで表示するようデフォルト設定がされています(正確にはブラウザ側の設定)。

 

Android OSだと専用のフォントが入っているので、サイト制作者がそちらのフォント指定を考える必要はないとの事でした。

毎年、「今年の鉄板フォント設定はこれ!」といったような記事が上がっていますが、どんなに美しい最新のフォントでも、見る側のOSにインストールされていなければ表示されないので、毎年コロコロ変えるものでもないんじゃないかなと思います。

私見ですが、フォント設定で悩んだらとにかく利用者の多いサービスのフォント設定をコピーしてくるといいでしょう。自分の一番好きなサイトを思い浮かべて、そのサイトのフォント設定を参考にしてもいいかもしれません。

 

||

自分のサイトのフォント設定&他のサイトのフォント設定を調べる方法

0件のコメント

コメント

カテゴリ

月別アーカイブ