IE 6 / 7 と Opera 9 の font-family バグ → フォントについて考え事

標準

Typegraphy

自分はこれまで知らなかったんですが、Opera には font-family の再現にクセ(バグ)があるようですね。
Web Designing 誌を帰りになんとなくパラパラ読んでいたところ、IE 6 / 7 と Opera 9 ではフォールバック効かないという記事があったので、ちゃんと読んでみたら、


body {
  font-family:
    "ヒラギノ角ゴ Pro W3",
    "メイリオ",
    Osaka,
    "MS Pゴシック",
    sans-serif;
}

とした場合、IE 6 / 7 & Opera 9 では "ヒラギノ角ゴ Pro W3" がない場合、それ以降の指定を無視してデフォルトの sans-serif フォントになってしまうとのこと。
いままで見落としていました、このバグ。

気をつけネバ。

ちょっとフォントについて考えてみる。

これまで、Web の世界ではフォントやタイポグラフィーというのは環境に依存する部分が多いということもあって、一般的なサイトでは画像としてデザインされてラスタライズされたもの以外は、グラフィック的な使われ方はあまりされていなかったように思います。
特に日本語のサイトにおいて、そう言えるのではないかと思います
でも、これからはブラウザの CSS の実装が強化されて、フォント周りの調整がより細かくできるようになるし、また、フォントの指定などもサーバー上のフォントデータをダウンロードして表示するなどの機能が HTML 5 に搭載されるなど、フォント周りのデザインは今後 DTP と同じような感覚で文字組みが可能になると思います。
そういう意味では、Web 制作において、今後コーディングという作業が、文字組みというデザインでもっとも重要な作業のひとつと限りなく近づくということです。
そういう意味では、画像ベースで作業をするデザイナーとしてだけではなく、コーダーとして作業する場合にも美しい文字組みや読み易い文字組というのを改めて考えて、意識しなくちゃいけないと思ってます。

DTP の仕事をしていた時、文字組みや字間の調整は、それこそ大げさではなく 0.01mm の単位で読み易さの追求が求められました。それはきっと、画面がピクセル単位になったからといって大きく変わることではないと思います。
だって、印刷物であってもディスプレイであってもその前にいるのは同じ人間なんですから。

今、単に見慣れている、というだけで違和感がなかったとしても、ちょっと気を遣って見れば、行間が狭くて読みづらいページや、逆に広すぎる行間、字間がつまり過ぎていたり、なにも調節していないテキストは Web の世界にはあふれています。

情報が文字としてそこにあれば読んでもらえる、というのは作り手側の思い込みだと思います。

ブラウザなどの環境が整いつつある今、リッチインターフェイスの Flash コンテンツや Ajax バリバリの Web アプリケーションも非常に魅力的ですが、こうした基本的な、でも一番大事な部分にしっかりと気を使えるデザイナー、はたまたコーダー、いや、クリエイターになりたいです。

参考リンク

「Simple is Best」の説得力をブーストする図

標準

シンプルであることはどういうことかを教えてくれる『Simplicity』| CREAMUより

simplicity

言葉はいらないですね。。。

クライアントがいる仕事では、クライアント側が「あれもしたい、これもしたい」と、どんどん内容がごちゃごちゃしてしまうけど、こういうイメージを制作側とクライアント側両方で共有できていればもっとスムーズに進みそうです。

text-indentを使わない画像置換

標準

fixture.jp/blog – Appleサイトに見るグローバルメニューの画像置換手法より

CSSでリンク等のテキストを画像に置換する方法。

text-indent:-9999px;とかで飛ばすんじゃなくて、


overflow: hidden;
height: 0;
padding-top: 100px;

などで、text-indentを使わずに文字を表示領域の外に隠すという方法。

使うならこれのほうがスマートな気がします。

覚え書き。

タイトルがtext-identになってて、直しました(汗)

SafariのJavascript

標準

バージョン3になって劇的にスピードアップし、一気にマイメインブラウザにのし上がったSafari。
一点だけ気になる点がAJAXっぽい動作をする時に稀にエラーが起きることです。

以下、自分の環境で発生したリスト。

  • Gmailでコンタクトに登録したアドレスが補完されない
  • Gmailでコンタクト一覧を表示した時に検索バーが出ない
  • WordPressの投稿画面で画像のアップロードができない

でもこれ、毎回という訳じゃないです。稀です。
Gmailに関してはなんとなくですが暫定対処法を編み出してしのいでいます。
Wordpressのエラーもその後は遭遇してないし。

wordpressをローカルにバックアップ

標準

WordPressのテーマをカスタマイズするのに、ローカルで作業しようと思ってMAMP上にインストールしたら文字化けが。
解決方法を覚え書きとしてエントリー。

WordPress Database Backupで定期的にバックアップしているデータベースのファイルの最新のものをローカルのphpMyAdminでインポートして、wp-config.phpの設定をローカル用に書き換えてWordpressにアクセス。

これだと、なぜか日本語が文字化け。

まずMAMPのPHPのphp.iniの設定かな?と思って

  • /Applications/MAMP/conf/php4/php.ini
  • /Applications/MAMP/conf/php5/php.ini

の400行目を

;default_charset = "utf-8"

にしてみたけどダメ。
(この設定は結局このまま。多分この変更は関係なかったと思うんだけど一応書きました)

で、結局解決に繋がった方法は、
phpMyAdminでデータベースを作成する際に照会順序をutf8_unicode_ciを選んで作成したところ、
インポートした後もデータが文字化けしませんでした。

こういうの、頻繁にやらないからな〜。
覚え書き覚え書き。

ただ、まだ解決してない問題も。

wp-config.phpで
define ('WPLANG', 'ja');
にすると、管理画面が真っ白に。。。

なんでだ〜…