ホームページを制作していますが、ブラウザによって文字のサイズが見かけ上違ってしまいます。

具体的には、フォントのサイズが
IE8<Safari<Firefox3
になっています。

価格.comなどの有名サイトを見ていると、どのブラウザでも同じサイズに見えます。

スタイルシートに
body {
font:13px;
*font-size:small;
*font:x-small;
}
を書き加えてみましたがあまり変化はありませんでした。

どのようにすればいいのでしょうか?

このQ&Aに関連する最新のQ&A

A 回答 (9件)

だれも、正しいなんて、言っていませんよ。

回答した人全て、正しいとは。

ハックなんて、正しくない指定とか、正しいが、他と違う動きだ、とか、そのような物をあえて使うことがハック。

http://troi.kbc-ehime.ac.jp/kj/?p=1672
(あくまで記載されている文献なので、内容の正当性は確認していない)

わかりやすいのが、クロスぶらうざで、

if ( document.all ) {
dhtml ブラウザ
} else {
DOM対応ブラウザ
}

とJavaScriptのコード。これ本来、動作は決まっていなかったが、オブジェクトだとtrueを返すなんて言う隠れた仕様が表にでてきただけ。

http://freematerial.fc2web.com/ref_js/ref_js_w_d …
(あくまで記載されている文献なので、内容の正当性は確認していない)

昔あやまって1箇所いサイズにPXを指定していて、他と同じサイズなのに違うサイズになっていた事に気がついたが、しかし、特にエラーにはならずに無視されたか、デフォルトの設定が効いていると思った。が、ちょっと違うようだった。これに気がついたのがIE5.0のとき。(だいぶ他人より気づくのおそかったな)

IEのDOCTYPEの設定によりスタンダートか、そうでないかの指定でも違った。他のブラウザでも試したが、反応がまちまち。同じエンジンだと、ほぼいっしょのはずなんだが・・・

私は、このようなハックのやり方は嫌いだ。しかし便利につかえる所がある。プログラミング的には、ごてごてになるやりかたなので、業務用のソフトでも、緊急避難的に、プラットフォーム(OSなど)のバグを回避して、バグの仕様に付き合ってパッチを出す事が多い。

もちろん、メーカーに(マイクロソフトとかSunとかIBMとか)、パッチ要求しているが、時間的に無理があり、パッチが出るまで、その方式になっているが、結局次期バージョンとかで再度そこのコードを改変しなといけないので、2度、3度でまになっています。そのような経験しているので、ハックはやりたくない。でも、便利だ(セキュリティーパッチなんて嫌いだ)。

その微妙な動作なので、マトリックスを作って、じっくりテストしてください。と言っている。へたすると、時期MicrosoftUpdateで、動作が変わっているかもしれない。他のブラウザも同じ。時期バージョンで、「あ、そこはバグだったので修正しました」なんていわれるかもしれない。そのリスクは十分にある。ただ、ハックを推奨している向きもある。

私と同じように、そのコードを書いた人のミスなら、それは、それとして直す必要がある。

なお、CSSだと無効な物は、無視される事がおおいが、それが実は効いている事もあるので、じっくり吟味してほしい。例えば上位が、12pt で、カレントが 20pxと指定した場合とか。その逆も。そのような所にバグ(仕様)が多い。
    • good
    • 0

「font プロパティ」はあるけど今の例だと指定が間違ってるから結局アウトでは>#5.



参考URL:http://www.w3.org/TR/CSS1/#font
    • good
    • 0

No.1です。


繰り返しますが、pxは相対サイズです。
【引用】____________ここから
相対単位には以下のものがある:
 ・em: 関連要素の'font-size'の値を参照する
 ・ex: 関連フォントの'x-height'を参照する
 ・px: 閲覧しているデバイスの解像度を参照する
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[CSS2の構文と基本データ型( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )]より

