2011年6月16日木曜日

もう本当にIE6・IE7は消えて! IE6・IE7デザインの注意


わりと富裕層だと思われるドッグランに来る人なんかIE7よりIE6が多かったりする

上記のとおり、日本は今のところIE8が主流です…。
もう最近、ややこしい仕事を受けてしまいました。 デザイン外注で、そのデザイン会社はCSSで作ったことない。クライアントも複雑な組みのホームページじゃないとチャチィと言う。もう、その段階で頭痛もん。 いま、世界的にシンプルHTMLが主流なんっすけどと説明してもわからん。

楽天のデザインしている会社なんで、いまだにテーブルでドリームウェーバーの書き出しでやってるとかいう会社なんだそうだ。 それでいいと。 なんでCSSなんか必要なんですか?と言われてしまった。


そりゃCMSで作るのにCSSなかったら成り立たないからですと教えてあげたけど、感動はなかったみたいでした…。 

佐伯さんも楽天の仕事したらいいのにとか言われてしまった。 そうか。という感じ。
まあ。作っては消すような楽天の仕事とかスピードが要求される仕事なんで、私みたいに1ページ組むのに(それを作ってから量産するんだけど)1日考えて検証して…みたいなことをしているのはわからないでしょう。

でも、CSS知らないと大幅リニューアルの時に超めんどくさいので、これから習う人にはCSSは基本です。 SEO対策においてもCSSじゃないとダメです。 とはいえ…いろいろ考えさせられたわ。 私なんか予算がとにかくない会社がどうやって浮かべるかを考えてきましたものですから…。 確かにそれでいいというところもあるのだろう。 ある意味羨ましい。

だって!ホンマにIE6の検証というのは時間がかかるのだ。

しかし、さすがの私もie9が出てきて、ファイヤーフォックス、オペラと次々と出てきますと、jqueryでかわいく角丸にしたサイトはIE6では繁栄されないとか、もうかまってられへんわと、さすがにもういいだろうとIE6は無視して作ってる。…て書いてみたい!が、やはり、ちょっとは考えている。
あんまり崩れてたらカッチョ悪いと思ってしまうあたりが私って職人なのよね。

でも、複雑な組になると無視せざる得ないよね~。今実は超悩んでいるが、お客さんは私が何を悩んでいるのかわからんみたいです。


で、IE6というのは、私の感じでは…。

float:right でごまかしきかない。
1ピクセルでも長いと無視される。
バック画像での処理がカッコよくいかないときがある。
とにかく複雑なことはできん。

くらいのことしか知りませんでした。
ほとんどカンです。
要するに 
・CSSでfloatしたブロックのmarginが倍になる。
・後方互換モードの場合、text-alignが子要素にまで影響する。
・透過png画像が透過されない。





ピクセル単位であわせなければならない場所にはborderを使わない。

センタリングも うまくいかない。など、これまでカンで書いていたが、よくわかった。

この人すごいIE6対応のフォームについても研究している!


が、めんどくさすぎる!

今日、わかったことは、 dl dt dd の間が飽きすぎていてマイナスに設定するとレイアウト崩れる。
IE7だと見えない!

/*IE6 */ *html

/*IE7 */ *+html

で、しっかりfixかけるというのは、複雑なことしたら必ずしとかないといけません。
細かいIEでの分岐方法はこちら

なんか、この頃、めんどくさいから、無意識に難しいことはしないようにしていたのですが、今回は久しぶりにめんどくさいです。
その他 IE6は文章中のfloat left で画像を入れるとかも表示されないから。 (もう、こういうのは無視してもいいかも)

ただ、文章が見れないとあんまりなので…。


これは、divでバック画像を表示させ、それをfloat-leftで並べてみたのですが、こんなめんどくさいことをしても、ie7で見事に見えないので、こういう場合は、ポーンと画像にしたほうがいいことがよ~くわかりました。

ちゃんとIE8では見れているのね。 でも IE7も多いので、ここはやりなおします。 orz

あ~疲れた。 バカ。 凝ったらいかんし。 画像で処理したらいいし。 もうseoとか…。ちょっとはするけど。…

しばらくCSSで悩む日々が続きます。


ちなみに、アンドロイドファイヤーフォックスではバッチリです。


バック画像はイカしてほしいのだが。
IE7で部分的にはいけているのに、複雑になると見えないのがつらいよね。

はぁ。

Microsoft Expression Web super preview というのがあるそうです。 なかなかいいです。まだ使ってまもなしですが。

お問合せフォーム

お名前 :
Email: (必須)
メッセージ: (必須)


0 コメント :

コメントを投稿



連絡フォーム

名前

メール *

メッセージ *

サイト内検索

View My Stats