|
||||||
|
| １． | アンチエイリアスがかかったテキストを画像化するときの落とし穴 | ||||
| 【回避の仕方】 カーニングを使ってピクセル単位で調整したり、書き出し時の圧縮率を変えるなどして、テキストの輪郭がきれいに表示されるよう心がける |
|||||
| 【ジャンル名】 画像・色・テキスト | |||||
| アンチエイリアスのかかったテキストを画像化して扱う場合、書体や文字によっては輪郭がぼやけたり文字がつぶれたりすることがある。 文字がぼやけていると、可読性が悪くなり、またデザインの観点から見てもサイト全体の印象を損ねかねない。 デザインの都合上どうしてもアンチエイリアスをかけておきたい時には、文字がぼやけたりバサついたりしないよう、ピクセル単位での調整が必要だ。 PhotoshopやImage Readyでは、カーニングを使ってアンチエイリアスのかかり方をコントロールすることができる。 またサイズや縦横比率を変えるなどすることで、フォントの輪郭をよりはっきり見せるよう調整することも可能だ。 書き出し時には圧縮率を変えながら、画像化された文字がより美しく表示されるように心がけたい。
|
| ２． | 特定のリンクテキストだけ色を変えるときの落とし穴 | ||||
| 【回避の仕方】 リンクタグ（<a href = ""></a>）の内側で、フォントタグ（<font color = ""></font>）による色指定を行う |
|||||
| 【ジャンル名】 画像・色・テキスト | |||||
| リンクテキストを詳細に設定するにはスタイルシートの使用が望ましいが、特定のリンクテキストの色を任意に変えるだけであれば、スタイルシートを使わなくても実現することができる。 ただしその際には、タグの記述順序に気をつける必要がある。 HTMLでは後から記載されたタグが有効になる傾向があるため、リンクタグの外側でフォントタグの指定を行うと、<body>タグ内で指定されたデフォルトのリンクカラーが適応されてしまい、設定が無効になってしまう。 任意にテキストリンクの色を変えたい場合には、リンクタグ（<a href=""></a>）の内側にフォントタグ（<font color=""></font>）による色指定を行う。 これによりテキスト毎に自由にリンクの色を変えることができるようになる。
|
| ３． | クラス名を指定するときの落とし穴 | ||||||
| 【回避の仕方】 クラス名をわかりやすく区切る場合には、アンダースコア（_）ではなく、ハイフン(-)を使用する |
|||||||
| 【ジャンル名】 スタイルシート | |||||||
| CSS2の仕様によると、スタイルシートのクラス名には、アルファベットと数字以外に、ハイフン(-)とアンダースコア（_）を使用することができる。 クラス名をよりわかりやすくするため、単語を区切って設定したいときなどに便利な仕様だが、アンダースコア（_）を使用するにあたっては注意が必要だ。 クラス名にアンダースコア（_）を使用した場合、Internet Explorerでは正常に反映されるものの、Netscape4.7では正常に反映されないという問題がある。 一方のハイフンを使用すれば、ブラウザの違いなく表示させることができる。 Netscape4.7ユーザーをターゲットとするサイトを制作する際には、クラス名にはアンダースコアが使えないと覚えておこう。
|
| ４． | センタリングの指定を行うときの落とし穴 | ||||||
| 【回避の仕方】 margin=autoの指定とtext-align=centerの指定を、入れ子にして適応する。 |
|||||||
| 【ジャンル名】 スタイルシート | |||||||
| スタイルシートにはブラウザ間での表示差異がいくつか見受けられるが、センタリングの指定もそのひとつで、使用の際には注意が必要だ。 最新のNetscapeやOperaなどでは「margin-left:auto; margin-right:auto;」と設定することでセンタリングできる。 これはW3Cに準拠したものだが、Internet Exploreではバグがあり、この指定が無視されてしまう。この問題は<div>タグなどを使いmargin指定をtext=align指定で囲んで設定することで解消できる。 これにより、センタリング指定時のブラウザ間の差異がなくなる。
|
| ５． | 画像をパブリッシュするときの落とし穴 | ||||
| 【回避の仕方】 パブリッシュ設定で一括指定するのではなく、ライブラリで画像毎に圧縮率の指定を行う。 |
|||||
| 【ジャンル名】 FLASH | |||||
| 画像の圧縮率の設定は、「ファイル」→「パブリッシュ設定」→「Flash」画面のJPEG画質を調整して行うことができるが、デフォルト状態では全ての画像が同じ圧縮率になってしまう。 そのため、複数の画像を用いている場合には、汚い画像ときれいな画像が混在して表示されてしまうことがある。 画像の指定は、パブリッシュ設定以外に、ライブラリで画像を右クリック（Macの場合はCTRL+クリック）→「プロパティ」で、デフォルトの画質を適応のチェックをはずすことで個別に指定することができる。 またここではJPEG以外にロウレスという劣化しない方式で書き出すように設定することも可能だ。 FLASHで画像をより美しく表示させるために、ライブラリ上で画像毎に圧縮率を設定していくようこころがけたい。
|
| ６． | 文字をアウトライン化するときの落とし穴 | ||||
| 【回避の仕方】 Illustratorなど、他のベクターソフトで一度アウトラインしたデータを読み込む。 |
|||||
| 【ジャンル名】 FLASH | |||||
| FLASHでパブリッシュを行ったとき、書体によっては文字がつぶれたり、穴がふさがったりすることがある。 同様の現象は、FLASH上で文字を分解しても発生する。 見出しやタイトルなど、文字が大きめに表示される箇所での文字のつぶれはサイトの全体の印象を損ねかねない問題だ。 FLASH上でこれを回避することはできないため、IllustratorやFireworksなど、他のベクターソフトでアウトライン化したものを読み込む必要がある。 なお、文字のレンダリングについてはバージョンによって異なるため、できる限り最新のバージョンを利用するようにしたい。 またFLASH MXでは、テキストに関する問題を大幅に解消したアップデータも配布されているので利用しよう。（http://www.macromedia.com/jp/support/flash/downloads_updaters.html）
|
| ７． | ぼかした影をシンボル化するときの落とし穴 | ||||
| 【回避の仕方】 ソフトエッジとアルファを利用することで、ぼかした影のグラフィックををFLASH上で作成する |
|||||
| 【ジャンル名】 FLASH | |||||
| FLASHでボタンなどにぼかした影をつける場合、PhotoshopやFireworksで影のビットマップ画像を作り、FLASH上で組み合わせるといった方法がある。 しかし、画像を扱うとファイルサイズが大きくなりがちで、また拡大や変形などにフレキシブルに対応しにくいという問題もある。 FLASHでは「修正」→「シェイプ」→「ソフトエッジ」の機能を使うことで、輪郭をぼかした矩形を簡単に作ることができる。 この機能とカラーのアルファ値の設定を組み合わせることで、よほど複雑な影以外はほぼ再現できる。 この影はベクターデータのため、拡大や変形も容易に行うことができ、またサイズを軽く仕上げることができる。 モニターで見て問題ないようであれば、影は画像ではなく極力ベクターデータを使用したい。
|
| ８． | OperaでFLASHから新規ウィンドウを開くときの落とし穴 |
| 【回避の仕方】 htmlソース上の<object>タグのパラメータを <param name="allowScriptAccess" value="always" />とする。 |
|
| 【ジャンル名】 FLASH | |
| FLASHとJavaScriptを連携させて、ポップアップウィンドウを開くことはよく使われている手法だが、ブラウザにOperaを使っている場合には注意が必要だ。 Operaでは、FLASHとJavaScriptの連携にバグがあるようで、他のブラウザと同じようにgetURL内にJavaScriptの命令文を指定しても、ポップアップウィンドウが開かない。 これは、HTMLソース側のobjectタグのパラメータを、<param name="allowScriptAccess" value="always" /> と設定することで解消できる。 |
 |