どれだけの人がIE6ブラウザに苦しめられたことでしょう。

「IE6だとCSSレイアウトが崩れる」

コーディングする人からはこんな声をよく耳にします。

私のPC（windows）にもFirefoxとIE6が入っています。

いつもこの両者を見ながらコーディングし、最後に他のブラウザチェックをしています。

今回はIE6をなくしたい方が作ったサイトの紹介です。

『IE6 No More』

IE6でアクセスすると



上の方にこんな感じのメッセージがでます。

このサイトではWebサイトに埋め込むHTMLコードを配布していて、

そのコードを埋め込むとIE6ユーザーがアクセスしてきたときにメッセージが出るようです。

これを広めれば、IE6ユーザーは減っていきますね。

早速、明日の会議で提案してみようかな。

コーダー歴の長い方には当たり前のようなことですが、

今回は、CSS初心者の方に向けて書いていきたいと思います。

CSSの記述にはいろんな形があります。

①外部CSSファイルをリンクする方法

②headタグの中に「<style type=”text/css”>●●●</style>」の形で書く場合

③タグに直接、styleを書いたり、classで名前をつけた場合

①と②はどちらもhead内に書くのですが、下に書いてあるものが上に書かれているものを上書きしていきます。

③がある時は③が①or②を上書きします。

☆補足☆

複数の外部CSSファイルをリンクしている時もhead内で下にリンクされている外部CSSファイルが上にリンクされている外部CSSファイルを上書きします。
↓　　　　　↓　　　　　↓　　　　　↓　　　　　↓　　　　　↓　　　　　↓
<link href=”aaa.css” rel=”stylesheet” type=”text/css”>
<link href=”bbb.css” rel=”stylesheet” type=”text/css”>

head内でこのような順番で書かれている場合は「aaa.css」を「bbb.css」が上書きします。

いつも汗をかきながらコーディングしている寺本です。

サイトの設計の時、相対でCSSの文字サイズを指定していますが、

ページ内で、ほんの少しだけ文字サイズを調整したいなという事がありますよね。

そこでこんなことが分かりました。



こんなソースを書いたときにFirefoxでは



IE6では



こうなりました。

これらをよくみてみると、Firefoxでは0.05emや5%のサイズ変更にちゃんと反映していますが、

IE6では0.7emと0.75em　又　70%と75%でのfont-sizeの差に英語で書かれたところは反映していますが、日本語の部分には反映されてませんでした。

気持ちだけ大きくしてもIE6さんには伝わらないこともあるんですね。

印刷用のCSSを作っていて面白いバグを発見しました。

このページのグローバルメニューの幅は全体で800px

Fireworksで800ｐｘで作った後、ボタンをそれぞれ書き出しました。

ところがCSSでメニューのwidthを800pxで指定したところ「カートチェック」のボタンが落ちてしまいました。

こんな感じです。



原因をいろいろ探していたところやっと見つけました！！！

800pxでしていたwidthを801pxにしたらちゃんとはまりました。

こんな感じです。



同じようなバグに悩まされている方はきっといますよね。

CSSは1pxに泣かされること多々ありです。たかが1px！されど1px！

最近のブラウザ市場では開発競争が激しくなっていて利用するユーザにとって
選択肢が増える事はいい事ですがWebサイトを作る際にはそれぞれ確認が
必要になって作業が増えてしまいます。

CSSVista（フリー）はIE7とFirefox2を同時に確認しながらcssの編集が出来るので
作業の短縮になるのではないでしょうか。

使用画面はこちら



有料版($24)で確認できるエディタのリスト

Windows browsers

* Explorer 8.0 (Beta 2)
* Explorer 7.0
* Explorer 6.0
* Explorer 5.5
* Explorer 5.0
* Firefox 3.0
* Firefox 2.0
* Firefox 1.5
* Firefox 1.0
* Flock 1.1
* Google Chrome 0.2
* Netscape 9.0
* Netscape 7.2
* Opera 9.5
* Opera 8.1
* Opera 7.5
* Safari 3.1
* Sea Monkey 1.1

Mac OS X browsers

* Camino 1.6
* Camino 1.0
* Safari 3.1
* Safari 2.0

Linux browsers

* Firefox 3.0
* Firefox 2.0
* Konqueror 3.5

$24でこれだけ確認できるのなら買って損はしないですよね。

CSSVista

コーダーの寺本です。

XHTML＋CSSレイアウトのコーディングをしていて、ブラウザの解釈の違いでコーダーを悩ませてくれるのが「IE6」ですよね。

最近の寺本は、ブラウザとそのページを印刷した時の表示の差について、いろいろと勉強しています。

そこで、印刷はＩＥの方が上手なのでは・・・と思いました。

理屈通りに組んでいくと素直にブラウザ表示してくれるFireFoxですが、

印刷だとなぜか、IEよりもうまくいかないのです。

コーダーの皆さん、いかがでしょうか？

印刷用CSSで困ったことの紹介。

コンテンツをfloatした時、そのコンテンツを囲っているブロック要素に

「overflow: auto;」

を与えて、背景の高さを確保するように使用していた。

これを発見した時はなんと画期的なんだと、感動していたが、

これが思わぬ落とし穴だった。

作成したWEBページの印刷プレビューを見ると、

ページの内容の途中が切れてしまい表示されないことがある。

「overflow: auto;」をはずすことにより、ちゃんと表示された。

背景の高さ確保に、安易に「overflow: auto;」を使うのは危険だ。

MdN InteractiveでCSSフレームワークの記事が紹介されていました。

CSSフレームワークによる作業の効率化


自分はPHPでの開発が専門であまりCSSに詳しくない為、

たまにCSSを書くときには大抵、他のサイトや

以前作ったサイトからコピー&ペーストしてきます。

なので、CSSのライブラリなどがあれば便利だなと

常々思っていたんですが調べてみるとすでにあるものですね。


フレームワークは学習コストが高いですが、一度学習すると

作業の効率化に繋がります。

一長一短ですが導入するかどうか検討するだけの価値はあると思います。


こちらの記事ではYUI Grids CSSとBlueprint CSSの使い方が

簡単に紹介されています。CSS初心者の自分にもわかるように

書いてあるのでとりあえず使ってみたい人には参考になると思います。



なお、こちらの記事は

Web creators (ウェブクリエイターズ) 2008年 12月号 [vol.84]

からの転載なのでWeb creatorsを買っても見る事が出来ます。