1ピクセルのずれも許せないWebデザイナのためにResetting Again
2008/02/08
CSSがWebページデザインの主要技術になってから、WebデザイナはCSSの振る舞いに頭を抱えなかったことはない。もっとも悩ましいのは、同じCSSでもWebブラウザごとに表示が異なるところにある。なるべく同じ表示を実現しようと、一見すると奇っ怪にみえる設定を加えたり、意味がないような行を加えたり、背景色と同じ色の画像を調整用に追加したり、涙ぐましい努力は後を断たない。
世界中のWebデザイナやフロントエンドデベロッパが同じ悩みを抱えているから、Webブラウザ間の互換性を実現するCSSライブラリがいくつも登場したり、ベストプラクティスをまとめたCSSリファレンスドキュメントが登場したり、CSS擬似クラスといったテクニックが紹介されたり、IEのCSS/HTML非準拠に対処するライブラリが登場するといったことが相次いで起こっているわけだ。
しかし、ほかのライブラリに依存せずにいちから自力でCSSを書いていきたいWebデザイナにとって、こうしたライブラリはあまり役に立たないかもしれない。そうしたデザイナはEric Meyer氏が紹介しているReset Reloadedを紹介したい。同ドキュメントは2007年5月1日(米国時間)に公開されたものだが、半年を経て調整されたものがResetting Againで公開されているので、使う場合はこっちを参考にするといいだろう。
Eric Meyer氏は同ドキュメントにおいて、CSSで指定する値の一斉初期化を提案している。1ピクセルたりともデザインがずれることが我慢ならないWebデザイナにとっては、まず出発点としてCSSで指定する値の初期値を揃えてベースラインを整えることが大切というわけだ。初期値を揃えてしまえば、揃った分だけブラウザごとの奇っ怪なCSS設定を減らせる。
同氏が掲載している初期化のCSSコードは単純明解だ。どうしてこのように初期化しているか、またはなぜ初期化していない部分があるのかも同ドキュメントに説明がまとまっている。Webデザイナは一度同ドキュメントを検討してみてほしい。
関連記事
- CSS擬似クラスを使うべき理由[2008/2/6]
- これは便利! CSSのコピペはこのコンテンツで - SitePoint CSS Reference[2008/2/1]
- IE7.js登場 - IEのCSS/HTML非準拠はこれで対応[2008/1/8]
関連サイト
この記事を読んだ人は以下の記事も読んでいます
ヘッドライン
- 【レポート】暗号2010年問題に向け「いつまでに何をすべきか」 - ベリサインが説明[08:00 2/10]セキュリティ
- ルネサス、RXファミリ第3弾としてモータ制御向け「RX62T」を製品化[07:00 2/10]エレクトロニクス
- Rambus、次世代携帯機器向けメモリ「モバイルXDR」を発表[21:16 2/9]エレクトロニクス
- Intel、基幹業務システム向け次世代プロセッサ「Itanium 9300」を発表[20:47 2/9]エレクトロニクス
- MicronとNanya、42nmプロセスを採用した2GビットDDR3を開発[20:07 2/9]エレクトロニクス
- ISSCC 2010 - 日立、1Gbpsあたり消費電力1mW以下のトランシーバ回路を開発[19:52 2/9]エレクトロニクス
- CSSを最適化する3つのツール[17:17 2/9]JavaScript / CSS / HTML
- TIOBEプログラミング言語人気 - Scratch/Erlang/Scala/JavaFX[17:17 2/9]プログラミング
- Microsoft、Red Hat Linuxサポートをひっそり追加[17:15 2/9]システム管理
- IBM、8コア/32MB eDRAM搭載の高速CPU「POWER7」を発表 - サーバも販売開始[17:02 2/9]サーバとストレージ





