CSS

前回のエントリーに書こうと思っていたら忘れていました。

CSSのお話。

今回アルファPNGを利用していることは前回のエントリーにもありますが、
ここでエントリーしているようにブラウザによって色が少し変わってしまうので、IE7、IE6、Safariとそれぞれが違う画像を利用するようにハックを利用しています。
IE7とSafariではブラウザで表示されたときに制作時のカラーより若干濃く表示されるので、想定しているカラーとの誤差分明るめのカラーのpngを用意し、IE6ではGIFを用意して利用しています。

IE7のみに反映させるCSSハックは下記のように記述します。

*+html body #contents {
	color: #FF0000;
}

Safariのみの場合は下記。

html:\66irst-child #contents{
	color: #00FF00;
}

CSS Validatorでも問題ないようです。

Web Designing 2007年2月号

久しぶりにWEB系の雑誌を買いました。

CSSセッティングベストチョイスという特集があり、主にCSSハックの歴史から現在のCSSハックの主流、主要なレイアウトのCSS設定まで掲載されています。

CSS初心者にはよい記事ではないでしょうか。

自分も間違いなく初心者で最近ではほとんどCSSレイアウトしかやっていないのですが、
どうも自分流のスタイルが確立できていなくて、迷走しているのを感じています。

この雑誌には現在のCSSハックの主流みたいなのが掲載されていますが、
個人的にはそういうものにとらわれないで、自分流のCSSレイアウトを確立したいと思っています。

IE7のCSS

正式版完全対応! Internet Explorer 7 CSS攻略法

このコンテンツでかなり細かくIE7のCSSに関して特集されています。

IE7から対応になったものやIE6との互換性を維持するための方法、
CSSハックなども。

IE7は今月にはVistaも発売になるし、今年中にはWindowsUpdateでの自動インストも
されるだろうから、それなりに普及も早いのかもしれません。

制作側としても早くIE6など気にしないで制作したいものです。

カテゴリーとアーカイブの折りたたみ

先週末からカテゴリの整理のためFlashカテゴリを追加し、
それに伴い関連コンテンツをサブカテゴリー化するのに折りたたみできるようにしたいということで
いろいろと弄っていたため一部、微妙に表示がおかしかったわけですが、なんとか完了しました。

ついでに、あまりデザイン的に美しくないSELECTタグを利用していた月別アーカイブもカテゴリー同様に変更。
SELECTタグによる表示は機能的にはいいものだと思うのですが・・・

利用したものはブログカスタマイズでおなじみ小粋空間様のスクリプトです。

デザインにかなり迷ったんですが、結局現在の形に。

絶対に実現したかったのが、折りたたみのリンクとなるポインタのhover処理で最初のころはJavascriptファイルを改造していたりしましたが、結局テンプレート側とCSSで処理しました。

小粋空間様の解説通りだと、サブカテゴリに属するものにポインターが付かないので、
（ここの場合リスト表示のポインタ消しているので）
ポインターが表示されるようにテンプレートを修正。

折りたたみ用のポインタはJavascriptのほうでIMGが指定できるので、完全に透明な画像を指定し、
オープンとクローズ時に異なるclassを指定、hover時の画像入れ替えはCSSで背景画像を移動させるお馴染みのテクニックを利用しました。

CSSでボックス要素を垂直方向に中央寄せ

CSSでのレイアウトで壁になるもののひとつではないでしょうか。
水平方向中央寄せは、margin-leftとmargin-rightをautoにして中央寄せ要素のwidthを指定してやれば実現できるので、垂直方向もmargin-topとmargin-bottomをautoにしちゃえばできそうなものですが、
それができないという謎な仕様のせいで非常に難しいのですが、その方法がphpspot開発日誌さんのほうで紹介されております。

方法に関してはそちらを見ていただくとして、ポイントはfloatでしょうか。
これ指定しないとFirefox2.0で崩れます。

これはかなりいい感じの方法だと思います。
ただし、中央寄せしたい要素のheightが固定でないと完全な中央寄せはできないので、テーブルのセルを利用したものよりは柔軟性にかけるといったところでしょうか。