WEB ページを作る時に気をつけること

こんにちは、WEB 担当の青野です。

今回は、僕がWEB ページを作成するときに気をつけていることをいくつか書こうと思います。
内容的には、HTML、CSS、クロスブラウザでの描画の違いもある程度理解した人が、次の段階として実践する内容です。

CSS のスタイルをリセットしておく

まず CSS を作成する前にしておきたいことの一つが、CSS のスタイルをリセットしておくことです。
これは、ブラウザによってデフォルトのスタイル値が違うために起こる表示のズレなどを回避するために必要となってきます。
CSS リセットの方法はいくつかあり、よく分からない方は有名どころの YUI （Yahoo! UI Library）で公開されている CSS リセットを使うといいと思います。

CSS Reset – YUI Library
http://yuilibrary.com/yui/docs/cssreset/

使い方は簡単で、上記の URL に記載されているリセット用のコードを CSS にコピー、または <link> タグごと HTML に追加するだけで OK です。
CSS リセットについては、ものによって「そんなとこをリセットしなくていい！」というとこまでリセットのために指定されている場合がありますので、細かいところまで拘りたい方は、自身で調整をするといいと思います。

WEB ページのフォントサイズを統一する

CSS を作成する前にしておきたいことのもうひとつがクロスブラウザでの WEB ページのフォントサイズを統一することです。
統一をしていない場合、ユーザーが使用しているブラウザによってページのフォントサイズが作成者の意図とは違って表示されてしまい、フォント自体が見にくくなったり、レイアウトのズレなどがおきてしまいます。
これを回避するための方法もいくつかありますが、CSS リセットと同じでよく分からない方は YUI （Yahoo! UI Library）で公開されている CSS Fonts を使うといいと思います。

CSS Fonts – YUI Library
http://yuilibrary.com/yui/docs/cssfonts/

こちらも使い方は上記の URL に記載されているリセット用のコードを CSS にコピー、または <link> タグごと HTML に追加で OK です。しかし、これだけだと全て 13px に統一されてしまいます。
CSS Fonts でサイズ指定をする場合、px ではなく % を使用します。

サイズごとの % 指定値は以下の表のようになっています。

上記の % 値を指定することで、統一することができますが、値が % なので、2重に指定したりしてしまうと意図したサイズにならないので注意してください。

WEB ページで使用する画像を最適化しておく

WEB ページには画像がたくさん使用されていますが、これらの画像を最適化することなく使用するとデータ転送量が大きくなりページの描画速度に時間がかかってしまいます。
しかし、画像を最適化しファイルサイズの削減をすれば見た目がほとんど劣化することなくファイルサイズを削減することができます。
僕は PNG 画像を好んで使用するので、PNG 画像を最適化できるものを使用しています。

PNG 画像の最適化には、有名どころでは OptiPNG や、PNGGauntlet というものがあり、どちらもファイルサイズを60%～90%ほど削減してくれます。

PNGGauntlet では、PNG ファイルに含まれる画像データの以外の情報を取り除くこともできるので、どちらを使えばいいのか良く分からない方は、PNGGauntlet を使用することをおすすめします。

PNGGauntlet – PNG Compression Software | BenHollis.net
http://pnggauntlet.com/

PNGGauntlet の使用方法については既に詳しく説明されているサイト等ありますのでそちらを参照ください。

クロスブラウザチェックは必ず行う

クロスブラウザ確認にはどのような方法をとっているでしょうか？

ツール等を使用し効率的に確認するやり方、実際にブラウザで表示させ確認するやり方、それぞれありますが、僕は実際に各ブラウザでの確認を最低でも公開前に一度するべきだと思っています。

ツール等を使用した場合、効率的に確認をすることができますが、実際にブラウザで表示されるものと違っていることがあります。

説明が足りていない箇所が多々ありますが、これらのことを意識して、ユーザーによりよいものを届けられるようにしましょう。