PCの違いによるレイアウトのズレの調整について

Question

いつもお世話になっております。

表題の件につきましてアドバイス頂きたく質問させて頂きました。

今LPを作成中なのですが、私のPCと他の人のPCでは表示のされ方に微妙な違いが出ます。
それ自体はあり得る事と認識しています。

例えば、Pタグの横幅を70pxにした場合、
私のPCでは「あいうえお」が一行で表示できるけど、他の人のPCでは「お」の部分が改行されてしまうなど。

どのPCで見ても一行で表示されるよう、横幅を微調整するという対応をしているのですが、

私のPCでちょうどいい表示は、他の人のPCでちょっと不自然。
他の人のPCでちょうどいい表示は、私のPCでちょっと不自然。

ということが起こりまして、、、
これはある程度はしょうがないことなのでしょうか？
皆さんはどのように対応しているのでしょうか？

コーディング初心者の為、PCの違いによるズレがあった場合は、微調整するという対応が普通なのか、
それとももっといい方法があるのか、教えて欲しいです。

宜しくお願い致します。

Answer 1

私のPCでは「あいうえお」が一行で表示できるけど、他の人のPCでは「お」の部分が改行されてしまうなど。

デバイスが違えばそういうことが普通に起こるのがWWWだと受け入れるしかないでしょう。想定外の改行が起こりにくくするコーディング上の小技は考えられないことはないですが、どれも万能ではありません。

あるマシンの上で100点満点の見栄えを追求するというアプローチが間違っています。現実的にできるのは「たいていのマシンで90点の見栄えで表示される」あるいは「レイアウトが多少ぶれても読者に誤解を与えることのない」コンテンツを目指すことではないでしょうか。

少しのレイアウトのブレも許容できないのであれば、HTMLベースではなくPDFを公開するか、あるいは画像化するほかありません。じっさいタイトル部分を画像で処理しているサイトは少なくないですね。

Comments

[kato00]

ありがとうございます！
コーディングする上での考え方も教えて頂きとても為になりました！

Answer 2

フォントはOSとユーザ設定とフォントの種類とブラウザによって違いが出ます。同じフォント名でもOS毎に扱いが変わることもあるし、同じフォント＆同じOSでもブラウザによって表示結果が違うこともあります。
フォントの種類による差異については、Webフォントを使えば多くのデバイスで対応できますが、自動改行の位置を確実にそろえるのは難しいと思います。

画面幅はデバイスによって大きく違います。PCでは多くの種類がある上、ウィンドウサイズはユーザーがコントロールしています。スマートデバイスもある程度の偏りはありますが、やはり多くの種類が在ります。

なので、「どの画面幅でも、だいたい問題ないように組む」とか「確実に対応しないといけないデバイスごとに緻密に設計する」とか、Webサイトの特性に合わせた方法を採ればよいと思います。
仕事で作る場合はどこまで対応するかの取り決めをした上で、サイト作成時に各デバイス／OS＆各ブラウザでのチェックを行います。その際 改行位置について、どうしても固定したい場合は画像化することもあります。

Comments

[kato00]

ありがとうございます！どこまでの対応をするか、最初に取り決めたほうがよさそうですね！