【引用】____________ここから
相対単位に分類されているピクセルはディスプレイでの表示を前提に考えると絶対単位のように思えるかもしれませんが、 これはれっきとした相対単位です。 出力機器の画素の大きさに左右されるためです。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[長さ(length)の単位 - Web標準普及プロジェクト( http://www.mozilla.gr.jp/standards/webtips0027.h … )]より

 ただ、今回の問題は、font-sizeとなるべきところを、fontと書いてしまったためだと思います。わからないときは、まず仕様書を確認する癖をつけましょう。仕様書を読まずに書かれているサイトやマニュアルもありますので・・
    • good
    • 0

font-sizeのpx指定は、絶対値指定なので、画面解像度以外の部分でブラウザによって差がでることはないと思いますよ。


もちろんブラウザ間で表示されているフォントが異なれば、具合も変わるのでそこは差っ引いてみてください。
問題があるとしたら、CSSのカスケードの仕方です。つまりどこかで記述がおかしくなっていると思います。
ためしに、すべてのCSS(場合によってはJSも)を削除して、
*{
font-size:13px;
font-weight:normal;
}
としてみてください。

どうですか?
ブラウザによって差がありますか?
この状態で差がないことを確認出来れば、あとはCSSを追加しながら問題がでるところまでコツコツと追いかけるだけです。
    • good
    • 0

どのようなつもりで font プロパティ が無い、と言ったのわかりません。



http://msdn.microsoft.com/en-us/library/ms530756(v=VS.85).aspx
http://www.w3.org/TR/REC-CSS1/#font

と言うことで基本的なCSS バージョン1 から定義されていましたが?

ハックとの組み合わせなので、微妙な動作。ちゃんとテストしないと。
    • good
    • 0

えっっあまりに初歩的


★ちゃんと調べて質問なり、回答しなけりゃ。
 ネット上に参照すべき資料は必ずある。

 font: というプロパティはないですよ。HTMLと間違えてない??
font-size:14px;
でなけりゃ・・・elementのattributeと混同しないように
font-colorじゃなくて、color:とかも、よく間違う


【引用】____________ここから
・em: 関連要素の'font-size'の値を参照する
・ex: 関連フォントの'x-height'を参照する
・px: 閲覧しているデバイスの解像度を参照する
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[CSS2の構文と基本データ型( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )]より
なお、pxは相対サイズなので絶対サイズで指定したけりゃ
【引用】____________ここから
絶対単位は、出力媒体の物理的性質が予め判っている場合に限り有用である。 絶対単位には以下のものがある:
・in: インチ -- 1inは2.54cmに等しい
・cm: センチメートル
・mm: ミリメートル
・pt: ポイント -- 1ptは1/72inに等しい
・pc: パイカ -- 1pcは12ptに等しい
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[CSS2の構文と基本データ型( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )]より

 たとえばpxは、WindowsとMacでは違うサイズになる。

★絶対サイズは薦めません。端末やユーザの環境は異なるので、あくまで利用者の標準サイズを基準に決めてあげよう。目の悪い人、解像度の低い端末・・・もあるのですよ。
 フォントサイズを指定しなくても表示が崩れないように、それがスタイルシートの目的かも。
    • good
    • 0

趣味でホームページを作成している30代男です。


まず、ページを訪問した人全てに同じ文字の大きさで
提供しようというのがそもそもの間違いです。
理由としましては、お使いのブラウザそれぞれでの文字の
表示形式を統一しての比較をされていますか?
ただ単にブラウザをインストールして詳細設定した後の比較
ですとまだ近い状態には近づくと思いますが、
恐らくブラウザによって「13px」の扱いが違うと思います。
試しに「13px」を「80%」としてみて下さい。
それでもかなり違いますかね?
この%表記はお使いのブラウザの文字表示のデフォルトが
仮にIE6でフォントサイズ中の時にmediumuの大きさが16px
相当とします。この時に75%で指定すると、その16pxの75%
つまり12px相当の大きさで表示されるというものです。
CSSでは、以前よりpx設定は非推奨されています。
理由は質問者様の抱えている問題の為です。
これはちなみに<p>要素にも反映されます。
という様に全く同じ表示にするという事がそもそも無理です。
おおむねこの位の表示をさせたいとお考えください。
まぁJavaScriptとかで条件を指定すれば全く一緒というのは
可能かもしれませんが、HTML+CSSではなかなか難しいと
思われます。
    • good
    • 0

まだまだ経験が浅いようだ。



body {
font:13px;
*font-size:small;
*font:x-small;
}


どこから持ってきたのだろう。

普通、そのままCSS適用する思うが。必要なのは全部のCSS、JSファイル、さあ全部適用して、これはと思う物をはずしてみよう。

それがデバックの仕方。

普通、はずす前に、その使い方が、CSSのどのバージョンで、どのような仕様になっているか調べると思うが、さらにブラウザによって、どのように適用されているのか調べると思うのだが、

どうだろう。

>どのブラウザでも同じサイズに見えます。


そうかな~

ひんとだけ

http://www.webbibo.com/blog/htmlcss/selector.html

このような人もいる。しかし、テキストを買えば、同じような事が載っているのだが・・・・
    • good
    • 0

13pxなら、YUIベースで同じに見えるけど、


フォントファミリーは? MS Pゴシックで比較してみれば?

body {
font:13px/1.231 "MS Pゴシック",sans-serif;
*font-size:small;
*font:x-small;
}


body{ font-size:small !important; font-size:x-small;}
とか、
body{ font-size:13px !important;}
とか、
body{ font-size:13px !important; font-size: 81.2%;}
*:first-child+html body{ font-size: small !important;}

色々やってみたら?
フォントファミリーや古いブラウザ、DTDによっても違うし・・・
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q映画などの無料ダウンロード方法

映画などの無料ダウンロード方法
チャーリーとチョコレート工場などを無料でダウンロードしたいで無料ダウンロードできるサイトややり方を教えて下さい。
よろしくお願いします。m(__)m

Aベストアンサー

2010年の1月1日より、改正著作権法が施行されました。
これにより、音楽・動画などの著作物を権利者の許可無くアップロードしたものを
ダウンロードするだけで犯罪となります。
ただし、ストリーミングは対象外なので、動画サイトなどに違法アップロードされたものを
見ても大丈夫です…が、やはりきちんと買いましょう。

参考URL:http://d.hatena.ne.jp/nakakzs/20090518/1242657559

Qスマホでホームページを表示した時、文章のフォントサイズが小さくなってしまう

テキストサイトを作っています。

-------------------------------------------------
#container1 {
width: 948px;
margin: 0px auto;
min-height: 100%;
overflow: hidden;
padding: 1px;
background: #FFF;
}

div.main {
margin-left: 8px;
line-height: 1.5em;
font-size: 100%;  /* ここでフォントサイズを変える */
color: #0b0b0b;
font-family: "メイリオ",sans-serif;
margin-bottom: 300px;
}
-------------------------------------------------

cssにこのように記述して、文章を表示する部分をつくりました。
しかし、今のままではPCで閲覧したときはちょうどよい文字サイズなのですが、スマホだと文字が小さく表示されてしまい、とても読みづらいです。
スマホで表示したときだけ文字を大きく表示するようにしたいのですが、どうしたら良いでしょうか。

テキストサイトを作っています。

-------------------------------------------------
#container1 {
width: 948px;
margin: 0px auto;
min-height: 100%;
overflow: hidden;
padding: 1px;
background: #FFF;
}

