Webデザインを勉強している、超ド素人です。
質問に分かりにくいところがあるかもしれませんが、ご教示いただけますと幸いです。
お伺いしたいのは、XDで設定した幅と実際のコーディングする際の幅の違いについてです。
当方、デザインカンプをXDで作成し、コーディングはVSCodeで使用しています。
テキストエリア幅（px）を、コーディングの際にWidth指定したいのですが、XDで設定した幅で指定すると文字の折り返し位置がXDとブラウザで異なるはなぜでしょう。
例えばXDでは幅270pxで良い感じで文字が折り返され全部で3行ほどのテキストエリアなのですが、コーディングでwidth:270pxとすると、XDの時より前の文字で折り返されてしまい全部で4行ほどのテキストエリアになってしまいます。結局、コーディングの際はXDの幅に＋10pxで設定するとカンプ通りのテキストエリアになります。ちなみに使用ブラウザはChromeです。
よろしくお願いします。
、
11 件の回答
わたしも最近XD使い始めたので気になります
気にすんな。WinかMacか知らんが、Webフォントでない限り別のOSだと文字組みのフローは変わる。そういう細かい調整はムダだ。
こういうのはデヴァイスごとに全然見え方が変わってしまうので自分の環境で完璧にしても何の意味もない。気にしないことが一番。どんなデヴァイスで見ても大きく崩れなければオッケー。
Re:4
これですね。どんなデバイスで見ても大きく崩れない想定をするのが重要
フォントのレンダリングの手法が違ったりするから、どうしようもないよ
WindowsだけでもDirectWriteとGraphic Device Interfaceがあったり、ブラウザ独自のアンチエイリアスかけてたりで多少カーニングが違ったりするのは当たり前の前提でデザインすべき
WebフォントだろうがWin/Mac共通の游ゴシックでも違いは出る
Re:6
ご親切に回答いただきありがとうございます。
レンダリング手法の違い、ブラウザ独自のアンチエイリアス…様々な要因があるんですね。
大変勉強になりました。
これらを念頭においてデザインをするよう心がけます。ありがとうございます。
Re:4
ご親切に回答いただきありがとうございます。
「自分の環境で完璧にしても何の意味もない」、おっしゃる通りですね。
多種多様なデバイスがあることをわかっていつつも、つい目の前の自身のデバイスを意識してデザインしてしまっていました。
気にしすぎず、しかし、どんなデバイスでも崩れないデザインを心掛けます。
Re:3
ご親切に回答いただきありがとうございます。
他の方からも「気にしない」というお言葉をいただき、そういったモノなのだなと思えるようになりました。OSごと、また、デバイスごとの特性があるとは頭で分かっていつつも、つい目の前のモノに意識がいってしまっていました。
以後、気を付けてデザインしていきます。
Re:2
ご親切に回答いただきありがとうございます。
また、同じようなお気持ちの方がいらっしゃり、安心しました。
他の方からの回答にありますように「気にしない」ことが良いようですね。
どんなデバイスでも崩れないデザインを作成できるよう、頑張っていきます。
既に回答は出きってるけど、別の方向の回答も置いておくかな
今回の問題は、なにもテキストに限ったことではなかったりする。
現状のWebデザインにおいて重要なのは、ターゲット端末で崩れていないことであって、デザインカンプを再現することではない。すべてのターゲット端末に完全再現なんてやっていたら、どんなにコストがあっても足りない。それぐらい不毛な世界。紙とWebの違いでもある。
正解はもう出てるみたいなので別の調整方法を…
WEBフォントつかってて、かつサイトの横幅が固定されてるなら、レタースペースを多少狭くしてみては？