デスクトップとノートで画像の見え方が違うことはありますか？

Question

毎々お世話になります。
「天然水とオリーブオイルTAKAKUMA」と申します。
さて、Yahoo のページ編集で、



ーーー文章ーーー
と記入しましたが、デスクトップで確認したところ、背景画像の中に丁度文章が収まっていたのですが、ノートで見てみると文章が画像に収まり切れず、その下の画像にまではみ出しておりました。
仕方なく、背景画像のサイズ（高さ）を長くしましたが、今度はデスクトップでみますと、文章の後に空白ができて冗長な感じとなってしまいます。
何か対処法がございますでしょうか？
宜しくお願い致します。

Answer

ECマスターズの田中です。

最初に、いただいたHTMLタグの中に
正しくない記述がございましたので、
hright
を
height
に修正してください。

なお、
style="hiragino mincho pro"
の部分は
style="font-family: 'Hiragino Mincho Pro';"
のように、フォントとして「ヒラギノ明朝 Pro W3」を
設定されようとしたのかと思いますが、
「ヒラギノ明朝 Pro W3」が標準搭載されているのはMacだけですので、
搭載されていないデバイス（Windows搭載マシンなど）で閲覧した場合、
初期設定のフォントが使われることをお含みおきください。

以上を修正しても状況が変わらない場合ですが、
同じOS、同じブラウザを利用していても、
画面の解像度の違いなどで、
文字の送り方などに差がでる可能性はございます。

いただいたタグだけでは正確なご案内が難しいので、
差し支えなければ、
実際のページに設置していただき、
表示を確認できるURLをお知らせいただけますでしょうか。
フォーラムにてURLを記載しづらい場合は、
お問い合わせ窓口よりお知らせください。

また、デスクトップおよびノート、
それぞれの環境についての情報が必要ですので、

デスクトップ・ノート、それぞれのブラウザで、
以下のページにある
「Find Out Now!」をクリックしていただき、
「Share Your Browser Info」に表示されたURLを
ご教示いただきますようお願いいたします。
https://aboutmybrowser.com/?nr

Answer

ECマスターズの田中です。

大変お待たせいたしました。
また、各状況についてご連絡いただき、
ありがとうございました。

デスクトップではWindows上のInternetExplorerを、
ノートではMac上のChromeを、
それぞれご利用いただいているということですね。

WindowsとMacでは、搭載されているフォントが
全く異なりますので、
Webページの表示にも、それぞれ異なるフォントが使われます。

基本的に、何も指定していない状態ですと、
Windows上のInternetExplorerでは「MS Pゴシック」が、
Mac上のChromeでは「ヒラギノ角ゴ ProN W3」が、
それぞれ使われます。

フォントが異なると、文字の大きさや間隔も異なるため、
同じ場所に同じ文章を書いても
収まらなかったり、逆に大きな余白が生まれる、
という事態が発生いたします。

違う機種の間で同一のフォントを使うのも難しいですし、
フォントが使えたとしても、
その他の要素（行間の作り方や文字の間隔の作り方など）が
絡みあって、完全に見た目を統一するのは非常に難しいです。

いただいたページの該当部分は現在、
「position:absolute;」を利用して、
どんな機種でも同一サイズの領域で表示されることを
想定した作りになっておりますので、

この仕組みの中で出来る限り機種ごとの崩れを抑えたい場合は、
スタイルシートを利用して、
文字の大きさ（font-size）や行の高さ（line-height）などを
px単位で指定する、といった方法がございますが、

出来る限り、
文字の大きさが機種ごとに変わることを
想定した作りにご変更いただくことをオススメします。

たとえば、背景画像（imgrc0069785079.jpg）より
題名の部分を単独の画像としてご用意・ご設置いただき、
残りの背景部分を、文章が含まれるタグ全体の背景として
ご設定いただく、といった方法が考えられます。