Web デザイナーやブログテンプレートの制作者は自分のデザイン＆コーディングしたものが、より多くのブラウザで同じように表示されているかを常に意識しながら制作していることと思います。お疲れさまです。

今日はそんな制作者の方達にちょっとだけ便利なサイトをご紹介。

古い IE や Mac のブラウザ、Linux のブラウザなどでどのように表示されているかを、スクリーンショットで撮影してくれるサイトです。つまり色々なブラウザでの見栄えを確認できるサイトがありました。

続きを読む ≫

CSS のハックが少しずつ貯まって来たので一覧表を作ってみました。
CSS ハックとは何か簡単に説明すると、それぞれの WEB ブラウザのバグなどを利用し、特定の WEB ブラウザに特定のプロパティ（設定）を適用させたり、逆に適用させないようにし、CSS 内に併記した複数のスタイルのプロパティ（設定）を、それぞれの WEB ブラウザに振り分ける技術のことです。

これからは私が使用した CSS ハックや詳細などはこのエントリで随時まとめていこうと思います。
〔追記：２００７年１２月４日〕
〔追記：２００８年１月１２日〕
〔追記：２００９年７月２３日〕

続きを読む ≫

覚え書きです。

仕事でボックスに overflow-y 属性を指定してある Web サイトの HTML を修正中に見つけた CSS ハックです。
今回、Mac の純正ブラウザ Safari と Windows の Opera で overflow-y では overflow-y 属性を指定出来きず意図したデザインに出来なかったので、overflow にて別途指定しました。

どうやら overflow-y は IE 独自の属性のようです。 ちなみに Firefox は Mac も Windows も問題なく指定した通り表示されました。

ちなみに意図したデザインとはインラインフレーム（iframe）の変わりに div 要素で同じ見た目にする。でした。

div#hajime {
	width : 200px;
	height : 200px;
	overflow-y : scroll; /* IE独自の属性 */
}

html:first-child div#hajime { /* SafariとOpera用 */
	width : 200px;
	height : 200px;
	overflow : scroll;
}

■結論
Firefox はえらい！ルーールルルルルル♪

■追記（07/05/19）
Netscape（ネットスケープ）を完全に忘れてしまっていました・・・ 結局 IE 独自の属性 overflow-y は使わない事に。

■さらに追記（07/05/21）

overflow : auto;

で、全てが丸く収まりました。

CSSハック一覧表作りました。

覚え書きです。

Mac の純正ブラウザ Safari 用の CSS ハックです。なるべく IE6 用の CSS ハックを利用して制作を心がけているのですが Safari のみに適用させる CSS ハックを見つけたのでφ(・ω・ )かきかき

html[xmlns*=""] body:last-child div.hajime { /*Safari用のハック*/
	font-weight : normal;
}

●課題
CSS ハックにおんぶにだっこで大丈夫？

CSS ハック一覧表を作りました。

hajime001-green と hajime002-pink のブログテンプレートで、斜体（ I タグ）と太字（ B タグ）が効かない不具合が発生。

■原因

ブラウザの初期化の為 CSS 内の一番上でユニバーサルセレクタ（＊…アスタリスク）を使い font-style と font-weight 属性に normal を指定していた。
※ユニバーサルセレクタ（全称セレクタ）とは、すべての要素を適用対象とするためのセレクタ。

■解決方法

ユニバーサルセレクタの font-style と font-weight 属性を削除し、margin と padding 属性の指定だけを初期化。

■備考

原因を探っている最中 Mac の Safari では I タグ（斜体）は効かない事を知る。

＊ Iknun さん、ご報告ありがとうございました！＊