• ベストアンサー
  • 困ってます

ウィンドウズとマックのフォントの違いについて

現在、自分のホームページを作っているのですが、 ウィンドウズとマックのフォントの違いに悩んでいます。 ウィンドウズで作っている分には、 レイアウト的には何の問題もないのですが、 作ったホームページをマックで見ると、 マックではブラウザがsafariで、ヒノラギProとかいうフォントを 使用しているため、かなりレイアウトが崩れます。 それでも、何とか両方で見ても対応できるように、 意識して作ってきたのですが、先日、 <textarea>の幅が意図していたよりもかなり広く、 それに伴ってレイアウトが大きく崩れていることに気が付きました。 ウィンドウズではMSPゴシックを使用して作っていますが、 マックで見ると、フォントの大きさをスタイルシートで指定しているのにも 関わらず、かなり大きめに表示されてしまいます。 もともとのフォントが大きいのかもしれませんが、 本当に困っています。 何か良い方法はないものでしょうか? ちなみに、フォントの大きさはスタイルシートで body { font-size:15px; } td{ font-size:15px; } と統一しています。 よろしくお願いします。

共感・応援の気持ちを伝えよう!

  • HTML
  • 回答数11
  • 閲覧数958
  • ありがとう数4

質問者が選んだベストアンサー

  • ベストアンサー
  • 回答No.10
  • olda
  • ベストアンサー率66% (2/3)

textareaの大きさをwidthやheightで固定してみてはどうでしょう。 またline-heightで行間を固定してみるのもいいかもしれません。 <style type="text/css"> <!-- /* body・html・td・textarea・inputに対して */ body, html, td, textarea, input { font-size : 15px; line-height : 18px; /* 行間 */ } /* textareaに対して */ textarea { width : 250px; /* テキストエリアの幅 */ height : 100px; /* テキストエリアの高さ */ } //--> </style>

共感・感謝の気持ちを伝えよう!

質問者からのお礼

ありがとうございます。 今までtextareaはcols=""で指定していて、 widthで指定していませんでした…。 普通にテーブルと同じようにできるんですね。 やってみます。

その他の回答 (10)

  • 回答No.11

こちらのサイトで、どのブラウザーでもフォントが同じ見え方になるよう調整したcssファイルを提供して下さっています。 参考にしてみてはいかがでしょうか。 ページの最下層「font css」からダウンロードできます。

参考URL:
http://www.tom-graphic.com/

共感・感謝の気持ちを伝えよう!

  • 回答No.9
  • pingu98
  • ベストアンサー率62% (17/27)

原因きり訳のため、条件を絞って検証しましょう。 まず、CSSでfont-sizeを指定する場合はそのフォントフェースの文字の高さを指定していることになります。 ですから、15pxと指定すればおそらく15pxの高さになっているはずです。(少なくともWin IE6及びWin firefox104標準モードではフォントに関わらず一致) で、Macに入ってて適用されているのはヒラギノ角ゴ Pro W3とかだと思うのですが、これとMSP ゴシックを比べるとMSP ゴシックの方が幅がコンパクトに収まっているかと思います。 これはフォントフェースの違いによるものです。フォントを同じ高さにしても、幅は各フォントフェイス、各文字によって違うので、文字が沢山続くとその差が顕著になることもあります。 ヒラギノは割と等幅ゴシックに近いので、MSPと比べれば、字間の空白も加わりかなり差が大きくなります。 ですから、本当に15pxを超える大きさで表示されているのかどうか、というところには少し疑問です。 次、safariでテキストエリアの幅が意図していたよりも大きい件ですが、textareaにはCSSで幅指定をしているのでしょうか。CSSやHTMLの属性で何も指定されていない要素のデフォルトスタイルは各ブラウザによって様々なので、ピクセル値などで指定してから検証されるのがよいでしょう。 それと、FirefoxやNetscapeであればMac/Win共に使え、表示にそれ程違いもあまりせんので、これで検証する事も一つの手です。 あと、windowsユーザーで、Mac/safariでの表示が確認しづらいという場合は、web上で確認できるサイトがあるので参考URLに挙げておきます。

