Web閲覧環境による色の違いを考える
Windows環境の実機で確認しなかったための失敗
基金訓練の教室で使っているのはWindowsのノートパソコン。サイト作りは教室でも自分のMacBookProを使って作業をしていたため、ここ1ヶ月は全く使っていませんでした。もちろん、Windows上のブラウザーで見え方のチェックも行いましたが、Windows7がインストールしてある仮想マシン環境のParallels Desktop。
そのため、最終プレゼンの直前に教室のパソコンでもチェックしてみたところで、今まで見ていた色と全く違う色の印象になっているのに気づきました。茶色系統の色が紫っぽい色になっている。ParallelsもMacのカラーマネージメントシステムで動いているソフトウェア(のはず)なので気づきませんでした。
Webサイトを見るのは普通の人
製作する側ならカラーマネージメントをやればいい、FireFoxやSafariで見ればいいで終わりですが、Webサイトを見るのは「普通にパソコンを使う」人。その人の使っているパソコンの画面での見た印象がすべてだから、色のことを考えると奥が深い…。
カラーマネージメントの話はこちらで
miyahan.com | 液晶ディスプレイとカラーマネージメント
サイト管理で特定のファイルをアップロード対象外にする設定
クローク機能でアップロードしたくないファイル拡張子で指定
Dreamweaverの「サイト管理」で詳細設定にある「クローク」が今回のポイント。
「クロークを使用可能にする」へチェックを入れ、「次で終わるファイルをクロークする」で拡張子を設定する。半角スペースの後に続けて複数の拡張子を設定することができる。
psdやai、flaといったファイルを誤ってアップロードしないようにするための設定。
FireFoxのAddonを探したりインストールする方法
ブラウザーの実装の違い
最新版の実装を確認した
昨日、CSS3で角丸を作りましたが、Mozilla Developer NetworkのCSSリファレンスで読んで気になったFireFox4と3.6.16の実装の違い(Geckoのバージョンによる実装の違い)を確認しました。
昨日試したもの。
border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px;
これを以下のように変更して確認したところ、FireFox3.6.16では見えませんが、FireFox4は見えます(Safari5.0.4も見えます)。
border-radius: 20px;
次に逆のパターンも試してみた。
-moz-border-radius: 20px; -webkit-border-radius: 20px;