METEO Joker

〜取締役デザイナーがたまに書くブログ〜

CALENDAR
Sun Mon Tue Wed Thu Fri Sat
  12345
6789101112
13141516171819
20212223242526
2728293031  
<< August 2017 >>
PROFILE
COMPANY
Twitter
SELECTED ENTRIES
RECENT COMMENTS
RECENT TRACKBACK
CATEGORIES
ARCHIVES
MOBILE
qrcode
LINKS
OTHERS
CSS&PNG透過処理との激闘
現在CSSを勉強中なんですが、
覚えた小ワザは即実践投入ですプシュー
もうCSSなしでは生きていけない体なの…

さて、ここ何十時間か、
日本の国家「ドラクエ3」のロトのテーマをBGMに、
敬礼を交えつつWEBサイト制作をしておりました。

今回作っているWEBでどうしても透過処理した画像が必要になり、
PNGの透過画像を使う事になったんですが、
現状PNG画像の各ブラウザの対応は非常に不安定なんです。
(PNG画像ってなんぞや?ってゆー人→PNG画像について

最新ブラウザであれば問題なく表示されるんですが、
圧倒的シェアを誇るIE6が未対応爆弾といういかんともし難い状況。
(正確にはフルカラーの透過PNGが未対応)

これでPNGの透過画像を諦めてる人って結構いるんじゃないでしょうか?
実際僕も使うのはあえて避けていたんですが、
これ使えたらWEBデザインの幅はかなり広がると思うんです。

で、今回いろいろ調べてみたら、
透過PNG画像を表示させようと頑張ってる人達がたくさんいました。
すごいなー、ほんと感心します拍手

その中でもかなり使えそうな方法があったので紹介です。

■ ユンサンの/융상의/YungSang's
透過PNG と IE と IE7

上記エントリーに「iepngfix.js」というファイルがあるので、
それをダウンロード。

1.透過PNGを使うHTMLの<head> 〜 </head>の間に以下追加
<script type="text/javascript" src="iepngfix.js" charset="utf-8"></script>

2.CSSで透過PNGを使ってるclassかidに以下追加
* html .iepngfix {
behavior: expression(IEPNGFIX.fix(this));
}
.iepngfixの部分は任意のclass名かid名に変更

上記を恐る恐る実践してみたんですが、

で き ち ゃ っ た
 ラブ 

IE6でも問題なく透過されてるっ!
すごい、感動したプシュー

でも一つ分からなかったのが、
今回のPNG画像はCSSで背景画像として指定している画像のみで、
HTMLに直接張り付けしてる画像には適用できませんでした。
というか多分僕のやり方が悪いんだな…あせあせ

ちなみに「* html」というのはCSS Hackと呼ばれるもので、
これまた他にも色々なHackがあってすごい便利なんですが、
各ブラウザのバグを利用しているようなので、
なるべくなら使わないにこした事はありませんです、はい。
| Webデザイン | 07:39 | comments(2) | trackbacks(0) |
激闘!CSSでフォントサイズとちまちま格闘
Webデザインをする上で必ず悩みの種と一つとなるのが、
フォントサイズ。

まだWebをやり始めたばかりの頃は、
とりあえずフォントサイズ2とか3でやっていたんですが、
しばらくするとそれがMacとWin、さらにIEとネスケで
見栄えがまったく異なることに気付きました。

それからというものなんとかしてフォントサイズを統一できないかと
試行錯誤の連続でした。

もともとDTPでやっていた人ほど、Webでの文字サイズの融通の利かなさにイライラするんじゃないでしょうか?
少なくとも僕はそうでした。
結果、デザイナーは文字を画像にしてしまうんですよね。
(僕だけじゃないと信じたいw)

でもそればかりやってると今度は
SEO対策だなんだとまた違う問題が発生します。
長い文章を画像にするわけにもいかないですしねぇ…。
なによりユーザーが任意に可変ができない。


という事で、数年前にCSSに出会い、
フォントサイズの指定はCSSを基本に作ってきたんですが、
(ほんとはそろそろ全てCSSで作ったほうがいいんだろうけど…)
今まで以上にフォントサイズを上手に操る方法はないかと考え、
今回色々調べました。

CSSを使わずに指定する場合はフォントダグに指定する1〜7まであり、
デフォルトが3です。

ですが3で作ってみるとわかりますが結構でかいんです。
じゃあ2はというとこれがちょっと小さいんです…(苦笑)
2と3の中間がほしいのに無い…
しかもフォントタグはHTML4.0で非推奨となってますので、
今後は使わないほうが無難でしょう。

CSSでの指定方法は色々あり、
px、pt、em、%、small等の相対指定、など。

なにげにpx指定が小気味良い大きさだったりするんですが、それだとブラウザによっては絶対指定となりユーザーが任意に大きさを変えられなくなってしまいます。
よほどデザイン性に特化したサイトじゃない限り、文字サイズの絶対指定は避けるべきと考えます。
(最近のブラウザはpx指定でも可変できるようになってます)

ではpt指定はと言えば、
ユーザーの可変は可能ですが、
同じ12ptがOSやブラウザによってかなり変わってきます。
しかも12ptって微妙にでかいんですよね…。

やはり制作する上での条件は
[1].OS、ブラウザ間を問わず統一したい
[2].アクセシビリティの観点からもユーザーが可変できるようにする


そーなると%で指定するのがもっとも効率が良いようです。

基準はもちろん100%なんですが、
私見で言うとやはり「でかっ!」と思ってしまいます。

えーと、色々ややこしい事がまだあるんですが簡単に言うと、
DOCTYPE宣言は互換モードで「BODY」と「td」に75%で指定。
これが僕的には一番小気味大きさかなと思います。


ちなみに標準モードでこれをやると75%×75%になってしまい、
「table」タグを使った場合
とんでもなく小さいサイズになってしまいます。

互換モードでの「table」タグはCSS解釈におけるバグの一つで、
「BODY」に指定したものが全て白紙に戻されてしまいます。
「td」に同じ指定をするのはその為です。
互換モードのバグを逆手に取った手法というわけです。

まぁこれでもまだ全てのブラウザに対応してるとは言い難いですが、
今までよりは統一できてると信じて今日は寝ます。
それではおやすみなさいzzz
| Webデザイン | 03:29 | comments(0) | trackbacks(0) |