参考URL:
http://www.danvine.com/icapture/

共感・感謝の気持ちを伝えよう!

  • 回答No.8
  • 2NN
  • ベストアンサー率40% (143/353)

>#6 さん 申し訳ない。大変失礼しました。。

共感・感謝の気持ちを伝えよう!

  • 回答No.7
  • taseki
  • ベストアンサー率66% (155/233)

では、 font-size:15px; の部分を、 font-family: sans-serif; font-size: 11pt; あるいは font-family: sans-serif; font-size: 15px; にすると、どうでしょうか。

共感・感謝の気持ちを伝えよう!

  • 回答No.6
  • 1050YEN
  • ベストアンサー率69% (477/687)

>MSPが入っていない MSPに固執する意味じゃなく、フォントを指定するという意味合いで書いたつもりなのですが。。。

共感・感謝の気持ちを伝えよう!

  • 回答No.5
  • taseki
  • ベストアンサー率66% (155/233)

私も以前に苦労したことがありますが、 まあ理想を言えば、「フォント種類に依存してはいけません」というところでしょうけど…。 > ウィンドウズではMSPゴシックを使用して作っていますが ウィンドウズだからといってMSPゴシックで表示されるとは限りません。そもそもWebページは、見る人が「自分が見やすいフォント」で見られるよう設定できる、という考えにもとづいています。 もちろんウィンドウズを使っている人はMSPゴシックで見ている人が多いのも事実ですが、あまりそこをアテにしてしまうと、マックに対応できないなどという連鎖的な問題が次々と出てきてしまいます(たとえばウィンドウズでもマックでもない環境だってあるので)。 どうしても指定したいなら、いわゆる Generic-family(serif など)にとどめるのが無難です。 と言っても、それは程度の問題であって、見た目のイメージを重視したいのでフォントも指定したい場合は多いですが、しかしそれにしたって、フォントによってレイアウトが崩れてしまうほど、というのはいかがなものかと…。 というか、正直想像ができないです…。 それと、「font-size:15px;」という書き方ですが、一般的にはフォントサイズはポイント数(font-size:11pt; など)で指定します。 違いは物理長かどうかですが、その環境にあわせて拡大・縮小されます。pxはピクセルで完全にモニタによって固定されますが、両者の相対的な差は環境によって設定されます。 よくポイント指定で変化するのが原因で、意図しない結果になることがありますが、今回のケースでは、もしかしたら逆の結果になっているのかもしれません。 ためしにポイント指定にしたら、どうなるでしょうか。

共感・感謝の気持ちを伝えよう!

質問者からの補足

以前は11ptで指定していました。 それでも改善されなかったので、pxに変えたような気がします(?) が状況は変わっていません。 以前、マックのIEで見ていた時には、それほどレイアウトの差は 感じなかったのですが、safariの設定に何か問題でもあるのでしょうか? ちなみに、デフォルトの設定以外で変えたのは、フォントの部分だけです。 フォント名は変えず、明朝体のようなものをゴシック体に変えました。

  • 回答No.4
  • the845t
  • ベストアンサー率33% (246/743)

sans-serif  ゴシック体系 serif  明朝体系 cursive   筆記体系 fantasy   装飾系 monospace   等幅系 ヒノラギってのがどのフォントに該当するのか分かりませんが、 font-family:~; で指定するとどうでしゅか? 装飾系は普通使いませんねw

共感・感謝の気持ちを伝えよう!

  • 回答No.3
  • 2NN
  • ベストアンサー率40% (143/353)

>#1 さん Macには「MS Pゴシック」が入っていないので、 有効になりませんよ。

共感・感謝の気持ちを伝えよう!

  • 回答No.2
  • 2NN
  • ベストアンサー率40% (143/353)

WinとMacのスタイルシートを別々に分ける方法が一番無難なようです。 http://www5e.biglobe.ne.jp/~access_r/hp/javascript/js_085.html

共感・感謝の気持ちを伝えよう!

質問者からのお礼

なるほどです。 多少、内部のコーディングが複雑になっても、 やはり個々に設定するべきなのかもしれませんね。 ありがとうございます。

  • 回答No.1
  • 1050YEN
  • ベストアンサー率69% (477/687)

