• ベストアンサー

MacとWinでのCSSにおけるフォント大きさ指定

自分はWinを使っているため、Macでの環境動作確認が出来ないのでご存知の方教えて下さい。 CSSでフォントサイズを指定するとき、pt指定ではなくてpx指定がMacにもWinにも いいのですよね? それはpxで指定するとWinで見てもMacで見ても同じ大きさのフォントに見えるからでしょうか。 もし違うなら、Macでこのpxだったらギリギリちゃんと見える・・・という大きさを教えて頂けますでしょうか。 Winで見たときに10pxくらいの小さいかわいい文字でサイトを作りたいと思っているので、よろしくお願いします。

noname#5284
noname#5284
  • HTML
  • 回答数4
  • ありがとう数6

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

  • ベストアンサー
  • Adams2001
  • ベストアンサー率67% (70/103)
回答No.4

Netscape6.xでは、pxで指定してもユーザが文字サイズを変更できますので、それによる表示の崩れを防止することはできません。 そもそもブラウザの機能で文字サイズを変更できるようになっているのは、視力が弱い等の理由で作者の指定した文字サイズでは閲覧に支障をきたすのをユーザが回避するためです。ですから、文字サイズは極力ptやpxなどの絶対値指定を避け、smallやlargeなどの相対指定することが推奨されています。 それでレイアウトが崩れて困る、というのはTABLE要素で(やはり絶対値を使って)レイアウトするなど、これまたユーザにとって不親切なよろしくない技法でレイアウトしているから、ということがほとんどでしょう。 #視覚障害者が音声ブラウザを利用してアクセスした場合、TABLE要素でレイアウトされたページの多くは正しく理解するのが困難であり、事実上利用できません。 HTMLとCSSに対して相応のスキルがあれば、上記のようなよろしくない技法に頼らずに高度なレイアウトを実現し、かつ文字サイズを変更されたりブラウザの表示サイズを変更された程度で見苦しく崩れるようなこともありません。 #できれば勉強して、高いスキルを身につけてください。 が、なかなかそこまでできる人は(専門家でも)少ないので、とりあえずはpxで指定すればよろしいと思いますが、10pxが「小さくてかわいい」と思われるのか、「小さくて見づらい」と思われるのかは、見る人によって違います。私の場合は10pxで書かれるとかなり見づらいので、せめて12pxにしてもらえれば、と思います。

noname#5284
質問者

お礼

ご回答ありがとうございました。 自分がちょっと頭の中にある「見る人に優しいサイト」をいうこともふまえて お返事を頂けて嬉しいです。 いつもデザインのことを最優先に考えてしまいますので、アドバイスを考慮して 頑張りたいと思います。

その他の回答 (3)

  • ARC
  • ベストアンサー率46% (643/1383)
回答No.3

私は%派ですねぇ。ブラウザで文字のサイズを変えたときについてきてくれるのがウレシイ。 大きい文字で読みたいのに、サイズを変えてもフォントのサイズが変わらなかったりすると、ちょっとクヤシイです。 ま、レイアウトよりも使い勝手優先ってことで。(でも、Macに持っていったときに、ptで指定するよりも「見れる」ページにはなる。)

noname#5284
質問者

お礼

ご回答ありがとうございました。 今まで%指定のことは考えたことがなかったので勉強になりました。

  • future9
  • ベストアンサー率29% (22/74)
回答No.2

私もpx推奨派です。互換を気にする場合はこれが一番です。 ところで、10pxと言う指定は小さすぎるのではないでしょうか。 640x480では丁度良くても、1280x1024では辛い領域に入ると思います。 OSよりも様々なモニタサイズで動作確認してみてはいかがでしょう。 余計なお世話でしたらすみません。

noname#5284
質問者

お礼

ご回答ありがとうございます。 モニタサイズでも文字の大きさは変わるのですね。 それは知りませんでした。参考になりました。11pxくらいにしようかと思います。

  • saekiya
  • ベストアンサー率50% (16/32)
回答No.1

