課題

方眼紙のような背景を画像で実装していたが、実機で拡大すると下記の通り途切れたように見える部分がある。

原因

ピクセルのズレと丸め誤差
スマホの画面に合わせたり、ピンチアウトで拡大したりすると、ブラウザは画像を再計算して描画する。その際、「この1ピクセルの線は、画面上のどのピクセルに表示すべきか？」を計算するが、小数点以下のズレ（例えば「1.5ピクセル目に描画する」など）が発生すると、ブラウザがうまく色を表現できず、線が薄くなったり完全に消えたりしてしまう。
スマホ特有の「高解像度（Retina）ディスプレイ」
最近のスマホは、論理的なサイズ（CSS上のサイズ）に対して、物理的な画面のピクセルが2倍や3倍（デバイスピクセル比）ある。そのため、等倍の画像（1倍）をそのまま背景に敷くと、スマホ側で無理やり引き伸ばしたり縮めたりする補間処理が入り、細い線は特にその影響が大きく出てしまう。

解決策

背景画像を使わずCSSで作る！

.background {
  background-size: 50px 50px; /* マスの大きさ */
  background-image:
    linear-gradient(to right, #e0dcd3 1px, transparent 1px),
    linear-gradient(to bottom, #e0dcd3 1px, transparent 1px);
  background-color: #f7f5ef; /* ベースの背景色 */
}

linear-gradientは通常グラデーションを作るものだが、下記のように同じ位置（1px)の時点で次の色を指定することで、ブラウザが「ぼかす隙間がない！」と判断して、くっきりとした境界線を作ってくれる。

 background-image:
    linear-gradient(to right, #e0dcd3 1px, transparent 1px),
    linear-gradient(to bottom, #e0dcd3 1px, transparent 1px);

余談

illustratorで線の色を抽出しようとしたところ、通常色のみ表示される赤枠のところがマス目になってしまうという別の問題が発生した。

初期設定だと「画面上のピクセルの色」ではなく、「オブジェクトが持っている属性（塗り、線、パターンなどの設定）」を丸ごと吸い取ってしまう性質があるようで、Shiftを押しながらクリックすることで色のみを無事抽出することに成功！

弊社ウェブサイトでは、技術記事の他にもデザインナレッジや日々の気づき等を配信しています。
https://www.jbgoode.jp/

カジュアル面談も実施中です。お気軽にお問い合わせください。
https://www.jbgoode.jp/recruit/