たった一行であなたのサイトが見やすくなる！！サイトを作ったら押さえておくべき大事なポイント

あなたの作ってるサイト・サービスはどのブラウザでも同じように見えますか？読みやすくなっていますか？今回は「全て」同じを追求するのではなくて、「フォント」まわりをスマートにすることで、多くのブラウザでエレガントに見せる技術を紹介したいと思います。

各ブラウザの暴走

なぜこんなことになってしまったのか本当に聞きたいぐらいなのですが、ブラウザを変えると、サイトが異なったもののように見えてしまうということはよくあります。というか、全て同じに見えるサイトというのは少数派なのかもしれないぐらい。

たとえば、The Acid3 Testなどをいくつかのブラウザで開いてみると分かりますが、各ブラウザが機能を争っていった結果、同じサイトでも異なって見えるということはよくあります。多分、自分でサイト作った人ならよく分かると思う。

んで、今回はそんな争って異なったしまった部分を簡単に元に戻してみましょうというお話し。

ライブラリを知る

上述したように、ブラウザ独自の拡張があるので、それをなんとかしたいわけです。
昔は、自分で微調整したり独自のCSSを作っておいて、このブラウザにだけ適用なんかはよくやりました。

でも、技術は進むもので、こういうときに便利なものがちゃんとあったりします。それが「YUI Library」というものです。

このライブラリはYahooが作ったものなのですが、ようは便利機能の詰め合わせみたいなもので、うまく活用することで手間をかけずに色々素敵なことができるシロモノです。

ライブラリというだけあって、javascriptを簡易化させたり、JSONを簡単に扱えるようにしたり、色々提供してくれているのですが、
今回は、「フォント」にまつわるものを使います（最新のバージョンは3です）。

例えば、次のようなHTMLがあったとします。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="Content-Script-Type" content="text/javascript" />
  <meta http-equiv="Content-Style-Type" content="text/css" />

  <title>これはテストです - カイワレの大冒険</title>

</head>

<body>
  <div id="wrapper">
    <div id="gnavi">
      <h1 style="font-size:20px;"><a href="http://test.org/~masudak/">見出し1</a></h1>

      <ul>
          <li><a href="./about.html" title="About" >About</a></li>
          <li class="last"><a href="./link.html" title="Link" >Link</a></li>

      </ul>
    </div>

    <div id="c-m">

      <h2 id="page_header">masudaK</h2>

      <div>
        <p style="font-size:9px;">これは9pxです。これは9pxです。これは9pxです。これは9pxです。
        </p>

      </div>


      <div>
        <p style="font-size:93%;">これは12pxです。これは12pxです。これは12pxです。これは12pxです。これは12pxです。
        </p>
      </div>


      <div>
        <p style="font-size:116%;">これは15pxです。これは15pxです。これは15pxです。これは15pxです。これは15pxです。
        </p>

      </div>

    </div>

    <div id="footer">
      <address>
        masudaK All Rights Reserved.
    </address>
    </div>
  </div>

</body>
</html>

んで、このままだと、h1, h2, pなどの要素は全て「ブラウザ独自」のフォントサイズになってしまいます。
実際にいくつかのブラウザで見てみるとこんな感じです。

Firefox4(webdeveloperツールにて、50*12pxのボックスを作っています)

Chrome10

IE8

ちょっと見辛いかもしれませんが、文字の高さがデフォルトでは違ったりします。
これが一行だとあまり目立たないのですが、文章になって横に何十文字も展開したり、縦に伸びたりするとその差はどんどん大きくなっていきます。
（改行とかしまくって、長い文章書いていると、ブラウザによって高さ変わったり）

上記HTMLのサンプル。

なので、その独自の部分を消し去ってしまいましょう。

実際使ってみる：フォント情報を一定に

まず、ブラウザによって大きさが違うので、まずそこを修正していきましょう。
そのときに使うのが「YUI 3: CSS Fonts」です。サイトのほうにも書かれていますが、以下のコードを埋め込むだけです。

