イラストレーターのデザインからコーディングしてもデザイン通りにならない

Question

HP作成初心者です。

今イラストレーターのデザインからコーディングをしているのですが、
イラストレーターの寸法通りにコーディングしても、イラストレーターのデザイン通りになりません。

下記、margin-topを使ったレイアウトですが、
photoshopで縦線を引いた箇所が約35pxなので35pxでコーディングをすると、幅が違くなります。

画像では少し分かりにくいかもしれませんが、ここだけではなく、
文字もイラストレーター通りに作ると大きさが違うのですが、こういったことはあるのでしょうか？

イラストレーターの寸法通りだと全てが大きくなってしまいます。

ちなみに、ブラウザの画面表示は100%なのですが、これを80%位にするとイラストレーターのデザインと同じになります。

その他必要事項あれば追記します。

よろしくお願いします。

Comments

[m.ts10806]

illustratorはRGBですか？CMYKですか？

Answer 1

1つは、line-heightの影響があると思います。

line-heightは「行の高さ」ですがこれは文字の高さ + 上下の行との余白です。
Adobe製品は「上下の行との余白」が考慮されないので、コーディング時に誤差が生じます。

---

(試しにline-height: 1;を指定してみて、デザインラフと同じようになるのであれば、以下を試してみてください)

実際の解決としては、例えば
line-height: 1.5;の場合はmargin-top: calc(35px - 0.5em);を指定したり、
line-height: 1em + 10pxの場合はmargin-top: calc(35px - 10px);を指定したり
する必要があると思います。

Comments

[kato00]

なるほど！
それが影響していると思います！
ありがとうございました！