sIFRで画像を使わずアンチエイリアスが効いた綺麗なテキストを表示する
sIFRとは
sIFRとは(X)HTML内の文字をJavaScriptとFlashを使って画像のようにアンチエイリアスが効いた綺麗な文字を表示する技術です。
また、フォントの種類もこちらで指定したものがどの環境でも表示されるようになります。
対応ブラウザ：WinIE 5.0以上 / Firefox / Safari
この技術を使えば、フォントを何でも使えるようになり更にアンチエイリアスもかかるのでデザイナーの人は喜びます。しかし、無闇に使いすぎるのも容量の肥大化に繋がり、コンテンツの表示が遅くなってしまいます。
また、横並びにすると変な表示なったりブラウザによってフォントサイズが変わってしまいます。この他にも細かいバグみたいなものがあるので、使う箇所は見出しや、ワンポイントに限られます。
「後方互換モード」と「標準準拠モード」それに関わるIE6のバグまとめ
最近のブラウザは、その(X)HTML文書がどの仕様・バージョン・文法に従って書かれているかを示す「宣言」を解釈し「標準準拠モード」（W3Cの仕様に準拠）と「後方互換モード」（W3Cの仕様に準拠していない）とを切替えて表示しています。
宣言には「XML宣言」と「DOCTYPE宣言」とがあり、このブログを例にとって見ると以下の二つです。
- XML宣言
- <?xml version="1.0" encoding="EUC-JP"?>
- DOCTYPE宣言
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML文書には「XML宣言」を記述することが推奨されていますが、IE6.0では「DOCTYPE宣言」の前に文字が存在すると、「後方互換モード」になるというバグがあります。
つまり、XHTMLでコーディングをするとIE6.0では「後方互換モード」、その他のブラウザでは「標準準拠モード」と必ず表示に違いがでます。
文字コードがXMLのデフォルト値である、UTF-8かUTF-16の場合「XML宣言」を省略できることになっていますが、HTML-lintだと点数を引かれたり、どうしてもXML宣言を外せないという場合を考え、「後方互換モード」と「標準準拠モード」のどちらで表示しても対応出来るコーディングテクニックを覚えましょう。
IE5.5・IE6で半透明PNGを使いこなす
IE5.5・IE6が半透明PNGに対応してないために、半透明を使用したデザインのコーディングを諦める（または妥協）という苦い経験をしたことはないでしょうか。
そんな人のため（私のためでもありますが・・・）に、IE5.5・IE6で半透明PNGを使う方法をまとめました。
半透明PNGの使い方を覚えて頼れるコーダーを目指しましょう。
※サンプルを確認するためにはIE6でご覧ください。
IE独自拡張のfilterを使う
サンプル（使用前）
サンプル（使用後）
- ◇良いところ
-
・Java Scriptを使わず手軽に使用できます。
- ◇悪いところ
-
・CSSで背景に指定したものには使えません。
・クリッカブルマップが使えません。
・div などのタグで対象画像を囲うため、場合によっては無駄なタグを追加する羽目になります。 - ◇使用時の注意点
- ・対象画像の幅・高さをCSSプロパティの width と height で必ず指定しましょう。
コーディングガイドラインを作るときに定めておきたい項目
コーディングガイドラインの必要性
私もはじめはガイドラインの必要性を感じずにいました。しかし、コーディングを続けていくうちにじょじょに必要性を感じてくるようになりました。
なぜなら、コーディングガイドラインを定めないままコーディングした結果、自分で作ったものですらどういう構造になっているか分からなくなったからです。そのため、更新に手間取ってしまいました。
一人のときですらこの有様ですから、二人以上で作業を行うことを考えるとコーディングガイドラインの必要性は明らかでした。
その後、何度もコーディングガイドラインを改善してきました。
HTMLコーダーの「仕事」と「義務」
HTMLコーダーとは
HTMLコーダーとは、(X)HTML(※1)・CSS(※2)などを使用し、ウェブデザイナーがデザインしたものをブラウザ(※3)で見られるように、コードを書く(※4)人のことです。
- ※1．ウェブページを作成するためのマークアップ言語。
- ※2．ウェブページのデザイン・レイアウトを定義するための規格。
- ※3．Internet ExplorerやFirefox・Safariなどの、インターネットを閲覧するために使うソフトのこと。
- ※4．HTMLコーディングと言います。
HTMLコーダーの仕事
仕事の種類と内容
HTMLコーダーは普段どのような仕事をしているのでしょうか。ここからは仕事の種類と内容について紹介します。
ウェブサイトのHTMLコーディング
冒頭でも触れたように、ウェブデザイナーがデザインしたものをブラウザで見られるようにするためにHTMLコーディングしていきます。
ここで、Internet Explorer・Firefox・Safariなど複数のブラウザへの対応が求められます。
何故なら、ブラウザごとに表示の差違があり、Internet Explorerで表示されたものがSafariでは表示されないということが起こる上に、ユーザーもInternet Explorerだけを使っているだけではないからです。
この複数のブラウザへの対応がHTMLコーディングの一番難しいところであり、これが出来て一人前のHTMLコーダーと言えるところでもあります。