link要素なので、head内に埋め込みましょう。

「YUI 3: CSS Fonts」の詳しい解説はしませんが、デフォルトのフォントサイズをIE以外では13pxで固定し、IE6,7のフォントサイズをx-smallにして、
更に文字間を整えています。

この文字間を整える効果というのは大きく、以下のサンプルを見ると分かりますが、かなり見た目が整ってきています。

Firefox4(webdeveloperツールにて、50*12pxのボックスを作っています)

Chrome10

IE8

一行の大きさが固定されることで、高さが整います。
(※Firefoxは独自なのか、それとも他のブラウザが独自なのか追い切れなかったけど、Firefoxだけ文字が詰まっている気が…誰かお力を…)

ただ、相変わらず9pxで指定した部分は依然としてサイズが変わっていません。
そのため、「YUI 3: CSS Fonts」では、%で相対値を指定することを推奨しています。

そのため、目的の要素に対して、CSSで「font-size」を%単位で指定してあげます。
大きさの目安としてはサイトによると、以下のとおり。

表示させたい大きさ(px)	指定する値(%)
10	77
11	85
12	93
13	100
14	108
15	116
16	123.1
17	131
18	138.5
19	146.5
20	153.9
21	161.6
22	167
23	174
24	182
25	189
26	197

たとえば、div内のp要素全てを、「どのブラウザでも」12pxで表示させたいなら、以下のように指定します。

div p{
         font-size: 93%;
     }

このように指定することで、どのブラウザでも12pxで表示されるようになります。
そして、そのように%指定しておいたのが、12pxと15pxの部分です。

ただし、完全にどのブラウザでも対応できているわけではなくて、
（このページにあるように、A-Grade以外のブラウザは対応できてない模様です。

基本的に以下のブラウザはCグレードのブラウザとされ、完全に対応しているとは言えません。

IE < 6 (including Mac OS versions)
Safari < 3
Firefox < 3
Opera < 9.5
Netscape < 8

ただ、このなかに該当するブラウザを使っている利用者はかなり減っていると思うので、そこまで意識しなくてもよいかもしれません。

終わりに

HTML、CSS, Javascriptなど全てを、どのブラウザでも対応させることはかなり難しいと思います。
もちろん、それができるのなら、よりスマートに見せられてコーディングとしてもよいのかもしれません。

でも、出来る限り「簡単」に「多くの人」が実装できるものと考えると、下手に色々手を尽くして苦しむよりも、
フォントまわりを統一してみるのはありなんじゃないかなと思っています。

ターゲットを絞って、一部のブラウザのみ統一させたり、ある程度ズレがあってもよいということもあるかもしれませんが、
知っといておいて損はないと思うので、紹介してみました。

P.S.
「YUI 3: CSS Fonts」で統一するのは、フォントサイズや文字間であって、余白であったり、斜体などを全て同じにするわけではありません。
そういう場合にも対応できるライブラリがあって、「YUI 3: CSS Reset」というのがあります。

ただ以下のサンプルを見てもらえれば分かりますが、本当に余白とかまで初期化されてしまうので、自分で全てスタイルを設定しなければいけません。

Firefox4

Chrome10

IE8

CSSがある程度書ける人であれば、初期化した上で自分の好きなようにスタイルを設定したほうが思い通りにいくと思うので、
勉強のためにもこっちも適用しておくとよいかもしれません！

ただ、ちゃんと自分で書いたCSSはバックアップとっておきましょうね！！

あと、「YUI」はBSDライセンスなので、表記さえ忘れなければ改変したり商用利用も可能なので、
是非是非試してみてください！！

カイワレの大冒険 Third

技術的なことや他愛もないことをたまに書いてます

たった一行であなたのサイトが見やすくなる！！サイトを作ったら押さえておくべき大事なポイント

各ブラウザの暴走

ライブラリを知る

実際使ってみる：フォント情報を一定に

終わりに