>CSSでフォントサイズを指定するとき、pt指定ではな>くてpx指定がMacにもWinにも >いいのですよね? 良く、御存じですね。その通りです。 Windows環境でしか御存じない方が作られたページを Macで見ると、全く見え方が違うのでびっくりされると思います。 pxで指定すると、ほぼ同じ大きさになりますので、 旧来のテーブルタグでのレイアウトとCSSを併用されると、いいレイアウトができます。 CSSばかりに頼ると、表示できないブラウザ(や古いバージョン)が増えますので、要注意。 あと、関係ないですが、機種依存文字に気をつけて下さい。商用ページでも結構あります。

参考URL:
http://www.hotwired.co.jp/webmonkey/2000/17/index2a_page4.html
noname#5284
質問者

お礼

ご回答ありがとうございます。 なかなかMacで見る機会がないのでアドバイスが参考になりました。 px指定のことを教えていただいてありがとうございました。

関連するQ&A

  • WinとMacのフォントサイズの違い

    こんばんは。質問させていただきます。 現在作成中のHPのことなのですが、 CSSでWinはMS Pゴシック、MacはOsakaで表示させています。 例えばなのですが、フォントサイズを13pxで指定させると、 Winでは、約9pt位なのですが、Macではそれよりも大きく表示されます。 (文字自体が若干大きいです。) その結果テーブルなどでレイアウトが崩れてしまいます。 例えば、Winでは13px、Macでは11pxで表示させる等の方法は無いでしょうか? PCに関しては疎い方なのでお手数をおかけいたしますが、どうか ご教示よろしくお願い致します。

  • CSSとMacの関係

    CSSの制御で、 外部CSS マック用に css/style_mac.css に body {font-size: 12pt;} td {font-size: 12pt;} ウイン用に css/style_win.cssに body {font-size: 10pt;} td  {font-size: 10pt;} と記述しています。 がプラウザで確認したところ、 windows IE5.0は制御されていますが、 Mac IE5.0で制御されません。 HTMLの呼び出しは、 <SCRIPT LANGUAGE="JavaScript"> <!-- if(navigator.appVersion.indexOf("Mac",0) != -1){ document.writeln('<link rel="stylesheet" type="text/css" href="css/style_mac.css">'); } else { document.writeln('<link rel="stylesheet" type="text/css" href="css/style_win.css">'); } //--> </SCRIPT> と記述しています。 そもそもjavaがわからないので どこを直せばMacでも制御されるのでしょうか。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • Winで見るとフォントが大きすぎる

    Macでホームページを作ったのですがWinでみるとフォントが大きくなってしまいます。得にテーブルで組んだところが大幅に変わっています。 CSSで span.~{font-size:~px} と設定したのですが一向に治りません。 どうしたらWinでもMacと同様に見ることができるのでしょうか?教えてください!お願いします。 URL http://members.jcom.home.ne.jp/0512314301/

    • ベストアンサー
    • Mac
  • macとwinだとフォントのサイズが異

    macとwinだとフォントの サイズが異なりデザインが崩れてしまいます。 一応サイズはcssで指定していますが・・・ winで見ると枠に収まっているのに macで見ると収まりきれずに枠が大きく なってしまいます。 macとwinのフォントサイズを 統一させるにはどのような 指定をしたやよいでしょうか? ちなみに使用ブラウザは win・・・FireFox、IE6,7,8、Opera、Safari mac・・・FireFox、Opera、Safari です。

  • CSSで文字サイズを指定するとWINでは固定なのに…

    CSSで文字サイズを指定するとWINでは固定なのに MACではブラウザで文字サイズを変えると サイズが変わってしまうのです。 MACでも固定する方法がわかりません。 教えてください。 ドリームウエヴァ-で作って 外部ファイルにしていて a { font-family: "MS Pゴシック", "Osaka"; font-size: 11px; text-decoration: none; } p { font-family: "MS Pゴシック", "Osaka"; font-size: 14px; line-height: 18px; text-decoration: none; color: #666666; letter-spacing: 1px; } です。 どこがおかしいのでしょうか?

    • ベストアンサー
    • HTML
  • CSSで指定した文字色が見るマシンによって違う

    リンクの文字の設定をCSSで以下のように指定しています。 a:link{font-size:12px; text-decoration:none} a:visited{font-size:12px; text-decoration:none} 文字色はデフォルトの青→紫になって欲しいので指定していません。 WinとMacのIE・NNで確認して大丈夫だったのですが、ある別のWinのマシン(IE)で確認したら、リンクの文字色がクリック後ピンク色になります。 なぜそうなるのでしょうか? 回避方法としては色の指定をしてやるべきでしょうか? よろしくお願い致します。

    • ベストアンサー
    • HTML
  • CSSがMacで適応されない

    CSSを別ファイルで作って呼び出すようにしてhtmlを作っているのですが、一部のページでフォントのサイズをMacSafariが認識してくれません。 CSSはBODY内にベースのフォントサイズを指定(13px)し、その一部ページに<h1>で適応(13pxより若干大きめ)させようとしています。Win2機を使ってそのページを確認した所問題は無かったのですが、MacSafariで確認した所13pxどころか25pxほどのデカ文字になってしまいました。CSSが適用されていないのは分かるのですが、ブラウザの標準値(13px)よりもはるかに大きな文字になるのは記述が変な風に適応されている、という事なのでしょうか。

    • ベストアンサー
    • HTML
  • MacのIEで同じに見える文字のCSSを教えてください。

    WinのIEで文字に12pxのCSSを当てているのですが MacのIEで見ると、文章の横幅が大きくなってしまいます。 javascriptでWinとMacを振り分けてCSSを当てているんですが 同じに見えるMac用のCSSを教えてください。 ※Macの12pxとWinの80%は同じでした。  Winの12pxはMacの何に当たるのでしょうか? よろしくお願いします。

    • ベストアンサー
    • HTML
  • cssで指定した文字の大きさがIE6とIE7で違う

    cssでレイアウトを指定したサイトを作りました。 IE6、Opera9、Firefox2でうまく表示ができました(微妙にFirefoxだけ文字の大きさが小さいですが、ほぼレイアウトにあっています)。 が、先日IE7で確認するとフォントサイズが大きくなっていました。 cssではfont-sizeを、bodyが12px、各id、classはそれぞれ11px、10pxとしました。 IE7だと13pxくらいに見えてしまい、レイアウトをはみ出て表示されています。 IE7をIE6と同じフォントサイズにするにはどのように指定すればよいのでしょうか? ちなみに文字の大きさは固定でブラウザで大きさを変更できないようにしたいのです。 すみませんがよろしくお願いします。

  • cssでフォントサイズを相対指定。→NNで小さすぎ

    webデザイナーを目指しただ今、HP制作勉強中の者です。 Win&Mac(IE5.5、NN4.7、7.0)で確認作業しています。 IE、NNで共にフォントサイズの固定をせずに、尚且つ、IEでの表示文字サイズ「中」を基準として、程よい大きさで表示をさせたいと思い、cssで相対サイズの font-size:x-small を指定しました。 IEではうまい具合にいくのですが、NNの方で、大きさは可変するものの、デフォルト(文字の大きさ100%)で小さすぎになってしまい、どうにかこのような状況を避け、下記のような条件でフォントサイズを制御したいのですがどんな方法がありますでしょうか? ●NN、IEともにサイズ固定させたくない ●NNデフォルトで、読みやすいくらいのフォントサイズで表示したい ptで指定すると、IEでは固定されてしまいます。 ユーザーがNNのブラウザの設定をいじって、デフォルトサイズを変更しない限り無理なのでしょうか? また、IEとNNで別々のcssを適用させるなどの方法が存在するのでしょうか? NNでの表示は目をつぶりますか? 又、商業的なサイトを制作されている方は、文字サイズを固定させたくない場合にどんな指定をしますか?

    • ベストアンサー
    • HTML