フォントは指定してないのですか? font-family:"MS Pゴシック" これを付けてみてだめなら、表示ブラウザでの分岐を行いMAC設定を別に持つのかな? HTML素人ですので、すいません。

共感・感謝の気持ちを伝えよう!

質問者からの補足

早速のご回答、ありがとうございます。 ブラウザの件なのですが、Netscape 7.1と Mozilla Firefoxではウィンドウズでテスト済みです。 やはり、Macのみでレイアウトが崩れる、といった状況です。

関連するQ&A

  • ブラウザによって異なるフォントサイズについて

    ホームページを制作していますが、ブラウザによって文字のサイズが見かけ上違ってしまいます。 具体的には、フォントのサイズが IE8<Safari<Firefox3 になっています。 価格.comなどの有名サイトを見ていると、どのブラウザでも同じサイズに見えます。 スタイルシートに body { font:13px; *font-size:small; *font:x-small; } を書き加えてみましたがあまり変化はありませんでした。 どのようにすればいいのでしょうか?

    • ベストアンサー
    • HTML
  • スタイルシートでフォントの大きさを固定しない方法は?

    スタイルシートでフォントのサイズを決めたいのですが、pxで指定するとアクセシビリティが下がるとおもい、ユーザー側によってフォントの大きさを変更できるようにしたいのですが、可能でしょうか?昔読んだ本では、スタイルシートを使うとフォントの大きさはかえれないというように認識していたのですが、font-size:large みたいなのもあるようなので、どちらが正しいのかとても気になっています。

    • ベストアンサー
    • HTML
  • スタイルシートのフォントファミリーの設定について教えて下さい。

    スタイルシートのフォントファミリーの設定について教えて下さい。 IE6だと、font-size: 10px;が、日本語フォントに効きません。 英語フォントのみ小さくなって、日本語フォントは小さくならないのです。 ちなみに、ソースは、 body { font-family:Comic Sans MS, Verdana, "MS Pゴシック", Helvetica; .sidecontent { ・・・ここの日本語フォントサイズが効かない。 font-size:10px; font-weight:normal; } と記載しています。 わかる方がいたら、ぜひ教えて下さい。

  • マック(Mac)のフォント

    こんばんは。 ホームページを作っているのですが、フォントに関して質問です。 「それはポイント(pt)でフォントを指定した場合、マッキントッシュの方がウィンドウズより大きく表示されてしまう点です。共同研究室(掲示板)でさゆさんに教えていただきましたが、マッキントッシュの方がおよそ1.3倍くらい大きく表示されるそうです。」 ↑ http://agit.s16.xrea.com/log2/11.html より引用。 私も(Windows User です)、「safari でどのように見えるかをスクリーンショットで確認できるサービス」で自分のページを見てみたのですが、safari では、フォントが少し大き目に表示されていました。 1つ目の質問: 上に「マッキントッシュの方がウィンドウズより大きく表示されてしまう」とありますが、safari でだけでしょうか??マックに入れた Firefox や Opera, IE でも、大き目に表示されるのでしょうか?? 2つ目の質問: 上に「ポイント(pt)でフォントを指定した場合」とありますが、他の単位で大きさを指定してやれば、マックでも Windows でも、同じ大きさに表示されるようになりますか??(フォントは pt 以外の単位で指定できましたっけ??) ご回答宜しくお願いします。

  • フォントサイズと行間

    フォントサイズと行間についてご質問します。 フォントサイズ12px。文字上下に3pxのアキをとり行高18pxとする場合、 スタイルシートは下記ようになると思います。 font-size: 12px; line-height: 1.5 フォントサイズが13pxで文字の上下に4pxのアキをとり行高21pxとする場合、line-heightは21/13=1.61538462と計算されます。 font-size: 13px; line-height: 1.61538462 このように小数点以下が多い場合でもスタイルは正常に動作するのでしょうか(ちなみに13pxで行高19の場合1.46153846になります)。 普段、YUI 2: Fonts CSSを利用しております。デフォルト(100%)は13pxです。文字の上下に4pxのアキをいれ、行高を21pxに設定したいと思っております。その場合 font-size: 100% line-height: 1.61538462 というのは正常に動作するのでしょうか。

    • ベストアンサー
    • CSS
  • HTMLファイルのフォント指定

    こんにちは。HTMLファイルの編集についてです。 スタイルシートによるフォントの指定について、 お尋ねします。 ヘッダ部分に、 h1{color:blue;font-size:18pt} とか、 .type { font-family:"MS 明朝"; font-size:20px; color:blue; } と書きますと、 <h1> </h1>、<SPAN CLASS="type"> </SPAN> で、文字を挟んで、フォントの指定が可能ですが、 HTMLファイルすべてのフォントについて、フォントサイズを13pxにしたい場合は、 どうしたらいいのでしょう。 ヘッダに書き込むことで、どうにか出来ないでしょうか? それで、なおかつ、部分的に<SPAN CLASS="type"> </SPAN>を 使いたいというような場合は、どうしたらいいのでしょう。

  • スタイルシートのフォントの変更について

    ホームページ作成初心者です。本を見ながらメモ帳でスタイルシートを使ってページを作成中です。 <style type="text/css"><!-- h1{font-size:40px;font-family:'Comic Sans MS'} --></style> 以上のように指定しているのですが、この欧文フォントが表示されません。 h1の文字列はローマ字です。 (PCにはこのフォントは入っています) どうぞ宜しくお願いします。

    • ベストアンサー
    • HTML
  • Fontのサイズを変更したい(MacのIE対応で)

    以前table内のフォントサイズを調整するために<td>タグ内に<span style="font-size:12px;">や<p style="font-size:12px;">といったタグいれることによって上手くいくと教えていただいたのですが、WindowsのIE、ネスケ、およびMacのネスケではこれで上手く見えるのですが、MacのIEには通用しません。マックのIEでフォントサイズを調整するにはどうすれば良いのでしょうか。

  • CSSとタグの関係

    おはようございます。宜しくお願い致します。 HTMLに外部スタイルシート(CSS)を組み込み、更にHTML内にタグでスタイルシートと同じ内容のものを書き込んだ場合、そのタグを消さないとCSSは反映されませんよね? 例えば、CSSでフォントサイズを指定したとして(tdにidで指定するとします)、HTML内にフォントサイズのタグを書き込んだ場合、どちらを優先されますか? 例:CSSで、 td#word {font-size: 10pt;} と指定します。それに併せて、HTML内に、 <td id="word" colspan="1"><font size="-1">表示したい文字</font></td> とした場合、指定するものに一番近い指定(<font size="-1">)を優先される…と覚えていたのですが。そして、この場合CSSは効かないと…。 しかし、両方効くはずと言われたことがあるのです。 それと、外部スタイルシートを「外してみているユーザーが居る」と言われた事が有ります。 勉強不足で申し訳有りません。外部スタイルシートの外し方って、どうやるのでしょう? 宜しくお願い致します。

    • ベストアンサー
    • CSS
  • ホームページビルダー:フォント色を統一したい

    ホームページビルダー10を使って、ホームページを作成しています。 スタイルシートを使用しているのですが、リンクを貼った箇所のフォント色が統一されません。 スタイルシートではリンク箇所は「紫」に設定されているはずなのですが、「青」になっている箇所がランダムにあります。 紫の部分と、青の部分のタグがどう違うかをよーく見てみたのですが、全然一緒のように思えます。 こんな感じです。 「紫」に表示される ↓ <TR><TD><A href="file:///C:/Documents and Settings…省略….html">リンクその1</A></TD></TR> 「青」に表示される ↓ <TR><TD><A href="file:///C:/Documents and Settings…省略….html">リンクその2</A></TD></TR> colrというタグもないし、なにがどう違うんでしょうか? <FONT color="#ff0000">文字</FONT>というようにすれば、色が変わる場所とそれでも変わらない場所とかあります。 こうなってしまった情報をどうすれば直せるのか、またどうすればこうなるのを防げるのか… ご存知の方がいらっしゃいましたら、ぜひご享受よろしくお願いいたします。