SKILL MEMO: 2008年8月アーカイブ

WEB制作においてHTML+CSSのコーディングを行いますが、IEの場合、背景に画像を配置する際に1ピクセルずれる、という問題があります。

たかが1ピクセルですが、その場所によっては致命的なデザインの崩れになることもあり得ます。

CSSハックはあまり使いたくないという基本姿勢もありますので、普及率の圧倒的に多いIEに合わせて作り、Mozilla FirefoxやSafariについては我慢していた部分もありましたが、やはり許せずにCSSハックを使用している今日この頃です。

こんな感じに。

----------------------------------------

/* ズレ修正IE6以下 */
* html body {
padding-left: 1px;
}

/* ズレ修正IE7 */
*+html body {
padding-left: 1px;
}

----------------------------------------

エラスティックレイアウトとはレイアウトを決める際に、ピクセルやパーセントで幅・高さを指定するのではなく、『em』値で指定する方法です。

最も有名な例としてはYahoo! JAPANがあげられます。
文字サイズを変更（大きく）していただければイッパツでご理解いただけると思います。

リキッドレイアウトとも含めアジャスタブルレイアウトなどとも呼ばれる様です。