記事公開日

1pxのズレを強引に修正するCSS

お客さん

1pxだけデザインがズレるの!

CSSを何度修正しても直らない。

納期がないから、なにか応急処置とかないの?!?

隊員1号

了解です!

おそらくPosotionあたりが悪さしているのだとは思いますが、複雑な構造になっていると原因を探すのも大変です。

「transform」を使って強引に修正してしまいましょう。

要素が1pxズレているデザインの再現
body {
	background:#eee;
}

#box {
	width:320px;
	background:blue;
	height:5em;
	transform:translateX(-1px) translateY(-1px);
}
<html>
<body>

	<header></header>
	<div id="box"></div>
	
</body>
</html>

「transform」は、要素を変化させるプロパティです。

画像を移動させたり、拡大縮小する際に用いられますが、divなどのブロック要素にも適用することが可能です。

この記事のURLをコピー

メールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

関連情報

運営者プロフィール
運営者のプロフィール画像
隊員1号

IT系フリーランスとして10年の経験を持つレスキュー隊。HTML・CSS・JS・PHPなど幅広いスキルを持つ。

詳しいプロフィール