Learning site for website creation

同じパーツを使っているのに1pxずれる時の対処法

公開日:2022年06月24日 更新日:2022年06月24日

共通パーツとして作成した「フッター」が、表示するページによって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くらいのズレは許容してもよいのではないかと思う。

特に今回は「フッター」のズレなので。

そう思う反面、同じパーツなのにページ遷移で表示がズレると気持ち悪いと感じてしまう。

以前はピクセルパーフェクトが当たり前のように求められていたので、その時に叩き込まれた違和感がどうしても残ってしまうのかも。