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設定を減らせる。

Resetting Again - Eric Meyer氏のサイトより抜粋

Resetting Again - Eric Meyer氏のサイトより抜粋

同氏が掲載している初期化のCSSコードは単純明解だ。どうしてこのように初期化しているか、またはなぜ初期化していない部分があるのかも同ドキュメントに説明がまとまっている。Webデザイナは一度同ドキュメントを検討してみてほしい。



IT製品 "比較/検討" 情報

転職ノウハウ

あなたが本領発揮できる仕事を診断
あなたの仕事適性診断

シゴト性格・弱点が20の質問でサクッと分かる!

「仕事辞めたい……」その理由は?
「仕事辞めたい……」その理由は?

71%の人が仕事を辞めたいと思った経験あり。その理由と対処法は?

3年後の年収どうなる? 年収予報
3年後の年収どうなる? 年収予報

今の年収は適正? 3年後は? あなたの年収をデータに基づき予報します。

激務な職場を辞めたいが、美女が邪魔して辞められない
激務な職場を辞めたいが、美女が邪魔して辞められない

美人上司と可愛い過ぎる後輩に挟まれるエンジニアの悩み

特別企画 PR

人気記事

一覧

イチオシ記事

新着記事

【レポート】【速報】COMPUTEX TAIPEI 2016 - Pepper対抗? ASUSが599ドルからの家庭用ロボット「Zenbo」発表
[17:34 5/30] パソコン
瀧本美織、共演した勝地涼から「相手に訴えかけるお芝居をされる方」と絶賛
[17:30 5/30] エンタメ
EXILE岩田剛典、理想の結婚式はライブ式「お嫁さんも一緒に踊ってくれたら」
[17:30 5/30] エンタメ
ついに国宝が「フチ子さん」をオマージュ!? 奇譚クラブ「鳥獣戯画」立体化
[17:30 5/30] ホビー
タイガー、「どこから見ても美しい」デザインの圧力IH炊飯ジャー
[17:14 5/30] 家電

特別企画 PR

求人情報