div.main {
margin-left: 8px;
line-height: 1.5em;
font-size: 100%;  /* ここでフォントサイズを変える */
color: #0b0b0b;
font-family: "メイリオ",sans-serif;
margin-bottom: 300px;
}
-------------------------------...続きを読む

Aベストアンサー

スマホは、解像度が高く本来は、1pxが、0.26mmなのですが・・
【引用】____________ここから
基準画素とは、腕の長さのデバイスからの距離と96dpiのピクセル密度におけるデバイス上の1ピクセルとの視角である。名目の腕の長さが28インチの場合、視角は約0.0213度である。距離をおいて読むために、1pxは約0.26mm(1/96インチ)に対応する。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[構文と基本データ型( https://momdo.github.io/css2/syndata.html#value-def-length )]より

 スマホの場合は、Viewport という機能があり、本来980pxであってもスマホ縦置きの横幅320px、すなわちほぼ1/3に縮小されてしまいます。

 そのために、パソコンで見るのに比較して1/3の文字になったりします。

 もちろん、最大の原因はWebページの作成で、大きな幅に固定してしまうから起きる現象で、リキッドデザインで、320pxでも縮めなくても表示できるデザインにしてあれば問題ないのです。
#container1 {
width: 948px;
margin: 0px auto;

#container1 {
width: 90%;
min-width:480px;
max-width:1000px;
margin: 0px auto;

・・・これが本来の手法です。これでスマホ縦置きだと 320/480 約 3/5程度で表示される

★#container1 このようなid名やclass名は好ましくありません。
 「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」
 ・・・20年近く前から言われ続けているが、理解されにくく、それでHTML5では構造を示す新しい要素が追加された。
 W3C - 『HTML 5 differences from HTML 4』日本語訳 - HTML5.JP( http://www.html5.jp/trans/w3c_differences.html#new-elements )
 つけるなら、それを参考に<div class="article">でしょうが、率直に
body{width: 90%;min-width:480px;max-width:1000px;margin: 0px auto;・・
ないし
div.header,div.section,div.footer{
  {width: 90%;min-width:480px;max-width:1000px;margin: 0px auto;・・
でよい。
★CSS2以降は、起点セレクタを書きます。
 div#container1
 #container1 とかけば、*#container1 と全称セレクタ(詳細度0)が省略されたとみなす

★div.main
 mainは、ごく一部に使う。
 main 要素 - コンテンツのグループ化 - HTML要素 - HTML5 タグリファレンス - HTML5.JP( http://www.html5.jp/tag/elements/main.html )

これらは、検索エンジンがページの内容を正確に理解するため--SEO検索エンジン最適化のために留意したほうが良い。


 さて、本題の文字サイズですが、基本的にはリキッドで対処できますし、それで対応できない・・たとえば、640ピクセル以下のデバイスだとデザインを変える
<style type="text/css" media="screen and (max-width: 640px)">
でスマホ用のスタイルをかく。

 そして、先のViewportをつかって、HTMLに
<meta name="viewport" content="width=device-width; initial-scale=0.8">
 を書いておく。

1) ページをリキッドで製作する。
 現在のように幅広ディスプレイ、タブレットやスマホのような小さな画面が混在する場合は必須です。
2) mediaqueryをつかって、画面幅でデザインを変更する。
3) Viewportをつかって、縮小されないようにする

 の三点が対策になります。

スマホは、解像度が高く本来は、1pxが、0.26mmなのですが・・
【引用】____________ここから
基準画素とは、腕の長さのデバイスからの距離と96dpiのピクセル密度におけるデバイス上の1ピクセルとの視角である。名目の腕の長さが28インチの場合、視角は約0.0213度である。距離をおいて読むために、1pxは約0.26mm(1/96インチ)に対応する。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[構文と基本データ型( https://momdo.github.io/css2/syndata.html#value-def-length )]より

 スマホの場合は、Viewport...続きを読む

Q音楽の無料ダウンロード

ナップスターなどから音楽の無料ダウンロードが出来ると聞きましたが、ネットから好きな音楽を検索し、無料ダウンロードする方法は今でもあるのでしょうか?

Aベストアンサー

ナップスターそのものに関しては今現在サービスはまだ続けているようですが、既に終わっている模様です。
その代わりナップスター互換のクローンツールが代わりに繁栄しています。
日本ではWinMXとか、海外ではまた別のソフトです。
ただこの手のソフトは身元がバレバレになってしまうので、逮捕も続出していますね。日本ではですが。

これとは別にグヌテラ互換のソフトが今後主流になっていくのではないかと言われています。

Qホームページのフォントも、文字化けしますか?

例えば、普通HP作成時に文章を作成するとき、
「Osaka」などの普通のフォントを使うと思うんですが
、それが自分で気に入って買ったフォント(例えば「新ゴMとか)を用いたとき、それは、どのパソコンでもそのフォントで表示されるのですか?
やっぱりそのフォントをPCの中に入れていない人は、文字ばけして表示されるのですか?
教えて下さい。

Aベストアンサー

こんばんわぁ、Blackwinglsです。

フォント指定をした場合、そのフォントを持ってるパソコンでは、そのフォントで表示されます。
持っていない場合は、標準のフォントで表示されます。
文字化けする事はマズありません。

ではでは(@^^)/~~~

Q無料ダウンロードの意味は

無料ダウンロードとあるので
explorer-construction1.9をダウンロードして使用してみました
http://explorer-construction.softonic.jp/
新版はシエアウエアだと認識していましたが、ここでは旧版のVer1.9のダウンロードです、
ところが使用を始めてみると「お金を払って」のメッセージがしつこくポップアップしてきます。
無料ダウンロードって何ですか?
何か詐欺まがいの気がしますが・・・・

Aベストアンサー

そこまでは無料にして体験してもらって、これ以降は有料との事で大嫌いな商売ですね。そうゆう商売の仕方を禁止にしてほしいですよ。

Qホームページの文字サイズについて

gooの簡単HPをつくっているんですけど、HP上の文字サイズを小さくするにはどうしたらいいんでしょうか?

Aベストアンサー

gooのヘルプにも書かれていますが、
<FONT SIZE=2>ちょっと小さめ</FONT>
で文字のサイズを変えられますよ

参考URL:http://www.goo.ne.jp/help/faq/community/easy_hp.html#faq_q11

QYouTubeから音楽無料ダウンロードについて

今パソコンにYouTubeから音楽を無料ダウンロードして、何年後か近い将来に、コンピューターが進化して、昔にYouTubeから音楽を無料ダウンロードした事がばれて、警察に逮捕される事ってありますか?

またコンピューターが人の脳を超えたら、YouTubeから音楽を無料ダウンロードした事が必ずばれて、何年後か近い将来に警察に逮捕される事ってありますか?

Aベストアンサー

 考え過ぎです。毎日1億回も視聴されているYouTubeを監視出来るわけがありません。違法ダウンロードが事件としてニュース報道された番組を見た事がありますか。そういうニュースは見掛けませんよね。

 違法ダウンロードを摘発するのは難しいのが実情です。現在の防止方法は、プロテクトをかけて、ダウンロード出来ないようにする方法ですが、それ以外の対策を取った例はほとんど無いだろうと思います。

 違法アップロードは警告を受けた後で削除され、アカウント停止で終わりのようです。違法ダウンロードを把握して訴追した事件は聞いた事が無いですね。よほど組織的にDVDやBDの違法アップロードとダウンロードを大量におこなった場合を除いて、警察の摘発までには至らないのではないでしょうか。

 そもそも現在の著作権法が前近代的で、著作権者の利益しか考えておらず、ユーザーの不利益に対する配慮に欠けているので、プロテクトを付け過ぎたBDレコーダーの販売不振などの弊害が出ているようです。

 YouTubeは基本的にダウンロードしても問題ありませんし、ダウンロード出来ない場合は違法だと判断すれば良いだけです。

 考え過ぎです。毎日1億回も視聴されているYouTubeを監視出来るわけがありません。違法ダウンロードが事件としてニュース報道された番組を見た事がありますか。そういうニュースは見掛けませんよね。

 違法ダウンロードを摘発するのは難しいのが実情です。現在の防止方法は、プロテクトをかけて、ダウンロード出来ないようにする方法ですが、それ以外の対策を取った例はほとんど無いだろうと思います。

 違法アップロードは警告を受けた後で削除され、アカウント停止で終わりのようです。違法ダウンロードを...続きを読む

Qホームページビルダーで文字サイズを変えると全体も

HPB v15で標準モードでページを作成しています。
いつの間にか、特定文字列を選択して文字サイズを変えるとページ全体が変わってっしまいます。色や下線は選択部分だけ変更できます。どうしたらよいのかお教えください。

Aベストアンサー

ホームページビルダーのバージョンは最新ですか?
[ヘルプ]→[バージョン情報]で現在のバージョンを確認してください。
バージョンが[15.0.5.0]でなければ、参考URLからアップデートモジュールをダウンロードし、インストールしてください。

アップデートモジュールをインストールして最新版にしても同様の症状が起こるなら、
ジャストシステムのサポートに問い合わせてみてはいかがですか?

参考URL:http://support.justsystems.com/faq/1032/app/servlet/qadoc?QID=049410

Qエクセル ワード の無料ダウンロード

エクセル ワード の無料ダウンロード

オフィス機能を無料ダウンロードできるところを探してます。
現在Win7なんですが、対応してるものを見つける事ができません。

仕事で使うわけではないので、最低限の機能で充分ですので何かご存知でしたら教えて下さい

Aベストアンサー

> トップのサイトは私も見つけてインストールしたのですが、ワードやエクセルの画面がどうも出ず、
  
WordやExcelはMicrosoft社の名称です。
「OpenOffice.org」のワープロソフトは「Writer」、表計算ソフトは「Calc」という名称です。
「スタート」ボタン→「すべてのプログラム」→「OpenOffice.org」→「Writer」または「Calc」の順にクリックしてみて下さい。

Qfc2無料ホームページにて携帯サイトを作成しております。文字サイズや色

fc2無料ホームページにて携帯サイトを作成しております。文字サイズや色が変更されません。
2点質問させて下さい。

1.文字サイズの変更がされません。すべて同じサイズになってしまいます。
2.1行だけ目立たせる為にリボンの様に色をつける事をしたいのですが表示されません。文字のみ表示されます。

ホームページビルダー上で作成しており、ソフト上では文字サイズもリボンの様な色も表示されます。
また、iモードHTMLシミュレータII上でも表示されるのですが、実機では表示されません。

よろしくお願いいたします。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 14.0.2.0 for Windows">
<meta name="IBM:DeviceType" content="i-mode7_FOMA3">
<title></title>
</head>
<body>
<div style="font-size:x-small;">小文字</div>
<div style="font-size:medium;">中文字</div>
<div style="font-size:x-large;">大文字</div>
<div style="font-size:10;">size10</div>
<div style="font-size:11;">size11</div>

<div style="font-size:20;">size20</div>
<div style="background-color:#ff0000;">リボンの上に文字</div>
</body>
</html>

fc2無料ホームページにて携帯サイトを作成しております。文字サイズや色が変更されません。
2点質問させて下さい。

1.文字サイズの変更がされません。すべて同じサイズになってしまいます。
2.1行だけ目立たせる為にリボンの様に色をつける事をしたいのですが表示されません。文字のみ表示されます。

ホームページビルダー上で作成しており、ソフト上では文字サイズもリボンの様な色も表示されます。
また、iモードHTMLシミュレータII上でも表示されるのですが、実機では表示されません。

よろしくお願い...続きを読む

Aベストアンサー

Docutype HTMLで携帯サイトを作っている場合は font-sizeプロパティに対応していないので、
fontタグで指定しなければいけません。
逆にDocutype XHTMLであればfontタグでのサイズ指定に対応しておらず、font-sizeプロパティを書いてあげる必要があります。

背景についてはすぐわからなかったので、文字サイズの件だけになりますがご容赦ください。(深々


人気Q&Aランキング

おすすめ情報