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デザイナは一度同ドキュメントを検討してみてほしい。

    関連記事

    関連サイト

    関連したタグ

    新着記事

    特設サイトの情報

      求人情報

      人気記事

      一覧

      イチオシ記事

      新着記事

      特別企画

      転職ノウハウ

      あなたの仕事適性診断

      4つの診断で、自分の適性を見つめなおそう!

      Heroes File ~挑戦者たち~

      働くこと・挑戦し続けることへの思いを綴ったインタビュー

      はじめての転職診断

      あなたにピッタリのアドバイスを読むことができます。

      転職Q&A

      転職に必要な情報が収集できます

      スカウト転職する

      企業からアプローチのメッセージが届きます。

      マイナビニュースマガジン