???FLAFLI

まぁ、まともに見えるようにはなりましたが、どうやらMac IE5.xで見ると、カレンダー部分がおかしいかも。

僕がマックを持っていないんで、確定。ではなく、不確定ですが。

仕事ではもちろんだけど、ブラウザによって見え方が変わってくるのが結構問題。

最近は、ほとんどの人が、IE6.0やFirefox、Safariだから、IE6.0に注意すれば、まぁどのブラウザでも同じように見せることは可能。
でも、これでお金をもらう身としては、古いブラウザにも対応させておきたい。

そこで、よく耳にするのが「CSSハック」という言葉。
ようは、ブラウザのバグを利用して、同じように見せる方法。

色々とやり方はあります。
「CSSハック」でググッたら、結構でてくるんじゃないんでしょうか。

でも、書き方間違うと「CSSハック」だらけのスタイルシートになってて、いざモダンブラウザだけになったとき（多分なることはないですが…）、無駄なスタイルシートになってしまうわけです。

知ってました？

img画像をリスト（<li>）で縦に並べようとすると、微妙に隙間ができちゃう。
これを解除する方法なんですが。

imgのスタイルシートに
border:0;
ってやれば、Firefoxでは正常に隙間がなくなりました。

でも、この方法だと、IE6.0ではまだ隙間が･･･。

で、FirefoxでもIEでもちゃんと隙間なくimgを並べる方法。

いまさらながらに、CSSハック。

もう、IE7もβ3くらいまできてるし、今更…。って感じもしないでもないんですが、一応自分の作ったものに不都合があったので…。

参考にしたのはこちら。
　参考記事　『Win Ie5x対策　幅を指定したら余白は0に』
　参考記事　『ボックスモデルハック』

この方法、イイ！
ほんとに。

実は、テンプレートを作って、それをお客さんに編集してもらってたので、HTMLをいじることができなくて、そこでCSSだけいじくってどうにかならないだろうかと思ってたところ、この方法を使えば改めてCSSの値を考えていくのがちょっとめんどくさいけど、うまいこといった。

今日、ちょっとコーディングしてて感じたことなんですが…。

みんな、CSS書くとき、フォーマットして書いてるのかな…。ってこと。

「フォーマット」ってゆうとおかしいのかもしれないけれど、いわゆるブラウザのデフォルトCSSを初期化！みたいなこと。

それについて、ふと疑問に思ったので、いろいろと調べてみたんですが…。

最近は、ほんとCSSレイアウトで製作するのが主となってるんですが、そこでよく出会うMacIE用のバグみたいなものの対処法メモ。

例えば、2カラムのレイアウト作るときに、メインコンテンツにfloat: left;、メニューにfloat: right;を指定するとします。
で、なんらか他の要素も相絡まって、その親要素にclear: both;をしてしてると、floatが崩れる。
ってか、floatしない。

これ、たまにはまる…。

『あれ？なんで？』ってのが、結構…。

これを解決するのは簡単で、まずは原因となってるclear: both;をはずす。
すると、まぁ、あちこちにガタがきてしまう場合もあるわけです。

もしかしたら背景が出ないとかってのもあるかもね。

そこで、最近流行の？clearfixの登場です。

これ、設定しておけば背景出るし、floatするし、簡単だし。
clearfixについては、その言葉で検索すれば見つかります。

って思ったんだけど、もし、それ目当てで来てる人がいたらってことで、以下に。

ちゃんとCSSするためのスタイルガイド入門

その中で、どうしてもSafariだけがうまいことレイアウトとれない。ってことがありまして。
で、あまり使いたくないものの、ハックを探してみました。

Mac IEなんかに比べると、全然簡単なハック。

html:\66irst-child p { font-size: 12px;}

たったこれだけ。

この「66」っていうのは、いまいちよくわかってないんだけど、流れからさっするに「first-child」の「f」ってことなんだろう。

ハックを使わないことが一番いいですが、納期まで時間がないとか、どうしてもハックを使わざるを得ない状況になった時にでも。

プログラム組むためのテンプレートとして作ったHTMLファイルが、MacIEでのみ文字化けする…。

内容の編集画面なので、仮でinputのvalueを書いておいたら、その部分だけが文字化け。
他の部分はちゃんと動いてるのに…。

しかも、僕が今まで作った中では、そんなことはなかった。
ただ、今回は別会社が作ったものを手直しだったから困った…。

で、いろいろと調べた結果、解決策が。

最近はあんまりMacIE5の事を気にせずコーディングしてたんですが、今回の案件で、とりあえず対応ブラウザに入ったのでしっかり確認。

で、その確認のときにselectの値が空っぽになってたことに気づいたので大慌て。
空っぽっていうか、空欄っていうか、選択できるんだけど、値が見えない。って感じ。

Microsoftのサポートページにも書いてあったんだけど（Internet Explorer 5.1 / 5.2 for Mac OS X で、特定の web ページにて Select タグのメニュー候補が表示されない）、UTF-8で作成したときのみ起こるらしい。

その解決法は

selectタグにlang="ja"を追加する

ってことで解決。

仕事と言うよりは個人的内容ですが、ようやく最近HTML5に少しずつ触れています。

その中で一番いろいろ試せるのが自分のブログになるわけですが、今のこのブログがMT3.32なので、スパムコメントもどんどん入ってくるし、何より仕事で使うことも絶対的にないし、ということもあって、ようやくWordPressへの乗り換えへと動き始めています。

そしてテンプレート作るならやっぱりHTML5よね。ということで会社仕事ではふれることがないHTML5を使って毎夜毎夜やってます。

デザイン起こしたのは下手すりゃ一昨年くらいなんだけど、一応それをHTML5で組んで、Chromeで上手いこと表示されて、問題ないだろうけど次Firefoxで確認したら…。

あれ？
なんか思ってたのと違う…。

基本的なことがわからないまま、ただ単に進めていくとこういうことになるよ。っていうホントいい例。