javascriptに関連してのCSS (pt=1.33px)
■何かずれる画像。
横縦100px×200px の画像を張り付けてcssで位置を設定するとき、なぜかずれる場合がある。なんでだろうと思いながら、cssの設定やらhtmlの設定やらをいろいろと変えて表示させてみると、cssでサイズ設定した場合htmlよりも大きくなっていた。
htmlのサンプルコードが下。png画像は色をつけた長方形で、idから、a1（200px×200px, 黄緑）、a2（100px×200px, ピンク）、a3（100px×200px, 橙）、a4（30px×30px, 青）としている。a3だけ幅を設定。
<html>
<head>
<meta charset="utf-8">
<title>sample006</title>
<link href="sample006.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
<img src="./sample006_01.png" id="a1">
<img src="./sample006_02.png" id="a2">
<img src="./sample006_03.png" id="a3" width="100pt">
<img src="./sample006_04.png" id="a4">
</div>
</body>
</html>css（sample006.css）の設定は下。a1やa2の幅をここで設定。
#a1{
width:100pt;
position: absolute;
top: 0pt;
left: 0pt;
}
#a2{
width: 100pt;
position: absolute;
top: 0pt;
left: 100pt;
}
#a3{
// width: 100pt;
position: absolute;
top: 0pt;
left:200pt;
}
#a4{
position: absolute;
top:100pt;
left:100pt;
}htmlを表示した結果が下。absoluteで位置を指定している。a1の黄緑のものが左から0ptで始まり100pt分、その隣のa2ピンクが100ptから100pt分（200ptまで）、さらにその隣のa3が200ptから100pt（?）分。だけど、明らかにa3の橙は小さくなっている。
Chromeのデベロッパーツールからサイズ確認するとピンクが133.32×266.66、橙が100×200となっている。単位はpxとなっていた。1pt = 1.33px とのことなので、cssでの100pt設定で133になるのは設定どおり。
htmlの幅設定を200ptに変えると大きくなるので設定は効いているとは思うけど、100ptでなく100pxとなっているよう。
ちなみに上のcssでa3のコメントアウトを外すと下のようになる。
この辺のpt, px設定を気を付ければ画像がずれるところも解消しそう。
