css

• Four new W3C modules for CSS Level 3 – CSS3 . Info

WebKitが独自で実装していたCSSによるアニメーションがCSS3のドラフトとしてW3Cよりアナウンスされたっぽいです。
（あくまで自分の半端な英語力での理解なので、ちょっとニュアンス違うかもしれませんが）

このあたり、ブラウザデベロッパーも大変でしょうが、はやく使えるようになってくれないかな〜。

まず前置き。
僕も改行をたくさん入れたくなる心理というか、Web標準を守るならどうするとか、仕事中そんなことを考えることがあったので、下記の記事を読んで色々と思うところがあって、それを大分前からこの記事にばーっと書いてました。

で、その後、あんまりまとまってもいないんですが、これ以上まとまる気もしないので、ちょっと落としどころのない中途半端な文章なんですが、そのまま公開します。あしからず。

---

Continue reading

Firefox のアイコン作者にして、現在 Opera のシニアデザイナーをつとめる、 Jon Hicks 氏が作った新しい Google Reader 用スタイル、Helvetireader。

Continue reading

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

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

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

気をつけネバ。

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

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

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

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

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

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

参考リンク

• font-family (Opera 9.50 Alpha) – bend tail
• Safari 3.1でWebフォントを利用する–SafariのCSS対応 – builder by ZDNet Japan

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

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

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

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

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

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

覚え書き。

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