スタイルシート、JavaScript、DOM、ブラウザ判別、PHP 等ウェブ制作関連の各種情報
2007-02-142006-02-04
スキン変更してるのでまたちょいとレイアウト狂ってる箇所あります。これで直ったかな？見出しの画像化（FIR）はかなり広まったと思うのでもーいいかとも思うんだけど近日ただレイアウト修正じゃなくて内容整理しようと思います。
いちいち見出し等の「本来テキストで済むはずの箇所」をわざわざ画像にするのは、欧米サイトよりも日本のサイトのほうが多くないでしょうか？理由はブラウザで使われている日本語フォントが美しくないという点だったりするからだと思います。リコーさんなんとかしてください。CSS でフィルターなんかが発展するのもアリだけど、根本的にフォントが思うようにならない環境だと結局画像処理にしちゃうでしょう。
alt テキストを使うのは必須であって、そんな点はあえてかくまでもなく、ようはデザイナーがイイ感じの見出し画像等を作って、通常はそれが見えるけども、キチンと見出し要素にテキストをいれて、不必要な場合に隠すことができればいいわけで、スタイルシートで制御可能です。難しいのはその画像がでない環境ではたしてキチンと意図した通りになるかどうかのチェック。
CSS のボーダー処理で済むならそれでいいけど、線ひくだけだとクライアントに手抜きに見られる、なんてことがあるのは本当。「ちゃんと作ってます」というためにわざわざ画像を使うなんて大変クダラナイことなんだけどね。
ここのは大変シンプルで、ヒジョーに簡単そうに見えます。だけど普段から使えるようになるまで何年もかかっ（笑）ちゃいました。（ネットスケープ4 対策なんかやってたから）すべてはコイツラの応用で済むはずです。
紙面デザインを長くやってるデザイナーさんに好き勝手にやってもらって、どーやって CSSでやってやろうかと考えるのは好き。シッカリした職業デザイナーさんだったら、内容を見て、HTMLの見出しレベルとかにもちゃんとハマった使い分けとかサイズ指定とかができていたりします。単に見た目というよりそういう点の重要さを身に付けている人はいますね。
CSS のボーダーだけで「ほーらこんなにカッコよくなるよ」ということはいいません。最近、にわかスタイルシート使いがやるボーダーデザインは、殆ど同じでセンスなし。なんにもしないほうが新鮮だったり。dotted は好きなんだけど、IEの中途半端さはイヤだなぁ。ホントセンスない。
inset、outset は、ボタンデザイン風にする等、立体感を出すのに便利です。昔はテーブルでやったもんです。ただやはりブラウザ毎に明暗のパターンが違っているので、細部にこだわると、上下左右を solid で設定することになります。ブラウザ判別シート分けして調整する手もあります。
Safari だとちょっといい感じなんだけどな。小手先ワザ。
いわゆる画像置き換え。
カドマル背景にテキスト乗せ。リキッド対応のため空ブロック使ってます。JavaScript で後から付加するとかにしたほうが良いと思う。
背景画像使った別の表現。テキストまんまでその行の真ん中に「テキストにかからないで」ラインをひく、と。テキストを span でかこってそこだけ背景色かまします。
フロートしてみた。中身はテキストまんま。
下のヤツは画像置き換えなんですが、テキストの上に画像をかぶせるブロックをいれてます。
更新 2007-02-14 10:06 初回投稿 2004年10月29日 00:18
フリーのウェブサイトディレクター。音響オペレーター。北海道札幌にて活動中。
Web Site designed by Studio Susto