先日、ドロップシャドウの処理をした透過の PNG 画像を使い、自分が全然モテない現実を忘れつつクリスマス・バナーでブログのデコレーションを楽しんでいました。

「これで良し♪」なんてモニターに向かってつぶやき、自己満足に浸りながら IE6 で確認してみると透過部分が灰色になっているではないですか・・・（涙）

気が狂ったような大慌てぶりで IE7 でも確認してみると、そちらでは奇麗に表示されている。他のモダンブラウザもキレイ☆に表示。

なんとか落ち着きと人間らしさを取り戻し、毎度の通りネット検索してみると IE6 ではアルファチャンネルについてはデフォルトでは非対応とのこと。つまり、半透明とか言われても IE6 にしてみれば「え！？けっきょく何色！」と言った感じらしい。

知ってか知らずか普段 JPG か GIF 画像しか使ってこなかった私。IE6 には泣かされっぱなしの私。仕方ないので、透過 GIF でドロップシャドウ無し（半透明な部分の無いドット絵）の画像を IE6 の為に用意し、CSS ハックで振り分けそれぞれを表示させる。

どうにか様になったようなので一安心。

しかし何か腑に落ちない。
どこかで誰かが呼んでるような気がする・・・

ブログの最上部に透過 PNG のクリスマス・バナーを表示させたいと思いついたのは、人様のブログで透過 PNG とスクリプトを使用したアップデート・バナーを拝見しての事。きっと私の知らない何かがあるような気がし、検索ワードを変えて再検索。

ここ迄読みガッカリ気味のあなた、上記した非対応の前にあるデフォルトではに注目してください。

そうです！ちゃ〜んと内緒のやり方がありました♪

前置きが少し長くなりましたが「透過 PNG を IE6 でも奇麗に表示」する方法をご紹介。

続きを読む ≫

皆さんは CSS の position プロパティを使いこなせていますか？

私はお恥ずかしながら relative （相対指定）はたまにレイアウトの微調整で使用することはあっても、今回のテーマである absolute （絶対指定）を使いこなせずにいました。理由もしっかりあり、ブラウザのウィンドウの左上から指定することにメリットを感じていなかったからなんですが・・・

しかし、今回の記事は position プロパティの特に absolute を使いこなすための基礎知識です。

「えぇぇ！！そんなことも知らなかったの！？」と思われてしまうような内容かも知れませんが、知らなかったと言うか知ろうとしなかったと言うか・・・・包み隠さず言うならまったく知りませんでした。

XHTML と CSS の書籍を久しぶりに読み返し、目から鱗と言えるような基礎知識でした。上の文章を読み『俺も absolute 使ってないぞ・・・』なんて方は憶えておいて損の無い基礎知識です。よくも知らずに今迄頑張ってきたと、ある意味自分を褒めたくなるくらい CSS でのレイアウトの考え方が楽になりました。

続きを読む ≫

前回のエントリではCSSハックの一覧表を掲載しました。しかし CSS ハックを使うと一抹の不安が残る方も多いのではないでしょうか？

今回はそんな方達に CSS ハックとサヨナラしてもらう為の方法をご紹介します。

また、一抹の不安など何も無し！ハックとは親友だ！なんてトム・ソーヤみたいな方も、更にハックと仲良くなれるチャンスです。これからはハックとハイタッチの毎日です。

・・・と、かなり大風呂敷をひろげてしまいましたが、私もこれから実践しようと思っている方法のご紹介です。

続きを読む ≫

CSS で横のセンタリング（中央揃え）は margin : auto や text-align : center などで事足りると思うのですが、縦のセンタリング（中央揃え）は何を使えば良いかご存知ですか？

私はつい先日まで知らなかったのですが line-height プロパティで縦のセンタリングが可能です。方法はとても簡単で、ボックスの高さと line-height の値を同じにするだけで縦のセンタリングが行われます。下のソースを参考にしてください。

div.hajime {
	width : 400px;
	height : 50px;/*ボックスの高さ*/
	line-height : 50px;/*縦のセンタリングの為に指定*/
}

簡単な上、Macのモダンブラウザ、Winのモダンブラウザで縦のセンタリングが適用されます。

個人的には何故か素通りしていた部分だったのですが、少し調べたらあっさり解決してしまった事例です。少しの手間を面倒臭がってソースを複雑にしていた事に反省です…。

■追記（ 2008/08/09 ）
通りすがりさんから貴重なご意見頂きました。上記の方法はテキストが複数行になると勘の良い人は察しがつくかも知れませんが、行間が大変広くなります。つまり１行のテキストの時にのみ有効な方法です。ちなみに line-height は文字送りを指定するプロパティなので、インライン要素にのみ適用されるプロパティです。

そこで「良い方法はね〜か〜」とわりと大きめの声でつぶやきながらネットを検索したところ、参考になりそうな掲示板を発見しました。少し古い書き込みですが、CSS の知識が豊富な方が解決策と思えるような書き込みをされています。興味がある方は覗いてみて下さい。

いつだったか書籍でこの縦のセンタリングについて読んだように思うので良い方法がありましたらご紹介します。夢の中の本屋さんでしたらごめんなさい。

Windows の IE 用の CSS ハックで簡単なものを発見！その名はアンダースコア・ハックです。下のソースの赤い部分がアンダースコア・ハックです。

.sample {
	width : 300px;/*その他ブラウザ用*/
	_width : 320px;/*IE用*/
	padding : 20px;
}

プロパティの前に _ を足すだけなので簡単ですが、その他のブラウザ用と IE 用のプロパティの順番が前後してしまうとハックが適用されないので、そこだけ注意が必要です。
つまり、まず普通のブラウザ用のプロパティを記述し、次に IE だけが解釈するアンダースコア・ハックを使いプロパティを記述します。

ちなみにアンダースコア・ハックはW3CでCSSの検証をするとエラーになります。
また、IE7 では使えません。と言うかエラーなので使えないのが当たり前のようです。IE7 で改善された部分と言うことです。

冒頭で「発見！」とか大騒ぎしていますが、とても有名なハックです。私が最近知っただけですので温かい目でお願いします。

CSS ハックが幾つか溜まってきたので、そのうちCSSハック一覧表でも作ろ。