同じパーツを使っているのに1pxずれる時の対処法
共通パーツとして作成した「フッター」が、表示するページによって1pxくらい微妙にずれる問題が発生。
「フッター」のコードは全く同じ。
「W3Cのバリデータ」をかけてHTMLファイル全体に文法エラーがないことも確認済み。
Chromeの検証ツールで確認するとコンテンツ内の文字サイズを変更するたびに1pxの上下が発生していた。この現象は「フッター」以外の文字サイズを変更しても「フッター」内の線や文字が1px上下に動く。
解決法
要素の高さに端数(px値換算で小数点以下の数値)がでないよう調整する。
今回のケースでは「line-height」を「1」にすると解決した。
対象要素自体に「line-height」の指定がなくても先祖要素から「1」以外の値を継承していることもあるのでChromeの検証ツールで確認する。
例)body要素に「line-height: 1.6;」が定義されていて継承している
いろいろな値を試した結果、行間に端数(px値換算で小数点以下の数値)がでるような値を指定すると、他のパーツとの兼ね合いで1pxずれることが確認できた。
また、table関係の要素に行間を指定すると1pxずれが発生しやすいことを確認した。
この現象は「行間」以外の「余白」や「文字サイズ」をpx単位以外で指定した時にも発生すると思われる。
要素の高さをすべて整数値にすべく、全部のパーツの行間を「1」にする。というのは暴論だと思うので「端数がでにくい行間指定(小数点第1位までにする等)を心がける」、「多少のずれは許容してもらう」あたりが、最善策かと思う。
「Sassを使用してround関数で整数値に丸める」が使えるかと思ったが、ブラウザが最終的にpx値換算にした時、整数にならなければいけないので厳しいと思う。
思うこと
今回作成したサイトではResetCSS「destyle.css」を使用していた。「destyle.css」はhtml要素に対して「line-height: 1.15;」が定義されており、この行間が各要素に継承されている。
/* Document */
/* ============================================ */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
* 3. Remove gray overlay on links for iOS.
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
-webkit-tap-highlight-color: transparent; /* 3*/
}
今回はフッターパーツ内の行間を「1」にするとズレがなくなり解決したが、読みやすい行間の値を捨てて1pxを合わせに行くのも違う気がする。
ページコーディングする際、スマホやタブレット、PCに合わせたデザイン、そして動きをつけて・・・動画を入れて・・・とコーダーの負担が日に日に増している今、情報が正確に伝われば1pxくらいのズレは許容してもよいのではないかと思う。
特に今回は「フッター」のズレなので。
そう思う反面、同じパーツなのにページ遷移で表示がズレると気持ち悪いと感じてしまう。
以前はピクセルパーフェクトが当たり前のように求められていたので、その時に叩き込まれた違和感がどうしても残ってしまうのかも。